Setting Web Type to a Baseline Grid

This article covers the basics of baseline grids—defined grid areas within which content is placed—and how they can be applied effectively to the web medium. In print, baseline grids are almost mandatory. They ensure the bottom of each line of text—its baseline—aligns with a vertical grid, akin to writing on a ruled piece of paper. With books, this means text is always in the same position on the page. This ensures the gaps between lines of text aren’t “filled” with content showing through from the reverse of any page, thereby making the text easier to read. This advantage isn’t relevant for Web design, but the other major advantage—maintaining a vertical rhythm—is.

Grannell, Craig. Opera (2008). Articles>Web Design>Typography>CSS

Fonts for Web Design: A Primer

Modern CSS provides web designers with an unprecedented level of control over online typography. Restrictions are still imposed however by the limited number of “common” fonts—those typefaces that are generally available cross-platform. This article looks at the fonts web designers have available to them, and also considers their suitability for various tasks.

Grannell, Craig. Opera (2008). Articles>Web Design>Typography

Knowing About Web Safe Fonts

What are Web safe fonts? Practically every personal computer has a set of fonts installed. These fonts are usually put there by the computer manufacturer or are the default sets of fonts for the operating system that computer is using. It's possible to install additional fonts on your own. However, not all font sets are created equal. Different computers can have very different sets of fonts installed, and most casual computer users never know the difference.

Rodriguez, David. Web Page Design for Designers (2008). Design>Web Design>Typography

Don't Be Afraid of Serif Fonts

As the practice of Web design ages, some common rules and "best practices" inevitably embed themselves in the craft. Among these are the processes for using specific types of semantics when coding your site, like using divs as hooks in your X/HTML for your CSS, and making your page beautiful and functional that way. Another is to ensure readability of your site by choosing a proper number of fonts (generally, no more than three or four, and for the minimalist, one or two).

Rodriguez, David. Web Page Design for Designers (2008). Design>Web Design>Typography>Fonts

Simple CSS: Creating More Readable Text

Typography is an important part of Web design. Just like in the print world, your content needs to be readable to your viewers for it to be of any use. As a general rule, you want to make sure your Web site provides as little resistance as possible to the user, and the easier your site is to read, the better. CSS provides three very useful properties to enhance the readability of your site: font , line-height , and letter-spacing.

Rodriguez, David. Web Page Design for Designers (2008). Design>Web Design>Typography>CSS

CSS Link Styles

One of the easiest, yet most interactive, elements you can add to your Web site is dynamic link text—links that change their appearance once the user puts their cursor over them.

Jason, Chris. ChrisJason.com (2006). Articles>Web Design>CSS>Typography

sIFR 2.0: Rich Accessible Typography for the Masses

Over the last several months, a small group of web developers and designers have been hard at work perfecting a method to insert rich typography into web pages without sacrificing accessibility, search engine friendliness, or markup semantics. The method, dubbed sIFR (or Scalable Inman Flash Replacement), is the result of many hundreds of hours of designing, scripting, testing, and debugging.

Davidson, Mike. Mike Industries (2008). Articles>Web Design>Typography>Standards

Text/Typographical Layout

The default setting in browsers is to align text to the left. Text can also be aligned to the right, in the center, or justified (aligned on both the left and the right sides). Although some people like the look of justified text, studies have routinely shown that left-aligned text is the easiest to read. Some Asian and Middle Eastern languages are notable exceptions to this rule, since the normal text direction in these languages may be vertical from top to bottom or horizontal from right to left. For English and other left-top-right languages, the best practice is to align text on the left.

WebAIM (2005). Articles>Web Design>Typography>CSS

When Legibility, Readability and Usability Intersect, Then We Reach Our Target Audience

If we want to reach our target audiences when presenting text-based information, we as content specialists (designers, programmers, writers, and project managers) need to constantly consider usability. We must move crucial concepts of legibility, readability, and usability to the forefront of our design practices else we will unquestionably lose our audience.

Webb, Suzanne. Content Matters (2006). Articles>Web Design>Typography>Usability

On Scalable Text

In order to provide scalable text, make textual information text (rather than images), and use relative text sizes (rather than absolute). Scalable text is important for people with low vision. The basics of providing scalable text are very simple. However, strict design requests can pose challenges.

Henry, Shawn Lawton. UI Access (2002). Articles>Web Design>Accessibility>Typography

Why Readability Testing is not Enough

he recent press coverage of the Bath University research paper "Readability Assessment of British Internet Information Resources on Diabetes Mellitus Targeting Laypersons" has raised interesting questions about some of the methodologies used to measure users' experience on the web. On the face of it, the conclusion and the methodology used is fine, but due to the indiscriminate nature of automated testing tools, it doesn’t present the entire picture and, at worst, can give the impression that the users of these websites can’t understand the content at all, which may not be the case.

Goddard, Matthew. Usability News (2004). Articles>Web Design>Typography>Usability

Reading on the Web

People rarely read web pages word by word; instead, they scan the page, picking out individual words and sentences. In a study John Morkes and Jakob Nielsen found that 79 percent of test users always scanned any new page they came across; only 16 percent read word-by-word.

Nielsen, Jakob. Alertbox (1997). Articles>Web Design>Typography>Usability

Optimal Line Length

What can we conclude when users are reading prose text from monitors? Users tend to read faster if the line lengths are longer (up to 10 inches). If the line lengths are too short (2.5 inches or less) it may impede rapid reading. Finally, users tend to prefer lines that are moderately long (4 to 5 inches).

