Magic Numbers and Progressive Enhancement – A Listing Aside

Article Continues Under

Chris Coyier explains Magic Numbers:

Magic numbers in CSS check with values which “work” below some circumstances however are frail and inclined to interrupt when these circumstances change. They’re often all the time associated to fonts.

Many good examples in that publish, and within the feedback, however the one which stood out for me was Chris’ try to flank a heading with horizontal traces:

In a current publish Line-On-Sides Headers, I used a line-height worth that was a magic quantity. Let’s say you used the method round textual content with a flowery @font-face font. Let’s say that font doesn’t load or the person overrides it or the web page is being considered in a browser that don’t assist @font-face. The fallback font will load, and that fallback font may need drastically totally different sizing than the customized font. The traces on the surface of the fallback font at the moment are awkwardly positioned, not centered like we needed.

In fact, I don’t want to inform Chris (he was solely making an attempt for instance a method and its shortcomings), however it bears mentioning every time I get the possibility: progressive enhancement is a part of typography now. First, fashion textual content in a generic manner (like, with out flanking horizontal traces). Then, if the fonts you propose are energetic, use WebFont Loader (or Typekit font occasions) to observe up with guidelines that rely upon the presence (and the scale) of these fonts.

Leave a Comment