Markup for type

Inline elements and block elements

In normal body copy, text typically flows from one line to the next as we reach the edge of the visible page. We add words to a line, progressing horizontally from left to right, until we reach the end of the line and drop down to continue on the next line. In HTML, this is the default behavior for text without any markup. Many html elements are intended to flow with text in this way without interruption. Elements that have this behavior are known as inline elements. Common inline elements include a, strong, em, b, i, ^sup, _sub, , code and span HTML also has elements which do not follow the normal flow of text, but instead define the containers, or blocks, within which inline text flows. Most html documents are fairly complicated hierarchies of 'nested' elements - blocks containing blocks, etc. Common block elements include:

h1

h2

h3

h4

h5

h6

article

section

header

div

Code comments

Sometimes, you want to put notes or comments into the code itself that are not visible to the end-user. These code comments can also be useful for temporarily 'removing' code from the page without actually deleting it, because code within a comment does not get parsed by the browser.

Meta charset

There are many different technical standards for how text data can be encoded. It's a good idea to tell the browser how the text in your document is encoded, so it can be interpreted correctly. The UTF-8 standard is widely-used, and encompasses a huge array of glyphs for a multitude of languages.

HTML entities

There are some characters that must be handled differently because they are used to create the markup itself. These characters must be 'escaped' in your code with short 'words' called HTML Entities. These 'words' all begin with an ampersand, and end with a semi-colon. Angle brackets (< and >) must be represented with html entities, since they are parsed to create tags themselves. Another common entity is the ampersand itself, since all entities begin with one. You'll find there are actually entities for virtually every glyph, but as long as you're using UTF-8, you won't need most of them.

Styles for type

Format of a CSS ruleset

A complete ruleset includes a selector followed by a colon, then a set of curly-braces containing one or more individual rules. Each rule is a property: value pair, ending with a semi-colon.

selector {
  property-name: value;
  another-property-name: value;
}

Inheritance

Most CSS properties set on a container will be inherited by the decendants of that container. An element will accumulate inherited rules from ancestors. A rule on the element itself will take precedence over a rule inherited from a parent, which will itself take precedence over a rule inherited from an grandparent, and so-forth.

We can see observe the full stack of inherited rules for a given element using the element inspector.

CSS properties for styling type

font-family

The number of font-faces you can safely assume will already be available on your user's computer is extremely limited. The font-family is therefore used to indicate a prioritized list font-faces. The browser will use the first face if it is available, but if not, it will attempt to use the next, and so forth.

font-size

Use font-size to specify the size of type.

font-size can be specified in absolute units (pt, px) or relative units (rem, em, %). Absolute units operate like you're probably used to in print (e.g.: a pt is 1/72^th of an inch). Relative units are calculated based on some other aspect of the page.

A rem is a unit equal to the document's base font-size, as defined on the html element. An item sized with the rem unit will be consistently sized no matter where it is on the page.

An em is a unit equal to the font-size of the parent element. It is best used on elements that should be sized in proportion to the type they are near.

Similar to em, font-size specified with the % unit will be sized as a percentage of the font-size of the parent element. Effectively, 1em = 100%.

font-weight

Font-weight controls the boldness of the typeface. Typical values are normal or bold. Font-weight may also be specified as a number between 100 and 900, where 100 is the lightest weight, and 900 is boldest. 400 is equivilent to normal.

font-style

Use font-style to control whether type is italicized.

Note: many elements are styled as italic by default.

line-height

Line-height controls the space between lines, known in traditional typography as leading. Line-height may be specified in the unit of your choice, but does not require one. A value of 1 is equal to the font-size of the type being styled. A typical value would be 1.2.

letter-spacing

Known as tracking in traditional typography, letter-spacing is the css property we use for controlling space between characters. This is an excellent use-case for the em unit. As with many properties, negative values are allowed!

text-align

Use text-align to center the inline child elements within a container. This is a litter different than many of the styles we have discussed, in that it generally only makes sense when applied to a block-level element.

margin

Margin is one of many properties we can use to control white-space around type. Details will come later, but for now we can use it to add some space around the edge of the page, as well as control space between other blocks like article and section.

text-decoration

By default, anchor tags are displayed with an underline. This underline is controlled by the text-decoration property. Possible values include none, underline, overline, and line-through. You can also use the text-decoration-style property to set the line as solid, wavy, or dashed.

text-transform

The text-transform property allows you to transform text to uppercase, lowercase, or capitalize (which capitalizes each letter).

text-indent

You can indent the first line of a block of text using the text-indent property. You can also use this propery to 'outdent', by using a negative value.

color

While css allows you to set the color of almost anything one way or another, the actual color property is used specifically for the color of text. There are a number of ways to represent the specific color you want to use:

color: gray; CSS recognizes many color names.
color: #cc0000; These codes are available in most color-pickers, including in VS Code, and in the browser inspector.
color: rgb(200, 0, 0); Each number represents an RGB channel value (0-255).
color: rgba(200, 0, 0, 0.5); First three numbers represent an RGB channel value (0-255), the final number (decimal 0-1) represents an opacity, where 0 is fully transparent, and 1 is fully opaque.

Using web fonts

You don't have to limit yourself to web-safe fonts. You can provide font resources with your website files, allowing the user's browser to download the required typeface(s). The easiest way to do this is with cloud-based a webfont provider, as discussed below.

Google fonts

fonts.google.com provides a free-to-use collection of web fonts. The quality of these typefaces does not always meet the standards of your typography professors, but they have the considerable advantages of being free, plentiful, and easy to use!

Typekit fonts (Adobe)

Adobe's Typekit resource is available to Creative Cloud subscribers. Typefaces used through Typekit are licensed by virtual of your CC subscription. (Educational subscriptions may have limited access.) Typekit is not free, and is slightly more complicated to use, but has the benefit of providing higher-quality typefaces.

Font Awesome (Icon font)

Font Awesome is an example of an icon font - a typeface whose glyphs, rather than being alphabet characters, are vector icon art. Icon fonts can be extremely useful when building controls for user interfaces.