Unit 1: Intro to Design
Unit 2: Figma Fundamentals
Unit 3: The Creative Process
Unit 4: Color Theory
Unit 5: Introduction to Illustrator
Unit 6: Typography
Unit 7: Layout
Unit 8: Typesetting
Unit 9: User Interface Design
Unit 10: Design Systems
1 of 2

Improving Readability with Web Fonts In Responsive Design

Decisions around line length and height can make or break responsive design. In this lesson, we will talk about a few best practices for improving readability on the web across screen sizes.

Letterform Choices

It is important to choose clear and recognizable letterforms. Some typefaces are designed more for aesthetic purposes. If you look closely at the glyph, not every single letter is highly readable. Therefore, it is important to choose typefaces that have very readable letterforms.

There are two considerations when designers assess if a particular typeface has readable letterforms. The first one is distinctive letterform.

In this example, you will see that in some typefaces, such as Cera Pro and Gill Sans, the i and the l are almost identical, making it very hard for people with dyslexia to distinguish them.

Impact and Optima are two typefaces with horizontally-flipped Q and P, which again makes it difficult for some users to distinguish between them.

The second consideration is how open the letterforms are. In some typefaces, the letterforms are more closed off than others, leaving room for confusion. The S in Roboto Condensed is much more closed off than the S in Myriad Pro, which could cause problems in readability for some users.

Body Text Size

Designers often have to choose a text size based on pixels or points when doing mockup in design programs. The more flexible unit rem or em are not available in design programs. They are only available in code or web building tools.

There are a few text size guidelines we can follow.

For mobile screen sizes, it is a good idea to keep body text between 12-16 points. For tablets, 15-19 points is a good starting point for body text. For desktops, 16-20 points are great for body text.

Secondary text like labels or captions should be about 2 sizes smaller than your body text. It is not recommended that you go below 10 points but always check your typography at scale in mobile devices to see if they are too small to read.

Leading or Line Height

For leading or line height, we recommend staying between 125% to 145% of the font size. Never just leave the line height at auto, which is the computer’s best guess of an ideal height. Sometimes, it can be pretty good. Other times, not so much.

Line Length in Responsive Typography

The line length is very crucial to allow the user to move comfortably from one line to the next line.

For desktops, 45-75 characters per line is recommended. You can use an online word counter to check your character counts. Remember, character means letters, not an entire word. It is design convention to never run a line of text from left to right taking up the entire width for desktop design.

For mobile devices, 30 characters per line is recommended. For mobile, as long as you set appropriate margin on the left and right side for the page, which is usually around 20-30 pixels, you can run the text from left to right taking up the entire length because there isn’t too much width to work with like desktop.

Scroll to Top