Designing Principles Behind Responsive Typography

Jul 02, 2014

Change is one of the constant factors when it comes to web design. It is mobile now and not static. This is the reason why responsive web design is the latest buzz. And related to responsive design there is one important aspect of the larger puzzle. It is the use of fonts or typography that adapt to different resolutions, so that they are viewable and the overall layout remain intact.

Instead of using a single font for different mobile site, why not use fonts that can stretch or shrink according to the screen’s requirements. All remaining readable and clean looking without any overlap or other readability issue.

Therefore, to get your typography aptly fit into the layout no matter what the device or screen width happens to be here are some of the important techniques for making typography go responsive.

Make the text flexible

Make the text flexibleBefore resizing text on different screen size, make sure that the text is legible and flexible. And the best way to do is, by using contrast colours and readable font to prevent turning your page’s content into an eye soar. To emphasize the importance of font being readable , it is worth mentioning about W3C that introduced the media query concept called Luminosity media query that allow designers to adjust the style of document to ensure maximum readability of text. Consider the following factors to make your text legible and flexible.

* * *

Select a readable font

Select a readable fontFonts like artistic script fonts are great for small headlines, but when it comes to body type, choose a font that’s easily readable. Usually the choice falls between serif and sans serif. When it comes to screen typography, both these fonts can perform equally well, provided you choose a body text size above 12 pixels. Below 12 pixels serifed typefaces usually don’t render sharply enough. However, if you are using @Font-face, there are hundreds of free font kits available which contains all file types you require in your @Font-Face.

Remember, using too many font type in a page can create a confusing visual layout that makes reading difficult for the users especially users with reading disorders, learning disability or attention deficit disorders.

* * *

Select font colour correctly

Select font colour correctlyLow-contrast font colours lead to text being unreadable. Text is much easier to read when there is adequate contrast between the text and the background. Odd colours and low contrast tend to appear garish and make reading difficult for the users. With contemporary high contrast screen, it is better to choose either a dark grey for text or a light grey for the background, instead of bold black on white. A recent experiment confirms that reading time is lower in case of high contrast between the text and the background.

* * *

Select real text and avoid text within graphics

Text can be transformed into sound with voice synthesizers or can be enlarged with magnification software without compromising on the quality. There is a primary reason as why content in text format is important. Text within graphics cannot be enlarged without some loss of quality.

* * *

Maintain optimum line lengths

Maintain optimum line lengthsMaintaining a proper line length across different devices is tricky. After much of research and development, it seems that somewhere between 50 and 75 characters per line is ideal for line length. To achieve the desired results, look at different screen sizes and figure out what size font you should use to get 50 characters on a line. For a small screen, go below 50 characters per line to maintain a readable font size, but aim for 50 characters. Also set maximum widths for text content area. Determine the width of the content container when there is 75 characters per line. This is possible when you are using monospace font.

With smaller screen you may want to leave the container width out and let the typeface spread across the entire width of the screen. And with larger screens, split your content into multiple columns. Multi-column specifications makes it easy to split your text into multiple column without the need to change the entire layout. Combine this with media queries and make content layout splits into two to three columns for larger screens. This help you to maintain highly legible type size and readable line length.

Make sure that the space between the lines is also resized and stays proportional to any new font size on every resize.It is better to use CSS reset to define styles for your fonts, because different browsers have predefined margins for paragraphs and headings that may interfere with the space you want to define between your lines. The common value for line heights which is easily readable and easy on eyes is a value of 1.4em for body text and 1.2em for headings. A better and convenient way to set line height is by using Unitless values.

* * *

Make body text responsive

Make body text responsiveTo make body text responsive you need to preserve vertical rhythm with optimized line height. The text should scale well on high resolution screens, so that it can be easily resized by the users. These points can be achieved by using proportional and relative sizing units to size your fonts and define the line height. Using em and percentage value is highly beneficial to size text. Using em allow the users to increase the size of the font on a page if they want to. And the percentage value allow you to set the font size for your page’s body and define content size proportional to its value. If you set your body’s font size in percentages, you are actually providing a flexible baseline through which you can size the text up and down.

A good practice is to use a baseline value 62.5% on the body instead of 100%. This is because setting font size on the body to 100% will only set the text size to the browser’s default font size which is 16 pixel. However, Richard Rutter, the author of The Original 62.5% Technique recommended 100% baseline, as it ensures more consistent cross-browser results. To resize the font for smaller screens using media queries, you need to simply resize the body’s font size. As the page’s text is sized proportional to it, the total text will be resized by changing one line of CSS.

CSS viewport unit is also used to resize body text as this method make text become 100% fluid and does not have to depend on a set of media queries to resize. CSS viewport unit resize text and make it fit within the container no matter how or when the width changes.

* * *

Make use of alternate typeface

Make use of alternate typefaceDesigners often overlook a fact that different typefaces may not work well with different screen sizes. But that does not mean that you should avoid using fonts in your responsive design. Instead, you may choose different fonts for various elements in larger or smaller layouts. For instance, designing for desktop computers, you may use font like League Script for the headers, but for smaller display like iPhone, you need to make it so large that it will inevitably dominates the content, or else it will be hard to reset.

To avoid such situation, here you can use League Script for larger displays like iPad and switch to larger version of the body font for smaller displays like iPhone or Smartphones.
Besides every important responsive designing principles, maintaining readability of your text content is a crucial component to create an optimal user experience for your users.

Eric Haskell
v Complain

Recommend this post to others!

Found the post interesting? You might also like:

Become the first to comment

Last Updated : Jul 26, 2017

Rating of post