A List Apart

Menu

Topic: Typography & Web Fonts

Communicating via typefaces. Fonts and layout. Designing for readers. Legibility. Web Fonts: there’s life after Georgia and Verdana. Using CSS @font-face to embed licensed fonts on your site. Typekit and other solutions. Controlling web typography: size, font, color. CSS methods, browser problems, user problems, and workarounds. Typographically correct punctuation. Unicode. Scaling text.

  • How We Read

    by Jason Santa Maria · Issue 400 ·

    When you read, you filter text through your experiences and past conversations. You put words into context. You interpret. So how can we use typography to welcome readers and convince them to sit with us through this process? A List Apart alum Jason Santa Maria explains in this excerpt from Chapter 1 of On Web Typography, his new book from A Book Apart.

  • Creating Style Guides

    by Susan Robertson · Issue 393 ·

    A style guide, also referred to as a pattern library, is a living document that details the front-end code for all the elements and modules of a website or application. It also documents the site’s visual language, from header styles to color palettes. In short, a proper style guide is a one-stop guide that the entire team can reference when considering site changes and iterations. Susan Robertson shows us how to build and maintain a style guide that helps everyone from product owners and producers to designers and developers keep an ever-changing site on brand and on target.

  • Around the World Wide Web in Eighty Minutes

    by The W3C ·

    London-based web designer Phileas Fogg IV has teamed up with his internationalization friend Jean Passepartout III to explore the world’s typographic conventions...

  • Responsive Typography is a Physical Discipline, But Your Computer Doesn’t Know It (Yet)

    by Nick Sherman ·

    For ideal typography, web designers need to know as much as possible about each user’s reading environment. That may seem obvious, but the act of specifying web typography is currently like ordering slices of pizza without knowing how large the slices are or what toppings they are covered with.

  • The Era of Symbol Fonts

    by Brian Suda · Issue 371 ·

    Welcome to the third epoch in web performance optimization: symbol fonts. Everything from bullets and arrows to feed and social media icons can now be bundled into a single, tiny font file that can be cached and rendered at various sizes without needing multiple images or colors. This has the same caching and file size benefits as a CSS sprite, plus additional benefits we’re only now realizing with high-resolution displays. Discover the advantages and explore the challenges you’ll encounter when using a symbol font.

  • Font Hinting and the Future of Responsive Typography

    by Nick Sherman ·

    Font hinting has been the source of countless headaches for type designers and users. In the meantime, some of the most fundamental and important elements of typography still can’t be addressed with the web of today. Rather than being seen as a tedious chore whose demise will be celebrated, hinting might actually provide the essentials for truly responsive design, and vastly expand the possibilities of digital typography for designers, publishers, and readers.

  • ALA Summer Reading Issue

    by ALA Staff · Issue 356 ·

    Presenting the ALA Summer Reading Issue—our favorite articles from 355 issues of A List Apart. You can also read them all as an epub on your Kindle, iPhone, iPad, Readmill, or other e-book reader.

  • Building Books with CSS3

    by Nellie McKesson · Issue 353 ·

    While historically, it's been difficult at best to create print-quality PDF books from markup alone, CSS3 now brings us the Paged Media Module, which targets print book formatting. "Paged" media exists as finite pages, like books and magazines, rather than as long scrolling stretches of text, like most websites. With a single CSS stylesheet, publishers can take XHTML source content and turn it into a laid-out, print-ready PDF. You can take your XHTML source, bypass desktop page layout software like Adobe InDesign, and package it as an ePub file. It's a lightweight and adaptable workflow, which gets you beautiful books faster. Nellie McKesson, eBook Operations Manager at O'Reilly Media, explains how to build books with CSS3.

  • Say No to Faux Bold

    by Alan Stearns · Issue 350 ·

    Browsers can do terrible things to type. If text is styled as bold or italic and the typeface family does not include a bold or italic font, browsers will compensate by trying to create bold and italic styles themselves. The results are an awkward mimicry of real type design, and can be especially atrocious with web fonts. Adobe's Alan Stearns shares quick tips and techniques to ensure that your @font-face rules match the weight and styles of the fonts, and that you have a @font-face rule for every style your content uses. If you're taking the time to choose a beautiful web font for your site, you owe it to yourself and your users to make certain you're actually using the web font , and only the web font ,  to display your site's content in all its glory.

  • CSS3 Bling in the Real World

    by Chris Mills · Issue 331 ·

    It’s here, it’s queer, get used to it! CSS3 is fun and fabulous, and if we design with progressive enhancement in mind, we can add all kinds of CSS wizardry to our websites and applications without worrying about how things work (or don’t) in old browsers and outdated devices. But what happens if our audience includes folks who use non-Webkit-powered phones? And what if our clients still believe a web page is supposed to look and work the same in every device? Learn to make CSS3 yumminess as cross-browser as possible.

  • More Meaningful Typography

    by Tim Brown · Issue 327 ·

    Designing with modular scales is one way to make more conscious, meaningful choices about measurement on the web. Modular scales work with—not against—responsive design and grids, provide a sensible alternative to basing our compositions on viewport limitations du jour, and help us achieve a visual harmony not found in compositions that use arbitrary, conventional, or easily divisible numbers. Tim Brown shows us how.

  • A Simpler Page

    by Craig Mod · Issue 321 ·

    Want to design a book? There are mountains of beautifully designed examples to inspire you. But what about digital books? How do you create elegantly typeset, gloriously balanced reading experiences when tablets render type differently and support different fonts, text can extend in every direction, and type can change size? Craig Mod (Flipboard, Art Space Tokyo) addresses these questions and presents the initial release of Bibliotype, an HTML baseline typography library for tablet reading.

  • Art Direction and Design

    by Dan Mall · Issue 317 ·

    Sure, your design’s composition is perfectly balanced, the typographical hierarchy works, and the contrast is bang on. But, when you step back and take a look, how does it make you feel? Does your design evoke the right emotion? Dan Mall explains the difference between art direction and design on the web and challenges us to do it again, this time with feeling.

  • The Look That Says Book

    by Richard Fink · Issue 313 ·

    Hyphenation and justification: It’s not just for print any more. Armed with good taste, a special unicode font character called the soft hyphen, and a bit o’ JavaScript jiggery, you can justify and hyphenate web pages with the best of them. Master the zero width space. Use the Hyphenator.js library to bottle fame, brew glory, and put a stopper in death. Create web pages that hyphenate and justify on the fly, even when the layout reflows in response to changes in viewport size.

  • Web Fonts at the Crossing

    by Richard Fink · Issue 307 ·

    Everything you wanted to know about web fonts but were afraid to ask. Richard Fink summarizes the latest news in web fonts, examining formats, rules, licenses, and tools. He creates a checklist for evaluating font hosting and obfuscation services like Typekit; looks at what’s coming down the road (from problems of advanced typography being pursued by the CSS3 Fonts Module group, to the implications of Google-hosted fonts); and wraps it all up with a how-to on making web fonts work today.

  • Web Standards for E-books

    by Joe Clark · Issue 302 ·

    E-books aren't going to replace books. E-books are books, merely with a different form. More and more often, that form is ePub, a format powered by standard XHTML. As such, ePub can benefit from our nearly ten years’ experience building standards-compliant websites. That's great news for publishers and standards-aware web designers. Great news for readers, too. Our favorite genius, Joe Clark, explains the simple why and how.

  • Accent Folding for Auto-Complete

    by Carlos Bueno · Issue 301 ·

    Another generation of technology has passed and Unicode support is almost everywhere. The next step is to write software that is not just "internationalized" but truly multilingual. In this article we will skip through a bit of history and theory, then illustrate a neat hack called accent-folding. Accent-folding has its limitations but it can help make some important yet overlooked user interactions work better.

  • 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.

Topics