6 Web Typography rules every designer should master!
TTypography is everywhere we look. More than 90% of all the web information is in writing. Much of the web is intended for reading: blog posts, emails, social media content, magazines, books, customer reviews, industry reports, and far more.
As text is one of the primary ways designers communicate with users, mastering the fundamentals of typography is essential when you’re at the beginning of your designer career. In this post, we’ll go through six basic guidelines that will help you improve readability of your text content.
👇 Let’s get started!
1. Start by choosing one typeface
Every sentence you read on a screen uses a font, which controls the mood, tone and visual appearance of a layout. Fonts can be serious, funny, friendly, business-like and many more.
Before you do anything, you need to learn your client’s goals and what information you want to convey. For example, if you are designing something for a high-end team of lawyers, your font should be trustworthy and formal, otherwise users will not trust them.
On the web there are mainly two groups of typefaces we work with, Serif and Sans Serif styles.
- Serifs are more traditional, trustworthy and formal. They make long paragraphs more readable. Most traditional publications like newspapers, magazines and books use serif typefaces for body text. Popular serif fonts are Garamond, Libre Baskerville and Playfair Display.
When it comes to the choice of fonts, an essential thing to consider is a context of copy and a potential audience.
- Sans-serifs are informal, cleaner, and more modern than serifs. They’re the preferred choice for web design because they render better on low resolution screens. Popular sans-serif fonts are Roboto, Open Sans, Lato and Montserrat.
If you’re designing a modern website, choose a simple font that doesn’t detract from images. Adjust the type of font to the rest of your design.
You can use standard fonts like Roboto or Open Sans. Visit the Google Fonts website where you can choose font families! The website allows you to filter results by font style, languages, popularity, and weight.
2. Try to avoid mixing typefaces
Using more than two typefaces simultaneously can make your website look unstructured, overloaded with unnecessary distracting details and also lacking a proper mood.
Combining two fonts successfully requires an understanding of the chosen fonts in order to ensure they are complementary. Limit the number of used font families to a minimum and stick to the same ones through the entire website.
👇 Here are some tips:
- Avoid using two fonts of the same classification for the same layout
- Do not use two sans serif, serif, script or display faces together, because this causes low contrast
- Apply different styles, light or bold
- Try to be minimal
- Stick with one font, until you master it!
3. Create hierarchy and contrast
When you’ve defined your typeface, the next step is creating structure by establishing visual hierarchy and highlight key parts of the text, so that users could easily scan and recognize content. Use hierarchy techniques to give a clear sense of text on a website.
👇 Look at this example of type scale:
- Title (H1)
- Subtitles (H2 — H6)
- Main paragraph
- Blockquotes
- Lists
- Links (default, hover, active, pressed state)
- Form input labels
- Small text and captions
One of the best ways to establish hierarchy is using contrast, which helps us define how to navigate through the content. Good type contrast is essential for readability by telling us how to distinguish titles from subtitles, paragraphs from blockquotes and others. We can achieve optimal contrast by regulating typography elements including size, weight, colour and alignment.
4. Give text more space
White space guides our eyes through the layout and creates the feeling of order and elegance. This makes our layout more scannable and it doesn’t overwhelm us with content.
White space, also known as negative space, is the area between elements in a design composition. In case the white space is not balanced, copy will be difficult to read. That’s why negative space matters as much as any other typography element.
To increase the readability of your text, you need good balance between font size and line spacing.
5. Limit the text line length
Another step is limiting line length, which is the horizontal distance of text. Long lines are probably one of the most common problems in website design on the website. Common practice that improves readability is having the right amount of characters per each line.
Long lines of text are difficult to read, straining the user’s eye and causing tiredness. Shorter lines are easier, but if they’re too short, the eye will have to travel back too often, breaking the reader’s rhythm.
Ideally, you should keep your paragraph length between 40–60 characters, but it’s almost impossible to keep it this way when it comes to responsive websites. Just try not to make your text line too short or too long.
6. Learn the basics of typography
Typography cannot be learned in one day. It requires constant studying and persistence. It is a science consisting of many regulations, but designers should never lose their creativity. Find the balance between the rules and unordinary choices. Get interested in typography, and you’ll start to notice more, see more, and be able to do more in your own work. Your design will become better and more appealing.
Look at the projects of other designers and try to understand how they made their decisions. Feel free to explore a few resources that help me improve my design every day:
Do you have your own tips on typography in web design? What are your favorite fonts? Let me know in the comments section below!
