Topic: Typography & Web Fonts
-
Responsive Typography is a Physical Discipline, But Your Computer Doesn’t Know It (Yet)
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Is there life after Georgia? We ask David Berlow, co-founder of The Font Bureau, Inc, and the first 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
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)
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
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.
