The A List Apart Blog Presents:

Magic Numbers and Progressive Enhancement

by Tim BrownApril 30, 2013August 12, 2019

Published in Uncategorized

Article Continues Below

Chris Coyier explains Magic Numbers:

Magic numbers in CSS refer to values which “work” under some circumstances but are frail and prone to break when those circumstances change. They are usually always related to fonts.

Many good examples in that post, and in the comments, but the one that stood out for me was Chris’ attempt to flank a heading with horizontal lines:

In a recent post Line-On-Sides Headers, I used a line-height value that was a magic number. Let’s say you used the technique around text with a fancy @font-face font. Let’s say that font doesn’t load or the user overrides it or the page is being viewed in a browser that don’t support @font-face. The fallback font will load, and that fallback font might have drastically different sizing than the custom font. The lines on the outside of the fallback font are now awkwardly placed, not centered like we wanted.

Of course, I don’t need to tell Chris (he was only trying to illustrate a technique and its shortcomings), but it bears mentioning whenever I get the chance: progressive enhancement is part of typography now. First, style text in a generic way (like, without flanking horizontal lines). Then, if the fonts you intend are active, use WebFont Loader (or Typekit font events) to follow up with rules that depend on the presence (and the dimensions) of those fonts.

No Comments

Got something to say?

We have turned off comments, but you can see what folks had to say before we did so.

More from ALA

Design for Amiability: Lessons from Vienna

by Mark Bernstein

Computing was born in a Viennese café. Between 1928 and 1934, while Hitler plotted and Europe crumbled, a motley crew of mathematicians, philosophers, architects, and economists gathered weekly to puzzle out the limits of reason—and invented Computer Science in the process. What made their collaboration possible wasn't just brilliance (though they had plenty). It was amiability: the careful design of a social space where difficult people could disagree without destroying each other. Longtime A List Apart contributing author Mark Bernstein mines this forgotten history for lessons that might just save today's embattled web from its worst impulses. Spoiler: it involves better coffee service and the looming threat of public humiliation.

Design Dialects: Breaking the Rules, Not the System

by Michel Ferreira

Design systems aren't component libraries—they’re living languages. Rigid adherence to visual rules creates brittle systems that break under contextual pressure. Fluent systems bend without breaking.

An Holistic Framework for Shared Design Leadership

by Michel Ferreira

Having both a Design Manager and a Lead Designer on the same team is beautiful, but can be messy. To make it work without creating confusion, overlap, or “too many cooks,” check Michel Ferreira’s Holistic Framework for Shared Design Leadership.

From Beta to Bedrock: Build Products that Stick.

by Liam Nugent

Building towards bedrock means sacrificing some short-term growth potential in favour of long-term stability. But the payoff is worth it: products built with a focus on bedrock will outlast and outperform their competitors, and deliver sustained value to users over time. Liam Nugent shows us how.

User Research Is Storytelling

by Gerry Duffy

At a time when budgets for user experience research seem to have reached an all-time low, how do we get stakeholders and executives alike invested in this crucial discipline? Gerry Duffy walks us through how the research we conduct is much like telling a compelling story, complete with a three-act narrative structure, character development, and conflict resolution—with a happy ending for researchers and stakeholders alike.

Like this:

No Comments

Got something to say?

More from ALA

Discover more from A List Apart