with 3 Comments

Typography is an important part of web design as it is for graphic and interactive designs. I can say that without it, your designs won’t be effective and accurate. Today I’m going to start with writing about TYPOGRAPHY for WEB. In the following days I will write about it for print and digital designs.

Its impact on the overall design of the website can’t be stressed enough. To create harmonious and readable pages, designers should pay attention to two main factors — font size and space. By changing these variables, you can create an engaging experience for the reader.

However you have to also pay attention to how typefaces are going to look on various devices. By keeping aesthetics and functionality of the typefaces in mind, web pages can be designed to draw in a customer to read the content. Let us dive deeper into the factors that influence typography and learn some tips and tricks to make your content more readable and engaging.

Additionally I strongly advise you to take a look at anatomy of typography and differences between a font and typeface.

1. Font Size

As designers, you have to know the appropriate font sizes when designing to multiple screens. Typefaces that work on desktops need not necessarily work on mobile devices. For example, font sizes on a desktop vary anywhere between 11pt-14pts. When the same size is used on mobile screens, it will appear too big or small. For mobile screens, typefaces should be readable when held at a natural distance. So knowing the right/appropriate font sizes will help create a better reading experience for the user. For body text, font sizes fall anywhere between 14-16px while secondary or less important fonts can be anywhere between 13px-14px. It is advised to view your typographic choices on the actual device before committing to a standard. This will help you communicate your message with clarity.

2. Measuring Units

For font sizes for mobile devices, ems is considered to be the basic standard. Designers are able to easily scale the sizes of the typefaces because it is based on percentages.

3. Use Minimum Fonts

Using more than 3 different fonts makes a website look unstructured and unprofessional. Keep in mind that too many type sizes and styles at once can also wreck any layout.

In general, limit the number of font families to a minimum (two is plenty, one is often sufficient) and stick to the same ones through the entire website. If you do use more than one font, ensure the font families complement each other based on their character width. Take the example of fonts combinations below. The combination of Georgia and Verdana (left) share similar values that creates a harmonious pairing. Compare that to the pairing of Baskerville and Impact (right) where the heavy weight of Impact vastly overshadows its serif counterpart.

4. Choose Contrasting Colors

Don’t use the same or similar colours for text and background. The more visible the text, the faster users are able to scan and read it. By placing text on a contrasting background, designers are able to add visual interest to the layout. Contrast can be applied to the heading or sub-heading or in relation to text underneath it. If the background color is dark, you can choose a light colored text that can help make the content more readable.

5. Selecting Fonts

It is important to choose the right font to ensure readability of the content. When choosing a font, it is better to pay attention to the overall legibility more than the style of the typeface. For example, headings and sub-headings are usually used to draw visitors to the content. So it would make sense to use stylized or decorative fonts for this section. The body of the text should be more readable, it is better to set it to a classic style. This will make the reader read through the entirety of the content.

6. Use Standard Fonts

Font embedding services (like Google Web Fonts or Typekit) have a lot of interesting fonts that can give your designs something new, fresh, and unexpected. They’re also super easy to use. Take Google for example:

  1. Choose any font like Open Sans.
  2. Generate the code and paste in your HTML document’s <Head>.
  3. Done!

So what can go wrong? Actually, this approach has one serious problem— users are more familiar with standard fonts and can thus read them faster. Unless your website has a compelling need for a custom font, such as for branding purposes or to create an immersive experience, it’s usually best to stick with the system fonts. The safe bet is to use a system font: Arial, Calibri, Trebuchet, etc. Keep in mind that good typography draws the reader to the content, not to the type itself.

7. Alignment

Readers prefer to read the text in blocks, especially on a small screen. Text on a small screen should be designed such that the words on the line are spaced equally. This will help eliminate rags on either side of the block. Left justified alignment often ends up being the best choice since it leaves no room for inconsistent white spaces.

8. Limit Line Length

Having the right amount of characters on each line is key to the readability of your text. It shouldn’t be your design that dictates the width of your text, it should also be a matter of legibility. Consider this advice on readability and line length from the Baymard Institute: “You should have around 60 characters per line if you want a good reading experience. Having the right amount of characters on each line is key to the readability of your text”. For mobile devices, you should go for 30–40 characters per line. In web design you can achieve an optimal number of characters per line by restricting the width of your text blocks using em or pixels.

