Typography plays a fundamental role in web-projects. However, it often seems to be overlooked. But what is a web typography and how to use it?


Print and web design

Typography is such an important topic because it is part of your visual identity, branding, communication, storytelling and much more.

 The major difference between print design and web design is that print design is fixed content. Reading text on a screen is dynamic, often changing and sometimes on a background. If we read something on a screen, our eyes often jump around, searching for as much information as possible in a minimum of time. 

 The text on websites should be readable on different devices (Desktop, Tablet and Mobile). Due to Statista is more than half of the website traffic worldwide generated by mobile devices. That means that your typography should look good on all devices.


Font measurements for your web project

You should not just choose your typography because you like it, but you should also think about readability. There must be a balance between the text and the elements around it.

According to iHeartMedia, the font measurements are:


Mobile Type:

Mobile Type


Web Type:

Web Type


You can also try out the type tool from Jeremy Church.


The typefaces, we use to design our website, can be categorized under serif, sans-serif and cursive.

    Sans-Serif typefaces

    Sans-serif typo

    Use sans-serif typefaces in headings, subtitles, buttons:

    • Arial
    • Avenir
    • Futura
    • Helvetica
    • Lato
    • Montserrat
    • Open Sans

    Fonts used in larger sizes are also called “Display Fonts”.

    Serif typeface

    Serif typo

    Serif typefaces are easily readable when written in small body sizes and therefore used in body text.  Serif typefaces are popular to use on screens, such as websites and blogs.

    • Garamond
    • Baskerville
    • Palatino
    • Times New Roman
    • Rockwell
    • Allegro

    Large Font families

    Large families like “Roboto” make branding easier if you plan a long-term project because you need to handle different situations like f.ex., writing a Newsletter or Blog, planning a marketing campaign or creating a logo. You can use the variety of the font in using different weight, a condensed version end more.


    • Alegreya
    • Roboto
    • Nunito
    • Merriweather

    If you still don’t know which font you should choose, think about what you want to communicate with your brand. Who is your target audience? Read other articles like Google’s Beginners Guide about choosing web fonts or Canva’s Guide to font pairing.

    I hope you enjoyed reading this article and it could help you choose the right typography for your web project.