InternetingIsHard Part 9 – Web Typography

The final part of Internetting is Hard.

Embedding a Web Font

Currently, over 90% of browsers support WOFF (the latest is WOFF2) so we can use the web font format typically.

You can embed a locally hosted woff font at the start of the CSS stylesheet like so:

@font-face {
  font-family: 'Roboto';
  src: url('Roboto-Light-webfont.woff') format('woff');
}

The font-family refers to the name we would refer to, in order to use the font, for the rest of the stylesheet.

Typefaces have different font files for different font weights, italics, etc. If it is not embedded, bolded or italicized fonts will be synthesized. You can turn that off in Firefox by:

/* This will only work in Firefox */
em, strong {
  font-synthesis: none;
}

It is best to embed the italic and bold versions of the font. You can specify the style and weight of the font within the @font-face:

@font-face {
  font-family: 'Roboto';
  src: url('Roboto-Light-webfont.woff') format('woff');
  font-style: normal;
  font-weight: 300;
}

@font-face {
  font-family: 'Roboto';
  src: url('Roboto-LightItalic-webfont.woff') format('woff');
  font-style: italic;
  font-weight: 300;
}

@font-face {
  font-family: 'Roboto';
  src: url('Roboto-Bold-webfont.woff') format('woff');
  font-style: normal;
  font-weight: 700;
}

Using Google Web Fonts

Select a font (or many) from Google Fonts, and copy the given code to link to the relevant stylesheet. It is not recommended for devs to do so, even if it’s easier, as you forfeit some control to Google.

 

Best practices

• Limit number of typefaces so as to limit WOFF files.
• Either indents or margins, not both.
• Left-align text (if read from left to right).
• Right-align can be used to ‘attach’ captions to left-aligned figures

  figure {
    position: relative;
  }
  figcaption {
    display: block;

    font-style: italic;
    text-align: right;
    background-color: #FFFFFF;

    position: absolute;
    left: -220px;
    width: 200px;
  }

• Space to breathe + consistent spacing
• Short lines (use fixed-width layouts)
• Use a font-size between 14px and 20px for the body element.
• Use “curly quotes” and apostrophes with the ’, ‘, ”, and “ HTML entities.
• Use proper dashes (–, —) and other symbols (©).
• Don’t use text-decoration: underline except for hover states.
• Use real italic fonts over synthesized ones if not it’s too much of a performance burden.

Related: Practical Typography