9. Leading

When designing for mobile screens, it is better to stick to consistent leading. Leading refers to the space between the lines. Bu tightening the space between lines, you are able to improve the overall readability on a mobile screen.

10. Combining Fonts

Finding the right combination of font size and leading will you create an effective block of text. Experiment with font styles and find the perfect combination that ensures readability and minimizes distortion. Check out font combinations for more about how to combine.

11. White Space Visualization

Use space to enhance the design of web pages. By adjusting the space between lines, letters and graphics and paragraphs, you can create a layout that is easy to grasp and in turn, make it more readable. For example, in the case of CTA (Call-To-Action) buttons, the space that surrounds them makes these specialized buttons and links pop.

12. Screen Width and Typography

Screen widths play an important role when designing to devices. For mobile screens, both vertical and horizontal widths must be taken into account to figure out the best alignment and spacing.

13. Use Unique Font Styles

Headings and sub-headings usually have to draw the crowd in. Use decorative or stylized fonts here. This will make the content more distinguishable. Adding some form of visual interest here will enhance the overall visual experience for the user.

14. Fonts With Distinguishable Letters

Many typefaces make it too easy to confuse similar letterforms, specifically with “i”s and “L”s (as seen in the image below), and poor letter spacing, such as when an “r” and “n” look like an “m”. So when choosing your type, be sure to check your type out in different contexts to make sure it won’t cause an issue for your users.

15. Functionality

Keep the functionality of the application into account when designing for a mobile web page. Set a particular text to execute a certain function – This will help the users distinguish the text from the other elements on the page and perform specific actions, like send a message or make a call.

16. Font Weight

Experiment with font weights to find the perfect font for your screen. If the trend is all about using big, multiple font weights– text it across different resolutions to ensure minimum disruption.

17. Avoid All Caps

All caps text — meaning text with all the letters cap­i­tal­ized — is fine in contexts that don’t involve reading (such as acronyms or logos), but when your message involves reading, don’t force your users to read all caps text. As mentioned by Miles Tinker, in his landmark work, Legibility of Print, all-capital print greatly retards the speed of scanning and reading in comparison with lower-case type.

18. Background

If the background is light, use a darker shade of text color to create the right contrast. For video or for a moving image, try experimenting with color and style. If your page is text heavy, try to minimize the use of interactive elements. If your page involves more hovering, typing, and editing, try to adjust your text and its placement accordingly. Once you’ve made your color choice, it’s absolutely necessary to test it out with real users on most devices. If any of the test show a problem with reading your copy, then you can be sure that your users’ll have exactly the same problem.

19. Pairing Multiple Fonts

Combine multiple fonts when designing text for headings, sub-headings and body text. By doing this, designers can create contrast and emphasis to the content that is being designed. This will not help make it readable but also make the overall reading experience a lot more interesting.

Text being one of the primary ways of communicating, designers often end up devoting their entire careers to type. When choosing and selecting a font, it is important to identify the purpose of your design, as it would have to align with the purpose of your project. We hope that these tips will come in handy the next time you take on a typography project. Check out font pairing guide for designers for more about how to pair multiple fonts.

20. Avoid Using Blinking Text

Content that flashes or flickers can trigger seizures in susceptible individuals. Not only can it cause seizures, but it’s likely to be annoying or distracting for users in general.


It’s important for you to share your thoughts with us about the post you read above. Therefore your comments are always welcome. Plus, if you like what you read above why don’t you sign up to be added to our mailing list and why not be the first to hear our new posts and other surprises 😉



References: Special thanks to Esha Nambiar from Line25 and Nick Babich from UX Planet.


3 Responses

  1. Jeffrey Nadrich
    | Reply

    Can you tell us more about this? I’d want to find out more details.

  2. Pablo
    | Reply

    Great, I really like it! Youre awesome

Leave a Reply

Your email address will not be published.

Pin It on Pinterest