Fonts

The ability to customize fonts— in Mac OS, in word processing documents, in Web pages— is really nothing new. However, when it comes to changing fonts on Web pages, the mechanism is decidedly less intuitive and certainly less than easy. Having to litter a Web page with FONT FACE tags makes for larger files, and larger headaches as you weed through these tags to find that one misspelled word. CSS makes the process of selecting a font easy, and even better, it provides a fallback mechanism for those times when users don'’t have the fonts you wanted to appear.

Apple Inc. (2006). Design>Web Design>Typography>CSS

Power To The People: Relative Font Sizes

Relative font sizes may make websites more accessible — but they’re not much help unless the person using the site can find a way to actually change text size. Return control to your audience using this simple, drop-in solution.

Mihelac, Bojan. List Apart, A (2004). Design>Web Design>Typography>CSS

Text Sizing

Being unhappy with the current wisdom and distrustful of our browsers, I wanted to have the font sizing options laid out so I could see where they did and didn't work. So I made 264 screenshots. This collection is posted for anyone else who is unhappy and distrustful.

Noodle Incident, The (2002). Design>Web Design>Typography>CSS

Toward a Standard Font Size Interval System

This document discusses the strengths and weaknesses of various deployed and recommended methods of specifying font sizes in Web documents and application interfaces, and proposes a harmonization. This scheme will enhance the legibility, clarity, and aesthetics of documents presented on screen, and help retire less elegant alternatives that are hurtful to the Web as a dynamic information resource - one that is accessible to users with widely varying needs and purposes. It is intended for Web browser and stylesheet implementors of all religions, but may be of interest to Web authors and digital typography and/or CSS enthusiasts at large.

Fahrner, Todd. Cleverchimp (1999). Design>Web Design>Typography>CSS

The Trouble With Em 'n En

More than you ever wanted to know about dashes, spaces, curly quotes, and other vagaries of online typography. HTML specs, grammatical rules, browser bugs and character encoding—it’s all here.

Sheering, Peter K. List Apart, A (2001). Design>Web Design>CSS>Typography

Typography Matters

It's a style thing. It's a usability thing. It's a tricky thing for large content sites and a step up for independents. It's typographically correct punctuation on the web, and ALA's associate editor makes the case for it.

Kissane, Erin. List Apart, A (2001). Design>Typography>CSS>Web Design

Seven Tips for Replacing the Font Tag

Replacing font tags with semantic code and CSS isn’t as terribly difficult as it might seem at the outset. To help you along your way, here are a few tips on how to tackle the project.

Glazebrook, Rob L. CSSnewbie (2008). Articles>Web Design>Typography>CSS

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

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

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

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

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