Typography for the Web

Strategies, Tricks, and Best Practices

Similar to layout, when it comes to typography one of the most challenging differences between designing for the web vs. designing for print is the size of the canvas: for print, the dimensions are fixed and known; for the web, the dimensions are forever changing and unknown. Another, equally important difference is the content: for print, the content is fixed and known; for the web, the content can change and could be unknown to the designer. The two mediums are fundamentally different.

Watch Video Lesson

So how do you control the typography and set good type for the web? Web designers need to think differently by shifting their mindsets to plan for the unknown when setting type on the web. Web designers can still utilize the core principles of typography (e.g. choosing appropriate type faces and pairings, no hanging punctuation, set limits for line length/measure, etc.), but designers must also be able plan for and adapt to the many different screen sizes that users might interact with their type and the many constraints of the web when it comes to controlling the type (e.g. are my columns too wide? too narrow? can I decrease the leading on small screens and increase it on big screens? how can I control the number of characters per line for each?, how will this text wrap? how can I fix my widows? )

The good news is that there are emerging techniques and strategies that have evolved over the years to help aid web designers and front-end web developers trying to execute strong typography. Below is a work-in-progress collection of known best practices, tips, and techniques specifically for web typography that many web designers and front-end designers have come to embrace over the years.

Tip & Tricks:

Measure: Limit the Number of Characters Per Line

To limit the number of characters per line, consider adding an em-based (relative) max-width to your most commonly used text elements, such as your paragraphs and headings.

Use max-width to control horizontal measure

See the Pen Horizontal Measure with Max-width (limit the number of characters per line) by kccnma (@kccnma) on CodePen.dark

p { max-width: 30em; }

Widows: Fix the Known Instances

To fix and avoid widows, consider replacing the spaces in between the last couple of words to non-breaking spaces ( ).

<p>Place non-breaking spaces between the last couple of words.</p>

Resize your Text Responsively

To provide an equally enjoyable reading experience on small devices and larger screens, consider resizing your typography to be smaller on small screens (since users tend to hold smaller devices closer to their face) and larger on big screens (since users tend to stand farther away from large monitors and displays).

body { font-size: 87.5%; }

@media (min-width: 768px) {
  body { font-size: 100%; } 
}

@media (min-width: 1250px) {
  body { font-size: 112.5%; } 
}

When Using Webfonts, Avoid Faux Bold & Italic

When using web fonts, be sure to include all weights and styles for each typeface. For example, look closely at your bold and italics to ensure that the correct font is being used. This is important to avoid the browser rendering faux bold and faux italics.

Exercises:

Try using a typographic scale for your headings and paragraphs

See the Pen Typographic Hierarchy by John Doe (@johndoenma) on CodePen.0

Try to design a bespoke type specimen by starting with nothing but unstyled HTML Markup

See the Pen Typography Specimen Test – Incomplete by kccnma (@kccnma) on CodePen.0

Note how the browser ignores line breaks.

Here’s an example of a bespoke type specimen

See the Pen Typography Specimen Test – Example #1 by kccnma (@kccnma) on CodePen.0

Note the use of Google Fonts.

Experiment with different font pairings by doing a coded type studies

See the Pen Type Pairing Test by kccnma (@kccnma) on CodePen.0

See the Pen Type Study: Google Font Pairings by kccnma (@kccnma) on CodePen.0

See the Pen Type Set Test by kccnma (@kccnma) on CodePen.0