Happy Cog HOME
Happy Cog HOME News Projects People Thinking Contact us
Colophon: assembly: making web text work harder.

Typography

HAPPY COG’S “NO FRILLS” logo is set in Helvetica Neue 77 Bold Condensed. Button menu text employs Joe Gillespie’s Tenacity Condensed Bold. All other typography is controlled with CSS, in an effort to make the text easy to read.

Font Sizes and Accessibility

Happy Cog uses CSS font size keywords to approximately control the size of body text while allowing you to resize it if you choose. We say “approximately control the size” because CSS keywords do not specify absolute units of measurement such as px or cm. Instead, they’re sized relative to the default font size preference specified in your browser.

At the standard default setting, “medium” is 16px and “small” is 13px. Compare the Happy Cog front page with this one, where the paragraph text size has been fixed at 13px. (The examples will open in new windows.) If your browser is set to the standard 16px/96ppi default, the two pages should look identical. If not, that’s okay too.

Non-compliant browsers make a hash of CSS keywords, so sizes are omitted from the linked style sheet that all “CSS-capable” browsers (including 4.0 browsers) can see. Keyword size values are only specified in a separate, imported style sheet. Since 4.0 browsers don’t understand the @import rule, they ignore the sizes they would otherwise bungle, and display the body text at the user’s default size (typically 16px for Windows and 12px for Macintosh).

IE5/Windows understands @import but gets font size keywords wrong, so the imported style sheet uses a CSS2 selector that IE5/Win doesn’t understand to trick that browser into displaying the correct value. Design geeks, see Tantek Çelik’s Box Model Hack and Todd Fahrner’s “Size Matters” for details. (The only distinction between our method and Todd’s is that we haven’t set any size for 4.0 browsers.)

If you’re thinking we’ve gone to some lengths to make our text legible, accessible, and attractive, we won’t argue. But the way we see it, making web text easier to read is a good thing. We encourage web designers who care about accessibility to use and adapt these techniques.

For more on text sizes and accessibility, see Zeldman.com’s Heartbreak of Small Ems and Jakob Nielsen Joins Fight and A List Apart’s “Size Matters” and “Fear of Style Sheets 4.” A List Apart and Zeldman.com are Happy Cog productions.

More thinking

See Articles, Publications, and Books for more of Happy Cog’s thinking about the web.