Member-only story
7 web typography rules
Want a flawless-looking website? Start with web typography, the secret to a killer website.
Do you ever feel overwhelmed by the thought of designing a website?
With 100,000 different fonts and 16.8 million colors on the web, the possibilities are virtually limitless.
For some people, your imagination might soar as high as the Burj Khalifa. For others, you might feel so paralyzed, you’d rather binge-watch a season of House of Cards.
If the thought of designing a website is overwhelming to you, you’re not alone.
Together, we’ll go through a step-by-step guide on web typography that will take 10 minutes. If you follow it step by step, you will apply web typography best practices to enable clear communication. You will design a beautiful, comfortable reading experience.
Let’s get started.
1. Select a font
Every sentence you read on a screen uses a font. It controls the mood and visual appearance. Here is a list of the top 7 best flat ui design web fonts.
What are your favorite web fonts?
2. Modify the font size
Traditionally, the web has tortured us with teeny fonts. Research studies show that large font size evokes stronger feelings and convey meaning.
So how do you determine font size?
Start with the body text, change the font size to 15–25px.
Here’s an example of the opening chapter of Harry Potter and the Sorcerer’s Stone. The font is set to Proxima Nova.
On the left, the font size is set to the default of 12px. Such a small font size will strain your eyes. After increasing the font size to 15px, reading Harry Potter is much better.
Doesn’t the 15px font size feel so much better on your eyes?
