7 web typography rules

Want a flawless-looking website? Start with web typography, the secret to a killer website.

Jessica Tiao

Jessica Tiao

Jul 7, 2017 · 4 min read

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.

Image from https://designcode.io/sketch

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.

3. Scale your headings

Headings serve as signposts for readers so that they can quickly digest the overall structure of you articles. Limit yourself to two levels of headings.

4. Set the line-spacing

Sometimes it’s super stressful to read text because there’s a lack of white space to let it breathe.

5. Add tracking and kerning to make the text look more roomy

Tracking affects the space between the characters in a group of text. What should you use? Within Sketch, I eyeballed it by using these two rules:

  • Use more spacing for headlines

6. Add white space between the headers and the body text

Negative space affects how you focus your attention on content. The spacing between the header and the body text should feel open and light, but not tight enough to signal a clear relationship between the elements.

7. Use a line-length of 45–90 characters

Another best practice is to limit the width of a text block.

Conclusion

Even as a design professional, I always consider myself a design student. The most challenging part of working on visual design is recognizing spacing and deciding what to do. I’ve made it a personal goal to focus on this topic and write about it here so that together we can make design decisions without the anxiety.

Published
Categorized as UX