It is said “Never judge a book by its cover”, but research shows that 50 milliseconds is what it takes for an online user to decide if he should stay on your website on not.

Another research by Stanford that studied web credibility found that 75% of users admitted to making their judgement about a company’s credibility based on their website’s design. Great web typography is the gateway to generating more business enquiries and subsequent conversions.

It goes without saying information must be displayed attractively and effectively. The problem however is, there is a great variety of mobile devices and therefore, typography has to conform to all these platforms.

So how do we make the best use of web typography?

1. Judicious use of fonts ensures that typography is responsive, yet effective

Ever since the Font Face feature was introduced, web designers welcomed the freedom to use various fonts in their designs. This was in stark contrast with the earlier era, when only web-safe colours were used.

With many fonts available at their disposal, designers need to know the right way to use them. Responsive Web Design is being used by most websites and it has set the limits on the play of typography, which is now being designed according to various kinds of devices and respective screen sizes. Hence, web designers need to be cautious when combining multiple fonts in a responsive web design system. Do not use too many typefaces for a website. Rather keep it to a set of three. It will ensure a cleaner and more effective web design. At the same time, avoid using very popular fonts as well, as might not give your page an edge over others.

Case Study: Checkout vox.com. This site combines two Sans-Serif fonts and does so effortlessly. They use Balto for all their headlines, Alright Sans for the body text, apart from Harriet which is interspersed through the site internally. The resulting appearance is clean and elegant.

On the contrary, check out angelfire site. This site contains multiple fonts and looks shabby and unprofessional.

2. Highlight your headlines

Studies in web typography have revealed that a website’s typography makes its headlines stand out. This translates to your web visitors spending more time on your site. To attain this, make use of glyphs and ligatures to give a unique look to your headlines.

Ligatures are letters which appear to be connected together. For example, the letters f and i, which form the first part of the word fish, are joined together as ‘fi’ in a font. You can easily add ligatures through your browser’s font-feature-settings or by working with the “Text Rendering- OptimiseLegibility” features. Firefox already has default ligatures. Use of specific combination of ligatures in specific font types can add beauty and style to your web design. Ligatures can be turned on or off in the Text, Type or Open Type menus of page layout software. The software will ensure automatic insertion of ligatures where the associated letters come together.

Case Study: Check this website and you can easily see how elegant their ligatures look. These beautifully crafted headlines when added to your website would definitely improve its appearance and give your viewers a better user experience.

3. Get your website to talk to its audience through appropriate use of fonts of different size and colours

As evident from the figure above, we need to choose the fonts that can be read and seen clearly on mobile screens as well as desktop screens. The style in which fonts show up on print media are different from how they show up on digital media. We need to understand the font family, style and effect. The specifications for web fonts are given in the CSS specifications by W3C that states Serif, Sans-Serif, Monospace, Fantasy and Cursive are font families.

Secondly, choose the typeface according to your website’s theme or category. This will ensure your web page will speak to your target audience and produce the desired outcome. Serif fonts can also be used to increase the legibility of the text, which further helps to sharpen the impact of the voice. The problem here is that this attribute of Serif works well on high resolution screens, but may lead to undesirable results for lower resolution screens. It is advisable to use artistic fonts for short headlines, while more subdued fonts for the body text.

4. Modulating the measure is important for responsive typography

The line length of a web page must be modulated. Modulation of the measure or line length of a font contributes to responsiveness of the typography. Responsive designs include responsive changes in fonts as per requirements of different screen sizes. Hence, this is a must.

The term “measure” or “line length” has a connection with readability or how people read a piece of text on the web. Increasing or decreasing the line length of the font is one way to generate responsive web typography. The ideal line-length or measure is between 45-75 characters per line per print or web page, inclusive of spaces and punctuations. This can be extended to 45-85 characters per line. This has been derived from researches about the way people read text and their corresponding eye motions. On the basis of this, some experts recommend left-aligned text as suitable for web content as the reading motions of eyes follow a horizontal left to right direction.

