Web Solutions Blog: The Go-To Guide of Responsive Typography in Website Design

Everything that breaks looks terrible! Typography is a crucial part of web design and as a designer or a developer, it can be frustrating to see the body copy of web pages crumble into pieces when they are accessed through devices of varying sizes.

Fortunately, responsive typography lets your web design adapt to the website’s layout on various devices, ensuring that the design responds to the users’ requirements. Responsive typography adjusts the copy to shrink at breakpoints, maintaining the style and flow of the text and design elements.

A responsive web design requires responsive typography for ensuring better readability across all experiences. Here are three things to consider when working with responsive typography, helping the web copy fulfill its purpose of clear communication.

Responsive Typography Guide

Focus on the Typography Basics

Typography is the visual appearance of text, making it look attractive while enabling readers to engage with the web content.

Choose a typeface (or the font-family) that compliments your theme. For instance, if your website is for kids, use web fonts such as Enchanted Land or DK Crayon Crumble for your header that aligns with your target audience. Use the @import command and a standard link tag to make the web font compatible across all modern browsers.

For instance, using the import tag or the standard link tag, the code can be written as –

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

Every developer has to deal with the pixels (px units), ems, and rems (root em) when writing CSS/SCSS codes. Pixels are fixed-sized units on the screen, while ems are relative to the parent HTML element.

Using rem will enable you to set the size of the text and get the desired output when the browser is re-sized. Rem is supported by all modern browsers and can be used, as shared in the code below.

html{
font-size: 16px; // 1rem = 16px
}
h1{
font-size: 1.9rem // 19px
}
h2{
font-size: 1.8rem // 18px
}

Use the @media command to define various sizes. Remember to set a bigger font size for smaller screens (where the max-width is lower).

@media (max-width: 640px) {
h1 {
font-size:1.7rem
}
h2{
font-size: 1.6rem

It is also crucial to manage the line length or the measure to ensure that the layout looks legible and professional. Aim for an average measure of 45-90 characters (including spaces).

Make the Text Easily Readable

Reading experience differs when you read on a mobile, a tablet, and a desktop. The reader tends to hold the mobile or the tablet closer to him/her owing to the smaller size of the screen and the fonts.

In order to increase the readability, increase the font-size of the text copy as the screen size increases. With the increase in font-size, it is crucial to increase the line-height in order to allow some breathing room between the lines of the body copy.

Choose a readable font face that is legible and accessible, making it easy for the reader to go through the web pages, without straining his/her eyes. Artistic and cursive type of fonts are a good choice for short headlines, however, avoid using them for the body copy, as these type of fonts are not easily comprehensible when the size decreases.

Use the @font-face rule to declare the font-family and provide a fallback font for browsers that cannot read the custom font.

@font-face {
font-family: ‘open_sans’;
src: url(‘opensans-bold-webfont.eot’);
src: url(‘opensans-bold-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘opensans-bold-webfont.woff’) format(‘woff’),
url(‘opensans-bold-webfont.ttf’) format(‘truetype’),
url(‘opensans-bold-webfont.svg#OpenSans’) format(‘svg’);
font-weight: bold;
font-style: normal;
}

Pay attention to the font-color accessibility by offering sufficient contrast between the copy and the background. Use the Web Content Accessibility Guidelines to help you measure the contrast between the colors used, preventing the web page from looking garish and illegible.

In order to create a good balance of the readable elements, use the modular scale that adjusts the font of the body text until you get the desired size.

Avoid mixing text with graphics, as it is tough to enlarge or shrink graphics, making the copy look muddled. Moreover, graphics make the web pages slower and the search engines cannot read them. However, if the web design demands use of text and graphics together, use Scalable Vector Graphics that can solve this issue.

Pay Attention to the Vertical Rhythm

The vertical rhythm is a concept from the print design field, where vertical spaces between the elements are placed in a consistent manner. In web designing, it enables you to gel the individual web elements together, ensuring a harmonious flow of the content. A good vertical rhythm makes the web layout look balanced and guides the readers’ eye through the content.

In order to employ the vertical rhythm, adjust the white space that connects all the elements by setting the line-height.

Though the baseline grid is crucial in applying the vertical rhythm, it’s not always easy to place the text between the baselines. Baseline grids often contain sub-pixels (for instance, 30.6px) which may be treated differently by different browsers, moving the elements off the grid and making it look garish.

Thus, instead of the baseline grid, use the line-height property as a base for the vertical rhythm. For instance, if the line-height of the website body copy is 25px, set the vertical white space between the text elements and the line-height of these elements in multiples of 25px. Consequently, the code will look like –

h1 {
line-height: 50px;
margin: 25px 0;
}
p {
line-height: 25px;
margin: 25px 0;
}

In the above code, notice how the appropriate margin is applied between paragraphs to ensure the vertical rhythm is maintained throughout the copy.

In order to extend the vertical rhythm responsively, with respect to the screen size, use the CSS @media command to load a set of styles when the width increases beyond a certain size.

For instance, in the code below, 750px is the break-point.

@media screen and (min-width : 750px)

Responsive typography is the cornerstone of web designing; however, making the website content responsive involves more than just re-sizing the text container and managing the fonts.

The typography is the most noticeable element of a website, making it a crucial aspect of the web design. The above-mentioned tips will help you appreciate the factors to be considered when creating responsive web typography.

A Showcase of Great Typography Usage in Web Design

Author Bio:

John Siebert is the President and CEO of Tranquil Blue Corp., a web design company in Florida that focuses on all kinds of website design, mobile app development, and search engine marketing.

The post The Go-To Guide of Responsive Typography in Website Design appeared first on SpyreStudios.