Improving font readability

- Hello friends! This is Sue Jenkins with Productivity Tips for Web Designers! In this week's lesson, I'll be showing you twelve considerations for improving typographic readability on the web. Since this is the last lesson in this typography tips section, it'll be a little bit longer than the others, as this topic is critical to effective design. In addition to designing web layouts, your role as a web designer includes ensuring that copy on the sites you design is readable and legible. We'll do this by examining twelve key typography considerations.

Let's start with typeface. In print the preference is to choose a serif font for body text, because it's generally considered easier to read. That's because the letter shapes of serif fonts and all their terminals, and ears, spurs and tails, really lead the eye from one letter form to the next, and this helps with reading speed, and it will lessen eye strain. By contrast, on the web, sans serif text that is without the flourishes, is really more popular. So as a rule you can create constrast with typefaces on the web by choosing a serif and a sans serif.

One for your headers and another for your body text, and it doesn't matter which way you do it, as long as it makes sense to your design. In this example, on the left side we have a serif font for the header and a sans serif for the body text. On the right, we have sans serif for the header and serif for the body text. In the best of circumstances, just remember that the typography should really be transparent to the reader, so that they can focus on content and meaning. Your type size depends on the publication type and your audience's demographics.

Certainly, designing a magazine-style website for twenty-somethings would call for one set of fonts, while if you created a site for seniors, maybe a different set of fonts. When you're choosing font type size, never go any smaller than 10 pixels which is roughly eight points or you will run the risk of alienating your readers. It's just too small for the average person to read. Fortunately, large print on the web is currently a very popular trend, so don't be afraid to set your body text at 16 points. Most web designers choose a font size between 13 and 18 points for body text, which is considerably larger than what you're going to see in a typical print publication.

When you're choosing font weights, stick with normal font weights for body text, and reserve any light, bold or condensed weights, if you use them at all, for your headings. Your type style refers to normal and italic fonts which sometimes are called Roman and Oblique. Occasionally, people also include Condensed and Extended font families in this category, but not Bold text. Bold text is treated as a type weight, rather than a style. So, in general, I'd like you to stick with Roman for body text and really reserve Italics, Condensed and Extended fonts styles, for things like headings or for emphasis on smaller blocks of text.

When we speak of typographic hierarchy, we're really referring to using tiered font sizes for your headings, your subheads, your text, your quotes and everything else, to help organize the content into what I call bite-size blocks, that the readers can easily scan for improved readability. It's all about prioritizing information for your readers. Work with size, letter case, type, style, weight and line height to build a meaning visual hierarchy.

A block of text with too wide or too narrow a measure, or line length, can completely disrupt the reader's rhythm. So, in general, the measure is determined by the font size, but unfortunately, there is no one perfect calculation that all designers use, so instead try an equation that's roughly four times the font size, to get the maximum number of characters per line. For instance, if your type is 16 point, your measure can be about 60 to 65 characters long.

While measure is proportional to font size, for improved readability try not to ever go wider than about 70 characters, which is roughly 600 pixels in paragraph widths. Your line height should be proportionate with your line length. The default as you probably already see in Adobe software and most browsers, is 120 percent of the font's size. So if you increase or decrease your line height, you can actually add interest and focus.

Just be aware, that too little can make your text look a little bit cramped, which could cause readers to accidentally skip lines. When the leading is too tight, it really forces the reader to concentrate on the reading, rather than seamlessly comprehending the content. So, when you're choosing an appropriate line height, think about grouping text into readable chunks. Use more leading for longer blocks of text, text with larger x-heights, bold and heavy typefaces, and reversed type.

Paragraph spacing refers to the repetitive breaks of space between paragraphs. Most designers create this space for paragraphs and headings by adding top or bottom padding or margins in the CSS. For best results, use one-half the size of the body text line height for your paragraph spacing. For instance, if your line height is 24 points, you can add 12 points of paragraph spacing, either to the top or the bottom of each paragraph. Of course, use your own best judgement when you're choosing your paragraph spacing, so that the reader can experience the space between each paragraph as a comfortable natural pause.

Letterspacing refers to the tracking or added uniform space between all of the letters in a word or phrase. Only adjust the letterspacing for headlines with display type, which are any large fancy fonts used for headings or advertisements or for specialized uses like when creating a logo or logo type. Tracking the letters out within a word or phrase can add a sense of elegance and improve readability, while tightening the letterspacing typically makes the text more difficult to read.

Roughly 90% of all the text we read is comprised of lowercase letters. The coastline or the outline shape of lowercase lettering, is far easier to read than uppercase, which lacks a variable coastline, therefore, reserve your use of all caps and small caps, for display type and for areas of emphasis within your regular text. When we speak of typographic contrast, we normally think, first, in terms of font pairings, and then in terms of color.

For best contrast and interest, pair serif with sans serif fonts. As for readability color is extremely important on the web. Light colors on dark backgrounds and dark colors on bright backgrounds are both extremely difficult combinations for readers to look at for an extended period of time. However, there needs to be sufficient contrast between the font color and the background so that the average reader can tell the difference between the text and the background. For instance, light grey text on a light grey background may not have enough contrast, especially for visitors with visual impairments like low vision and colorblindness.

When in doubt, try what I call the squint test. If you can't see the text when you're squinting neither will some of your readers. In those cases, please adjust the colors to increase the contrast, and if needed, head over to Webaim.org's free contrast checker, where you can input your text and background colors to find a suitable contrast ratio. The alignment and justification of your text can really affect readability. The normal left-aligned ragged-right text is truly easier to read than justified text because of the clean left edge it creates.

Justified text can be really great for books, newspapers and magazines, but on the web, it often makes horribly awkward gaps between words that disrupt the reader's rhythm. On the web, reserve justified type as well as type with center and right-alignment for special circumstances like headings, subheadings, buttons, banners, and poetry. So now that you have a basic understanding of the twelve considerations for improving typographic readability on the web, I'd like to give you a challenge.

Pause the video for a few minutes, and see how many of the twelve considerations you can find in this sample web layout, that you would correct based on what you just learned, and when you come back, I'll show you how I made some changes to improve the layout! Okay, now that you're back, how do you think you did? Your list might be different than mine, but I'll identify six issues that I found and corrected. Let's start at the top of the list. So first, for the type size, the text on the three buttons, is way too small, so I increased that to 28 points, made it bold and center-aligned it.

Next is hierarchy. Every font in this layout is sans serif, which looks monotonous, so I switched the smaller text in the banner to a serif font. The line length is also way too wide on the banner text, so to correct that, I increased the font size to 36 points, centered it, and changed the color to the same grey as the navigation bar. As for letterspacing, the header text on the banner has way too much of it. The solution is to actually set the letterspacing back to zero and center it. Jumping down to contrast on the list.

That banner text is also way too light for that background. To correct it, I've made the header a darker grey than the background, and the other text the same grey as the background. And the last change is the alignment on the two grey buttons at the very bottom. Centering those, really helps to create a sense of order and balance. As you start to work with these twelve considerations in your own designs, remember, good typography fosters communication while bad typography can impede it, often creating unnecessary barriers to understanding. By making smart typographic decisions, you can help ensure that the content on the websites you design, is both readable and legible.