Case Study: The website suite restricts the characters per line to just about 75 characters. As you can see, it looks elegant and can keep viewers interested while reading it.

On the other hand, the website gatesnfences has at least 120 characters per line. As a result, it looks distasteful and would dissuade one from reading the contents.

5. Use of different font sizes will improve readability at different distances from the screen. This is a requirement for responsive typography.

Choose the font size that ensures that the font is viewable and readable. This may have to come with compromise on the “ideal measure” which may be a bit difficult for designers. The tricky part is that the “ideal measure” comes with either a reduction of font size or an increase in font size which may make the text unreadable. The bottom line is, the content should be readable comfortably for viewers. Hence, one of the key elements of responsive typography is to ensure that different font sizes are used for different reading distances. There is a method of calculating the font size perceived at different reading distance and size calculators are available to effectuate this.

Case Study: Check out the website moonbase. This is a website, which helps clients design their websites and brand their businesses. The text in the center of the image stands out and conveys the meaning about what the website is all about. We can see it just at a glance. This grabs a user’s attention, and impels then to go through the rest of the website which is written in a standard font size.

6. Responsive typography requires that web browsers be able to support different fonts

When you are designing websites with specific customised fonts, you have to ensure the browser can support loading and display of those fonts. Even if your code is error-free and clear, browser incompatibility issues can counteract your efforts. You must also check if the format in which your font files are saved is compatible with the font you want to use on the web page. Incompatibility issues may affect the loading of your fonts, and hence display of your web pages.

Case Study: We can infer from the above that we need to either use standard fonts or use “font stacks”. The first step is “font testing” to find out if the font is ‘web-safe’ or not. Essentially, a browser looks at each sequence of fonts as first font choice, second font choice, third font choice, and so on. If a browser is unable to find any of the fonts in the sequence, it will revert to a default Serif, Sans Serif, or Monospace, depending on the font classification used.

For instance, a large percentage of operating systems have the font Century Gothic. You could therefore create a font stack that started with Century Gothic as your first font choice, followed by Arial, Helvetica, and finally a Sans-Serif generic classification. In CSS, take note, fonts with multiple words in the title need to be placed in quotes. For example, font-family: “Century Gothic”, Arial, Helvetica, Sans-Serif.

This would tell the browser to first look for the Century Gothic font. Because a large portion of systems have this font, most of your viewers would see the site displayed using Century Gothic. For viewers without Century Gothic, the browser would fall back first to Arial, then Helvetica, and finally to a Sans-Serif alternative.

7. Factors related to physical features of fonts can influence the flexibility of use of fonts for designs

While there is a considerable amount of possibility for flexibility with respect to measure, line spacing, font size and while the variations in these can be made to fit to the layout, responsive typography can be limited by factors which affect the glyphs themselves. These are weight, width, stroke contrast, descent, and optical size. Changes in these parameters can affect the site. There are tools available, which help designers, to overcome these limitations by designing various kinds of font styles through mathematical interpolations between families of fonts within the physical parameters set by them.

Two examples of such tools are Superpolator or FlowType.js. As the screen size reduces, the relative proportional difference between the scales gets enlarged. Hence, there has to be a balance in the size of screen vs. relative scale. Some scales have been devised keeping this in mind, and these can be used for the design of more impactful websites. The proportion refers to the number of times the headline font is larger or smaller than the body text. This is why we need responsive typography. We need typography that will adjust itself to shrink at breakpoints because designers cannot go through the trouble of resetting all their baseline styles for each and every typographic element on their page.

Case Study: Check flowtype. Drag the slider and you will see what responsive typography does, thanks to tools like Superpolator and FlowType.js.

Responsive typography is perfected with practice. With some knowledge on how to use media queries and a set of devices with different screen sizes to test on, you can master this. Now that you are aware of what needs to be done to have the best typography, attract more views, and convert more leads, you can implement the above principles to see them materialize into physical reality.