A List Apart


Topic: Typography & Web Fonts

  • On Web Typography

    by Jason Santa Maria · Issue 296 ·

    Until now, chances are that if we dropped text onto a web page in a system font at a reasonable size, it was legible. But with many typefaces about to be freed for use on websites, choosing the right ones to complement a site's design will be far more challenging. Many faces to which we'll soon have access were never meant for screen use, either because they're aesthetically unsuitable or because they're just plain illegible. Jason Santa Maria, a force behind improved type on the web, presents qualities and methods to keep in mind as we venture into the widening world of web type.

  • Real Web Type in Real Web Context

    by Tim Brown · Issue 296 ·

    Web fonts are here. Now that browsers support real fonts in web pages and we can license complete typefaces for such use, it's time to think pragmatically about how to use real fonts in our web projects. Above all, we need to know how our type renders in screens, in web browsers. To that end, Tim Brown has created Web Font Specimen, a handy, free resource web designers and type designers can use to see how typefaces will look on the web.

  • Real Fonts on the Web: An Interview with The Font Bureau’s David Berlow

    by David Berlow, Jeffrey Zeldman · Issue 282 ·

    Is there life after Georgia? We ask David Berlow, co-founder of The Font Bureau, Inc, and the first TrueType type designer, how type designers and web designers can work together to resolve licensing and technology issues that stand between us and real fonts on the web.

  • In Defense of Readers

    by Mandy Brown · Issue 278 ·

    As web designers, we concern ourselves with how users move from page to page, but forget the needs of those whose purpose is to be still. Learn the design techniques that create a mental space for reading. Use typographic signals to help users shift from looking to reading, from skimming along to concentrating. Limit distractions; pay attention to the details that make text readable; and consider chronology by providing transitions for each of the three phases of the online reading experience.

  • The Trouble With EM ’n EN (and Other Shady Characters)

    by Peter K Sheerin · Issue 124 ·

    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, in this famous and much-bookmarked ALA article.

  • How to Size Text in CSS

    by Richard Rutter · Issue 249 ·

    It's a tug-of-war as old as web design. Designers need to control text size and the vertical grid; readers need to be able to resize text. A better best practice for sizing type and controlling line-height is needed; and in this article, Richard Rutter obligingly supplies one.

  • CSS @ Ten: The Next Big Thing

    by Håkon Wium Lie · Issue 244 ·

    Ten years ago, Håkon Wium Lie and Bert Bos gave us typographic control over web pages via CSS. But Verdana and Georgia take us only so far. Now Håkon shows us how to take web design out of the typographic ghetto, by harnessing the power of real TrueType fonts.

  • Setting Type on the Web to a Baseline Grid

    by Wilson Miner · Issue 235 ·

    As web designers, we sometimes may feel we're on a relentless journey to bridge the gap between digital and traditional processes. Wilson Miner brings us one step closer by offering up a way to work with typographic baselines on the web.

  • Reading Design

    by Dean Allen · Issue 128 ·

    With so many specialists working so hard at their craft, why are so many pages so hard to read? Unabashed text enthusiast Dean Allen thinks designers would benefit from approaching their work as being written rather than assembled.

  • Big, Stark & Chunky

    by Joe Clark · Issue 191 ·

    You’ve designed for the screen and made provision for blind, handheld, and PDA browser users. But what about low-vision people? Powered by CSS, “zoom” layouts convert wide, multicolumn web pages into low-vision-friendly, single column designs. Accessibility maven Joe Clark explores the rationale and methods behind zoom layouts. Board the zoom train now!

  • Typography Matters

    by Erin Kissane · Issue 124 ·

    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 Erin Kissane makes the case for it.

  • CSS Design: Size Matters

    by Todd Fahrner · Issue 109 ·

    Everything you think you know about controlling text sizes on the web is either wrong, or else it doesn’t work. In this much-bookmarked ALA classic, UI designer and CSS Todd Fahrner provides a way out of the mess by showing how to make CSS font size keywords work – even in stubborn browsers that get CSS wrong.

  • A Dao of Web Design

    by John Allsopp · Issue 58 ·

    Web designers often bemoan the malleable nature of the web, which seems to defy our efforts at strict control over layout and typography. But maybe the problem is not the web. Maybe the problem is us. John Allsopp looks at web design through the prism of the Tao Te Ching, and decides that designers should let the web be the web.

  • Walking Backwards: Supporting Non-Western Languages on the Web

    by Shoshannah L. Forbes · Issue 65 ·

    And you think you?ve got problems. Try building web sites in a bi-directional language like Hebrew or Arabic. Israeli web developer Shoshannah L. Forbes discusses the mind-boggling hardships involved, and looks at what the latest browsers are doing about it.

  • Elastic Design

    by Patrick Griffiths · Issue 167 ·

    Not quite liquid, yet not fixed-width either, Elastic Design combines the strengths of both. Done well, it can enhance accessibility, exploit neglected monitor and browser capabilities, and freshen your creative juices as a designer. Patrick Griffiths shows how to start.

  • Power To The People: Relative Font Sizes

    by Bojan Mihelac · Issue 176 ·

    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.

  • Dynamic Text Replacement

    by Stewart Rosenberger · Issue 183 ·

    Let your server do the walking! Whether you’re replacing one headline or a thousand, Stewart Rosenberger’s Dynamic Text Replacement automatically swaps XHTML text with an image of that text, consistently displayed in any font you own. The markup is clean, semantic, and accessible. No CSS hacks are required, and you needn’t open Photoshop or any other image editor. Read about it today; use it on personal and commercial web projects tomorrow.