Skip to main content

10 commandments of web typography

The right fonts can make or break a web design project. To help you get started, we've sourced the 35 greatest free web fonts (opens in new tab) – but, with all this choice, how do you select the best face for the job?

Whether you're new to web-based type or a seasoned practioner who's short on time, follow these 10 quick steps to make sure you start your projects right every time...

10 commandments of web typography

  1. Read the text. Take notes.
  2. Get a sense of the tone and feeling.
  3. Look for reoccurring words and numbers.
  4. Note sections and subsections in the text. How many levels of headings will you need?
  5. Note other text-based elements you have to set. Are there captions, pullquotes, numerical data, a featured paragraph? Titles in the text you 'll need to italicize?
  6. Start considering appropriate fonts — at the size you plan to use them. They 'll look different as text and headline.
  7. Discard fonts that don 't support the tone of the text, have problems within reoccurring words and numbers, that can 't accomplish what you need it to do. 

  8. Test the remaining fonts cross browser. Don 't build your site only to learn the font doesn't work cross browser.

  9. Attend to "the holy trinity" of good text: size, line-height, line-length.
  10. Use your line length to set the grid if possible. If your site is responsive, consider line length when setting breakpoints.

Mastered these tips? Elliot Jay Stocks reveals how to take your web-based typography to the next level. (opens in new tab)

Words: Laura Franz (opens in new tab)
Image: Greg Goins (opens in new tab)

Liked this? Try these...

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of six full-time members of staff: Editor Kerrie Hughes, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, and Staff Writer Amelia Bamsey, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.