Responsive web design is not all about page structure; it is about typography too.

So, what exactly is responsive typography?

… and how does one go about implementing it?

It is all about bringing together text layout, font size and spacing in an elegant way so as to achieve legible text setting with every viewport. The following tips should help in learning how to do so:

Your body text needs to be sized appropriately

Always make use of a scale that will help you understand what font sizes you need to use for which screens. For instance, you can set the size of your base font to 100%. The browser will then display the right font size for the device on which your website would be viewed. A 100% base font would generally mean 16px.

Always consider your user when determining the right size of fonts

The distance between the user and the screen plays an important role when it comes to determining the right font size. While it is fine to have bigger fonts for desktop, for smart phones your font sizes will have to reduce as the users would position their smart phones very close to their faces.

Pay attention to the length of your lines

It is often very uncomfortable to view long lines especially on viewports that shrink or grow indefinitely. It is better to stick to the range between 45 and 75 characters per line. You may even choose to increase your padding progressively.

Make proper adjustments to the Line Spacing

We often tend to neglect leading or line height when we design typography. It is better to avoid unpleasant gaps. You can optimize your line-heights at certain break points.

Use other types of visual variations

You should always see to it that your typography is in harmony with your page layout, whatever scale you may work with. For instance, for a desktop you may make your headings a lot bigger than your body text to enhance clarity. However, oversized headings on mobile screen will only push the body text below making it inconvenient for the users to read the full text at once. Instead you may think of using different variations such as uppercase, bold, italics or small caps to format your subheads for mobile screen. You may use indents and white space in order to separate sections.

Choose your fonts wisely

The fonts you choose should be flexible enough to look good on all kinds of platforms. Don’t use too many fonts. Instead use small caps, multiple weights and various condensed variants. Make sure you test your fonts on every browser and platform.

Make use of a Typetester tool

A Typetester can make it very easy for you to try out various combinations of fonts and font sizes. There are many such tools available and you can choose any depending upon your specifications and budget.

Consider the context when setting your typo

You can use images and white space to help your readers rest their eyes when they are reading your text. You may have to play around with the padding values and width in order to get your layout right. You may have to set your break points by creating some horizontal space to make it comfortable for users to view your content on medium-size screens.

However, if you find it overwhelmingly difficult to manage all the above mentioned things all by yourself, you can get try some popular website builders like – MotoCMS. They have hundreds and thousands of web templates available that meet all the above guidelines. You can go through a few existing designs and find out how to change your type settings to adapt to different viewport sizes.

Categorized in: