Why Topography?

Good typography induces good mood! Exclaims author and designer Richard Rutter in this CSS Day talk Golden Rules for Typography on the Web.

Three factors come together to make a paragraph readable.

Readability is determined by:

  • Line spacing
  • Measure
  • Text size

Text size is perceived by the distance it is from the reader.

Using sizecalc.com you can determine that text being read:

at 30 centimeters should be about 16px

at 45 centimeters shuold be about 18px

at 60 centimeters should be about 22px

Scaling Fonts with ems and rems

Because the page designer doesn’t know the exact properties of the user’s device, the common practice is to make the text scalable with all font sizes expressed relative to a default font size. There are three relative measurements used to provide scalability:

  • percentages
  • ems
  • rems

A percentage sets the font size as a percent of the font size used by the containing element. For example, the following style rule sets the font size of an h1 heading to 200% or twice the font size of the h1 heading’s parent element: 

    h1 {font-size: 200%;}

The em unit acts the same way as a percentage, expressing the font size relative to the font size of the parent element. Thus, to set the font size of h1 headings to twice the font size used in their parent elements, you can also use the style rule:

    h1 {font-size: 2em;}

The em unit is the preferred style unit for web page text because it makes it easy to develop pages in which different page elements have consistent relative font sizes under any device.

Context is very important with relative units. For example, if this h1 element is placed within a body element where the font size is 16px, the h1 heading will have a font size twice that size or 32px. On the other hand, an h1 heading nested within an article element where the font size is 9px will have a font size of 18px. In general, you can think of font sizes based on percentages and em units as relative to the size of immediately adjacent text.

The fact that relative units cascade through the style sheet can lead to confusing outcomes. For example, consider the following set of style rules for an h1 element nested within an article element in the page body:

    body {font-size: 16px;}
    body > article {font-size: 0.75em;}
    body > article > h1 {font-size: 1em;}

Glancing at the style rules, you might conclude that the font size of the h1 element is larger than the font size used in the article element (since 1em > 0.75em). However, this is not the case: both font sizes are the same. Remember, em unit expresses the text size relative to font size used in the parent element and since the h1 heading is contained within the article element its font size of 1em indicates that it will have the same size used in the article element. In this case, the font size in the article element is 75% of 16px or 12 pixels as is the size of h1 headings in the article.

Because of this confusion, some designers advocate using the rem or root em unit in which all font sizes are always expressed relative to the font size used in the html element. Using rems, the following style rule sets the font size of article text to 75% of 16 pixels or 12 pixels while the h1 heading size is set to 16 pixels: 

    html {font-size: 16px;}
    article {font-size: 0.75rem;}
    article > h1 {font-size: 1rem;}

The rem unit has become increasingly popular with designers as browser support grows and its use might possibly replace the use of the em unit as the font size unit of choice in upcoming years.

Viewport Units

Another relative unit is the viewport unit in which lengths are expressed as a percentage of the width or height of the browser window. As the browser window is resized, the size of text based on a viewport unit changes to match. CSS3 introduced four viewport units: vw, vh, vmin, and vmax where

  • 1vw = 1% of the browser window width
  • 1vh = 1% of the browser window height
  • 1vmin = 1vw or 1vh (whichever is smaller)
  • 1vmax = 1vw or 1vh (whichever is larger)

For example, if the browser window is 1366 pixels wide, a length of 1vw would be equal to 13.66px. If the width of the window is reduced to 780 pixels, 1vw is automatically rescaled to 7.8 pixels. Auto-rescaling has the advantage that font sizes set with a viewport unit will be sized to match the browser window, maintaining a consistent page layout. The disadvantage is that page text can quickly become unreadable if the browser window becomes too small.

Variable Fonts

Variable fonts are an evolution of the OpenType font specification that enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style. They let you access all the variations contained in a given font file via CSS and a single @font-face reference. This article will give you all you need to know to get you started using variable fonts.

MDN: Variable Fonts Guide