Introduction to web fonts and typography

The standard style or regular weight of an upright typeface is called , which contrasts with its Italic version.

A design of a typeface that slants from left to right. Italics are a redesign or interpretation of the upright Roman glyphs, not a mere tilted version. Designers draft, craft and draw Italics separately.

When designing a web project, two important typography issues will come up. The first is choosing the appropriate typefaces, the second is adjusting the font sizes for your needs. Size usually comes into play as a scale, defining a hierarchy for headlines and body text. The underlying design principle is one of guidance, gently leading the reader or viewer from one element to the next. CSS has 15 different units for sizing, but only a few of these are suitable for font design and sizing. CSS can express or define sizes in or . The difference is important: an absolute size will always stay the same, whereas a relative size depends on other elements on the same page. Only with relative units can you set your fonts to adjust to different circumstances such as varying screen sizes, creating a responsive design. To better understand font sizes in web design, let’s look at the “traditional” units first: point and pica. They have their origin and history in typography. For printing and in a word processor, you’ll specify font size in point, for example “12pt Times New Roman”. As a unit of measure, a corresponds to 1/12 of a pica or 1 pixel. A corresponds to 12 points or pixels. The relation between these absolute units is the following: 1in = 2,54cm = 25.4mm = 72pt = 6pc CSS will accept absolute units such as inches, centimeters, and millimeters, as well as point and pica. However, due to varying screen resolutions, they might display incorrectly. Furthermore, different screens require different reading distances: you look at a mobile phone close up, yet are further away from a computer screen or a projection. What looks big on a phone screen might appear small on a computer screen. Relative units help you solve the problem of designing for various screen sizes. The most important two are and .

is an absolute unit, but not related to physical centimeters or inches. In that sense, it’s sort of “magical”. CSS defines the px unit to be “small but visible”–a horizontal line 1px wide should display with sharp edges (without anti-aliasing). Sharpness depends on the device, and px is therefore not a constant length. Px comes from the CRT computer monitors in the 1990s. The smallest dot (or “pixel) one of these could display measures about 1/100th of an inch, or roughly 0.25mm. This is where the px unit comes from. Px corresponds more or less to a little more than the distance from the top of the highest letter to the bottom of the lowest letter (i.e. ascender to descender) in a font. Px is a unit to understand but not use in typography. Relative units will point to other properties that are set in px. For example, the standard font size for a browser or even a device might be set to 16px. You design can point to that in relative units. If the standard changes (because the user changes it in the browser, or the device changes), so does you design–automatically.

is defined as the width of the point size. In 12pt type, one em has a width of 12 points. It is therefore a relative unit. If you set a font size of 2em, it would be twice as big as the font-size of its parent element. 16px is a common default font-size for the body element, especially in desktop browsers. Using the Em unit allows you to set typographical elements in relation to font-size and other parent elements.

This unit is used less often than Em, but you can use in much the same way. Ex refers to the x-height of a font instead of its (total) size, like Em does. You can therefore use it to style the size of elements in relation to the height of lowercase letters in a font. Since the x-height varies between fonts, you can use Ex to adjust the size of images and align an image border with the midline, for example.

The unit was introduced to further simplify styling rules. Rem refers to “root em” and is the font size of the root element of the document. While Em might change throughout the document, Rem does not.

The CSS property font-size allows you to set the size of different font elements, such as body text, headlines etc. It’s common to do this in relation to the default font-size of the body element using the relative unit Em.

The CSS property line-height controls the line height of text. It corresponds to a multiple of the defined font size. If the default font size is specified as 16px, a line-height of 1.2em would correspond to a line height of 19.2px. This is also the default line-height for most browsers. A line-height of 1.5 might provide more readability. In general, designers tend to increase line-height for thick fonts, fot fonts of a dark color, and for long-form content.

To further affect legibility, you can control letter spacing with the CSS property letter-spacing. It’s also best to express this in relative Em units. Tracking or letter spacing depends on the font in use: ideally your font choice needs no adjustments at all or most sizes. Letter spacing in web font design can become an issue for very large or very small elements. Typical paragraph size is usually spaced well already. Consider reducing letter spacing for large titles of headlines, whereas adding extra space will commonly only be used as a stylistic element.

Kerning for specific letter pairs is already specified by quality fonts, so the CSS property font-kerning is set to normal. You can use it to adjust kerning where necessary, but values that work for one font might not be suitable for another.