Bailey, Robert. Human Factors International (2002). Articles>Web Design>Typography

To Hell with Web Safe Fonts

Get creative. Expand your font choice. Mix fonts. Use weights, font-styles, small-caps. Mind variations in size and legibility.

Schoors, Lennart. SlideShare (2009). Presentations>Web Design>Typography>Fonts

Increase Your Font Stacks With Font Matrix

I have put together a matrix of (western) fonts showing which are installed with Mac and Windows operating systems, which are installed with various versions of Microsoft Office, and which are installed with Adobe Creative Suite. The idea of the matrix is that use can use it to help construct your font stack.

Rutter, Richard. Twenty-Four Ways to Impress Your Friends (2007). Articles>Web Design>Typography>Fonts

Linux Font Equivalents to Popular Web Typefaces

While the list of Web safe fonts we have come to know and love is relied heavily upon, it can be very beneficial to include similar default Linux fonts in your font-family as well.

Monday By Noon (2007). Articles>Web Design>Typography>Linux

Five Simple Ways to Improve Web Typography

Type is one of the most-used elements of the web. Think about it. Unless you are YouTube or Flickr, chances are your site visitors are coming for your text content - not the fancy packaging that surrounds it. So why are web designers still treating text like a secondary element?

Wagner, Mindy. Webdesigner Depot (2009). Design>Web Design>Typography

101 Examples of Text Treatments on the Web

Typography is often a deciding factor in the success of a design. Its importance cannot be overstated. Effective typography can be achieved in so many different ways, as demonstrated in the 17 different categories below. Some of the most common ways to treat type is with size, color variation, creative illustrations, and use of textures. The examples below are just the tip of the iceberg as far as the possibilities for type.

Webdesigner Depot (2009). Design>Web Design>Typography

Common Fonts to All Versions of Windows and Macintosh

If you want to know how the fonts are displayed in other OS's or browsers than yours, after the table you can find several screen shots of this page in different systems and browsers. Also, you can take a look to the list of the default fonts included with each version of Windows.

Ampsoft (2007). Design>Typography>Web Design

Web Design For Dyslexia

People with dyslexia frequently experience discomfort when reading because they find it more difficult to ‘decode’ the words on the page, and can also find it difficult to remain focussed on a particular piece of text. Some people may also have to concentrate more to remember what they have already read, which means they will tire more easily.

Hobo (2008). Design>Web Design>Accessibility>Typography

Beautiful Fonts with @font-face

While Firefox 3.0 improved typographic rendering by introducing support for kerning, ligatures, and multiple weights along with support for rendering complex scripts, authors are still limited to using commonly available fonts in their designs. Firefox 3.5 removes this restriction by introducing support for the CSS @font-face rule, a way of linking to TrueType and OpenType fonts just as code and images are linked to today. Using @font-face for font linking is relatively straightforward. Within a stylesheet, each @font-face rule defines a family name to be used, the font resource to be loaded, and the style characteristics of a given face such as whether it’s bold or italic. Firefox 3.5 only downloads the fonts as needed, so a stylesheet can list a whole set of fonts of which only a select few will actually be used.

Daggett, John. Mozilla.org (2009). Articles>Web Design>Typography>CSS

Font in your Face

So, you are a web designer going about your daily life, struggling with IE 6, huffing about CSS 3/HTML 5, berating your designers for not using web-safe fonts, and there comes a brick hurling towards you named @font-face. You are dumbstruck. You have no idea what hit you. Everyone is asking about it, and you pretend to know about it. Then you quickly google for it and are hit with even more bricks. I was one such web designer and I spent 4 days in agony, learning about @font-face. I wrote this down, so that no other web designer has to face this torture anymore. So here is the “A to Z” of what @font-face means now and what it will mean for the future of web design.

Manian, Divya. Nimbupani Designs (2009). Articles>Web Design>Typography>CSS

Typographic Design Patterns and Best Practices

To find typographic design patterns that are common in modern Web design and to resolve some common typographic issues, we conducted extensive research on 50 popular websites on which typography matters more than usual (or at least should matter more than usual). We’ve chosen popular newspapers, magazines and blogs as well as various typography-related websites. We’ve carefully analyzed their typography and style sheets and searched for similarities and differences.

Martin, Michael. Smashing (2009). Articles>Web Design>Typography>Assessment

Guide to CSS Font Stacks: Techniques and Resources

CSS Font stacks are one of those things that elude a lot of designers. Many stick to the basic stacks Dreamweaver auto-recommends or go even more basic by just specifying a single web-safe font. But doing either of those things means you’re missing out on some great typography options. Font stacks can make it possible to show at least some of your visitors your site’s typography exactly the way you intend without showing everyone else a default font. Read on for more information on using and creating effective font stacks with CSS.

Chapman, Cameron. Smashing (2009). Articles>Web Design>Typography>CSS

Better CSS Font Stacks

You want to use Gill Sans? Go right ahead. Nothing should stop you. Font stacks are prioritized lists of fonts, defined in the CSS font-family attribute, that the browser will cycle through until it finds a font that is installed on the user’s system. This means that you can use Gill Sans, and if your users don’t have it, you can give them an adequate substitute that will not diminish their experience.

Ford, Nathan. Unit Verse (2008). Articles>Web Design>Typography>CSS