Skip navigation


warning: Creating default object from empty value in /var/www/vhosts/ on line 33.

Few things in life inspire as much obsession as typography and football. So surely designer Rick Banks’ decision to bring them together in his new book Football Type makes perfect sense. It’s a limited edition title which explores some of the weird and wonderful ways in which fonts and footy have intersected down the decades; from Gaudi’s influence on Barcelona’s shirt numbers to Maradona’s famous “10” (and all that it evokes in any still-bitter Englishman.) And with all the proceeds going to The Football Foundation charity, there’s simply no excuse not to make this the next addition to your bookshelf, in whichever of the five different covers you can get your mitts on. Football!

  • F37-football-type235265

    Rick Banks: Football Type

  • F37-football-type235266

    Rick Banks: Football Type

  • F37-football-type235281

    Rick Banks: Football Type

  • F37-football-type235289

    Rick Banks: Football Type

Your rating: None

It was March 2nd, 2011, and I was fifteen-years old. I was in the clouds. My font family, Expletus Sans, had just gone live on the Google Webfonts Directory (now simply called Google Fonts). Plenty of positive feedback and a generous reward from Google had made me expect a lot of it. But it didn’t take very long before I started laughing at the high regard I once had for Expletus Sans, and its silly name. The elegance I once saw in it was soon mixed with a decent dose of clumsiness and amateurism. However, Expletus Sans did provide me with the motivation and opportunity to invest in my skills, and keep designing typefaces.

Your rating: None
Original author: 
Joseph Alessio


In the first installment of this two-part series on type classification, we covered the basics of type classification — the various methods people have used, why they are helpful, and a brief survey of type history, classifying and identifying typefaces along the way. Unfortunately, we only got as far as Roman (traditional serif) typefaces and the early-19th century. Now we’re back for part 2!

Part 2 will primarily cover sans typefaces, with a nod to display typefaces and other less common categories, as well as address a few of the questions people have about whether type classification is helpful and necessary.

If you haven’t read part 1, now’s your chance to go over it. It lays important groundwork for this article, covers the categories of serif typefaces, and contains plenty of useful information about the development of serif type. If you already have read it, here is a quick recap to get us started before we move on to the new material.

type classification


Type Classification Systems

Type has been classified in many ways over the years, both formal and informal — Thibaudeau, Vox, British Standards, etc. None of these are complete or all-encompassing, but they’re helpful as an aid to study as well as for learning to use type correctly and effectively. The material in this two-part series draws heavily from the Vox-ATypI system, which is the most “official” of the systems today, having been adopted by the Association Typographique Internationale in 1962 and still the most commonly referenced system.

Is it perfect? No, but it provides a good overview of what is out there; and when you describe typefaces using the terms you’ll learn in this series, anyone who is reasonably familiar with typography will know what you’re talking about.

Here is a quick overview of the type categories we covered in part 1.


Venetian Typeface Characteristics

  • Notable calligraphic influence, patterned after handwriting.
  • Strongly angled axis or stress.
  • Based on typefaces designed in Renaissance cultural hubs such as Venice.


Oldstyle Typeface Characteristics

  • Less calligraphic influence because type began to be viewed as separate from writing.
  • Named after influential type designers Claude Garamont and Aldus Manutius.
  • Still has a tilted axis but less obvious than in Humanist type.


Transitional Characteristics

  • No calligraphic influence. Designed independently, sometimes on a grid.
  • First appeared in the late-17th century.
  • Virtually vertical axis and high contrast between heavy and thin strokes.


Didone Characteristics

  • Extreme contrast between thick and thin. Rigidly vertical axis.
  • Abrupt, or unbracketed, serifs. Very precisely designed.
  • Named after Firmin Didot and Giambattista Bodoni.

Slab Serif

Slab Serif Characteristics

  • Very heavy weight and low contrast between thick and thin.
  • Unbracketed, prominent serifs.
  • First typefaces created expressly for display purposes.

Sans Serifs

When we left off in part 1, it was circa 1815, with the first appearances of slab serifs, also called Mechanistics or Egyptiennes. By the time slab serifs were being popularized, early sans serifs had already been around for some time in a variety of forms. To follow the progression of sans serifs, we must step back in time a number of years.

History of Sans Serifs

The earliest sans-serif letterforms were, of course, not type, but inscriptions, dating back to as early as the 5th century BC, and enjoyed a resurgence in engraving and inscriptions in the 18th century.

etruscan type
Caslon’s Etruscan type, as seen in a 1766 specimen book. Larger view. (Image source: Typefoundry)

Strangely enough, the first “sans serif” type was created not for the Latin alphabet, but for use in 18th-century academic works on Etruscan culture, which preceded the Roman Empire in the geographical area of modern-day Italy. Circa 1748, the foundry of William Caslon (with whom you should be familiar) cut the first known sans-serif Etruscan type for the Oxford University Press, although there are earlier usages of sans serifs in similar applications.

Embossed Type
Haüy’s type, created to emboss pages so as to be read by touch, was oddly ornate for its purpose. Larger view. (Image source: Camille Sourget)

Another interesting typographic innovation was the work of Valentin Haüy, who founded a school for blind children in 1785. In 1784, a year of preparation during which he devoted himself to educating a single student, Haüy developed an embossing typeface with which to make tactile books. The typeface, which, along with his method, is called the Haüy System, is an early form of sans serif, but it reads more like an upright italic or a disconnected script.

It was first embossed and then often carefully inked over the top so that it could also be read visually, as in the photo above. It looks lovely, but was superseded in both practicality and readability by the system devised by Louis Braille, himself a student at the school Haüy founded.

Caslon Sans
William Caslon IV’s sans serif was categorized as “Two Lines English Egyptian,”. (Image source: typophile)

William Caslon IV — who inherited the type foundry, as well as his name, from four generations back — is credited with the first sans-serif printing type for the Latin alphabet, appearing first in the 1816 Caslon specimen book. It featured only capitals and was marketed as “Two Lines English Egyptian,” the “Two Lines” being a reference to the size of the set type. There was much confusion over this new style, being variously called Egyptian (despite early slab serifs also being marketed as Egyptians), Gothic, Grotesque and Antique, among others.

Figgins Sans Serif
A sans from an early Vincent Figgins type specimen. Larger view. (Image source: Typefoundry)

Eventually Vincent Figgins (whom you may remember as being credited with the first slab-serif type) called the new style “sans serif,” which became the widely accepted term, although you’ll see many of the old terms in use on some typefaces.

Classifying Sans Serifs

At first glance, you might think that sans serifs can’t be classified the way that serifs can, since fewer variables are apparent in the ones we see most often. However, plenty of details can aid specificity when discussing, using and pairing typefaces, even within the broader category of sans serifs or, as Maxmilien Vox termed them, “linéales.” Subcategories were implemented by the British Standards classification, a permutation of Vox’s system, and they provide excellent means of discerning characteristics. I am presenting here a slight variation of those four, with a couple of minor differences for the sake of practicality.


The Grotesque category covers the early sans serifs, specifically those designed in the 19th century and the first decade or two of the 20th. Many of these typefaces had only capitals or exist only in centuries-old specimen books, but a number of them are still quite commonly used. These typefaces tend to be very idiosyncratic, with awkward weight distribution around bowls of characters and irregular curves.

Monotype Grotesque
(Image source: MyFonts)

Monotype Grotesque (above, 1926), based on Berthold’s much earlier Ideal Grotesque (1832), is an excellent example of the quirks commonly evident in Grotesques. Note the awkward “a” and “g,” the squarish bowls, the odd curves and angles at the tips of strokes in the “J” and “S,” and the overall irregularity.

The capital G in a Grotesque is usually spurred, and the British Standards specifies a curled leg on the capital R, although that is not apparent in many typefaces of the period. They tend to display some variation in the thickness of strokes, but the contrast does not show calligraphic influence or a logical pattern. The style became more sophisticated over the course of the 19th century. Perhaps the finest sample of this category appeared in the Berthold Type Foundry’s 1896 release of Akzidenz-Grotesk, which, along with Schelter Grotesk (1886), served as an archetype for many Neo-Grotesques, most notably Neue Haas Grotesk and Univers.


Interestingly enough, it has been postulated that Akzidenz-Grotesk was based on Walbaum or Didot. Despite looking extremely different at first glance, a simple comparison of the basic forms shows that the metrics are very similar.

Examples of the Grotesque category include Franklin Gothic, Monotype Grotesque and Schelter Grotesk.


The Neo-Grotesques, also called Transitionals or Realists, include many of the most commonly used sans. They are based on the later Grotesques and take the design of the sans-serif to a new level with their careful construction and aesthetics. They are much more refined than the Grotesques, during which period type designers were still feeling their way around the new style; thus, the Neo-Grotesques lose many of the awkward curves and idiosyncrasies that are common in earlier sans serifs. You’ll see much less variation in line weight, and most often a single-story “g.”


Created with an emphasis on neutrality and simplicity, they were extraordinarily popular among the Modernists and remain popular today. Despite many claims otherwise, simplicity does not directly translate into legibility: A tight vertical rhythm and pinched apertures keep many Neo-Grotesques (including Helvetica) from being good choices for body text. In fact, in the 2013 edition of the DIN 1450 (the German standards on legibility in typefaces, published by the Deutsches Institut für Normung), Helvetica is used as a negative standard. That’s an entirely different topic, however.

In 1957 — a big year for Neo-Grotesque sans serifs, as Frutiger’s Univers as well as Folio (originally thought to be a stronger competitor, although history has proved otherwise) were released — Haas Foundry released Max Miedinger’s Neue Haas Grotesk, which drew heavily on Schelter and Akzidenz Grotesks. In 1960, Haas, in an effort to market it more effectively, rebranded Neue Haas Grotesk to what we know as one of the most ubiquitous typefaces of all time — you guessed it — Helvetica.

helvetica specimen
Many people love Helvetica so much that they’ll hang prints of vintage Helvetica specimens as decoration. (Image source: etsy)

The quintessential members of this group are, of course, Univers and the immortal Helvetica, which has gone through quite a number of permutations over the years (as have all of these typefaces) and was recently revived by Christian Schwartz as a rerelease of Neue Haas Grotesk. A nice informational minisite was created by Indra Kupferschmid and Nick Sherman for the release. Other typefaces in this category include the DIN 1451 and its derivatives, and Bell Gothic and its successor Bell Centennial.


If you remember the most important quality of Humanist serif type, you’ll be relieved to learn that the same quality carries over to the sans serifs! The primary characteristic of Humanist type, both serif and sans serif, is a strong calligraphic influence, basing its shapes and flow on forms that could originate from a pen or brush. This means a much higher stroke contrast, and some Humanist sans even feature some stress, whereas nearly all other sans serifs have a completely vertical axis.

Another interesting characteristic of Humanist sans serifs is that their proportions often derive largely from Roman inscriptions and early serif typefaces, rather than 19th-century sans serifs as the Neo-Grotesques did. Because of this design process involving older letterforms, the lowercase “a” and “g” are most often two-story in Humanist sans serifs. All of these characteristics combine to make most Humanists a more legible choice than other types of sans faces.

Humanist Sans (Optima)

Hermann Zapf’s Optima is one example that clearly shows the calligraphic heritage, with an unusually obvious difference between thick and thin strokes, while many others in this category have more subtle features. The Humanist sans group includes classics such as Gill Sans and Frutiger as well as more recent releases like Myriad (1991), Trebuchet (1996) and Calibri (2005).


Geometric sans serifs are exactly what their name suggests. Instead of being derived from early Grotesques, like a Neo-Grotesque, or from calligraphic and engraved forms like the Humanist sans, they are built on geometric shapes. The characters often have optically circular bowls and are otherwise typically very rectangular, sharing many components between the various glyphs.

Erbar Grotesk
Erbar’s small x-height, among other factors, renders it difficult to read. Larger view.

Jakob Erbar, whose eponymous typeface is credited as being the first Geometric sans, reportedly based his construction on the circle. Released in the 1920s, Erbar-Grotesk was intended to be legible. Ironically, because of the awkward visual rhythm, resulting from strict adherence to geometric forms, Geometric lineals are among the least legible of sans serifs and are usually suitable only for display type. Geometric sans serifs usually show little or no stroke contrast and usually feature a single-story lowercase “a.”

Geometric Sans

Paul Renner’s Futura, Koch’s Kabel and Lubalin’s Avant Garde are typical examples of the style. H&FJ’s Gotham is also a Geometric sans, although it is less strictly geometric than some and allows for more variation in the heavier weights.

The Rest Of The Story

That’s the basic classification for sans serifs! While the two parts of this series primarily deal with serif and sans type, there are many other styles to consider. The Vox-ATypI system also provides five subcategories of “calligraphics” (i.e. type that is derived from handmade letters), but as they are largely self-explanatory, I won’t dedicate much space in this already lengthy article to them. Here is a brief summary of each category.


Script Metal Type
A case of script metal type. (Image source:

Scripts are, of course, typefaces based on handwriting, particularly formal scripts. The letters often connect, but not necessarily so. They range from the very formal — Matthew Carter’s Snell Roundhand, named after the author of a 1694 booklet on penmanship, originally released in 1966 — to the very casual — Ashley Havinden’s eponymous Ashley Script, from 1955.


Trajan Inscription
Carol Twombly’s Trajan was based on this inscription at the base of Trajan’s Column in Rome.

Glyphic typefaces are those derived from engraved or chiseled letters. Many of these typefaces look like they could be classified as serifs but are based on the work of a chisel, rather than having gone through the traditional design process and referencing the stroke of a pen. As such, Glyphics, also called “incised” typefaces, sometimes contain only capitals, and the serifs tend to be small, as a natural detail of the chiseling process rather than as a design feature. Trajan and Friz Quadrata are excellent examples of this style.


Graphic Wood Type
Graphic wood type from the extensive Hamilton Wood Type collection.

Graphic is essentially a sort of catch-all label for display type that doesn’t fit into any other category. It includes anything that would be drawn or designed, with a brush, pen or any sort of tool. If it’s not exactly a sans, not exactly a serif, and you’re not really sure what it is, it is most likely a Graphic typeface!


Gutenberg Bible
Gutenberg printed with type designed to mimic the late-medieval Fraktur style of handwriting. (Image credits: JMWK)

Blackletter type began with Gutenberg and was used in printing, even printing body text, until the early- to mid-20th century in Germany. It is based on a medieval scribal hand, written with a broad-nib pen, and differs from graphic typefaces and scripts in that it has been used at length in body text. It has a very dense type style. When the traditional style that Gutenberg had used began to give way to the more readable early serifs (the Humanist/Venetian designs of Aldus Manutius and his colleagues), printers called the new style “Whiteletter,” in reference to the negative space-to-ink ratio on the page; thus, the old type was termed Blackletter, and we still use this term today.


Gaelic Type
Gaelic type includes the Latin alphabet as well as some additional glyphs. Larger view. (Image source: mathewstaunton)

Gaelic type is based on the insular script found in manuscripts throughout the UK. As with Blackletter, it has been used in printing body text in Ireland, from its earliest appearances in the 16th century all the way through to the mid-20th century, but is no longer popular as a text typeface. The Vox-ATypI system was amended to include the Gaelic category in 2010 at the ATypI annual conference, appropriately held in Dublin.

Non-Latin Type

Beyond that, there is still another world of type to discover. The entirety of these two articles on the subtleties of type (and, believe me, it can get much more complicated!) have discussed only the Latin alphabet, which, while quite commonly used, is merely one of many writing systems used today. I encourage you to learn more about, and get involved in, the typography of other writing systems! Some are very widespread and used daily by hundreds of millions of people; others are used by mere thousands.

Regardless of how many people use it, each writing system needs quality typefaces. From the commonly used (check out Nadine Chahine’s interview on Arabic type) to the rarely seen (Jean-Baptiste Levée gave a fascinating talk at last year’s TypeCon on creating Air Inuit Sans, supporting Inuktitut glyphs), the typography of non-Latin writing systems promises an exciting future.

Closing Remarks

We’ve barely scratched the surface of the fascinating subject of typography and type history in this two-part series “Making Sense of Type Classification.” Hopefully, it has piqued your interest in this intriguing field. Knowing your way around the typographic resources available to today’s designers is essential, and it is helpful to understand a little behind the characteristics, history, visual character and idiosyncrasies that make each typeface unique and that define how it communicates.

At one point in the history of Web design, an extensive knowledge of type history was unnecessary because a Web or interactive designer was limited to half a dozen typefaces, and those in limited weights and variants.

Today, however, the landscape of Web design is completely different, and the typographic possibilities are endless! Also, while this material is covered in many design schools, a significant portion of designers today haven’t had a formal design education, so now is the best time to catch up!

That being said, we also must remember that, while type classification is an important aid to studying type, it is not a hard and fast system that cannot be questioned. Many typefaces combine characteristics and could easily fit into multiple categories, and no classification system can cover all of the possibilities. In the end, type classification is an excellent means of learning to recognize common patterns and distinguishing characteristics of typefaces, and we get to learn some type history along the way.

With this short series, you’re now equipped with a strong knowledge of categories of type; you’ve learned to analyze typefaces and pick out unique aspects of letterforms; you’ve seen how type has evolved with culture; and, most importantly, you have a solid foundation for further study of typography and type history! It cannot be overstated how immensely important sound knowledge of typography is for anyone in the broad field of design, and the material we’ve covered here will serve you well in navigating the world of type.

(al) (ea)

© Joseph Alessio for Smashing Magazine, 2013.

Your rating: None
Original author: 
Sean Mitchell

Delicate yet solid curves courtesy of Sudtipos, a sturdy serif from FontFont, a cosy type family by FDI, a whiskey & gin inspired face from Hold Fast Foundry, tetragonal splinters from Benoît Bodhuin, a Dieter Rams inspired face by The Northern Block, a minimalist sans from Mostardesign, a dotted typeface by Nina Stössinger, a versatile sans from Hoftype, and a new softened slab by Insigne.

Sudtipos: Esmeralda Pro

Designed by Guille Vizzari

Delicate yet solid curves, serifs and endings give each composition a fine, elegant and exquisite feeling, along with a firm and sturdy look.

FontFont: FF Dora

Designed by Slávka Pauliková

Based on a detailed study of today’s handwriting styles, the main focus was on transforming handwritten shapes into a serif text typeface, not a script face.

FDI: Canapé

Designed by Sebastian Nagel

Based on the idea of letters with a subtly curved and slightly modulated line. Through this, the typeface has a warm and friendly, almost haptical appearance which brings some kind of cosiness to your communication with type.

Hold Fast Foundry: Gin

Designed by Mattox Shuler

Like a brother to the Bourbon family, Gin is distilled from similar letterforms, but condensed less. Inspired by the likes of old serifs and classic bottles of whiskey and gin.

Benoît Bodhuin: Mineral

Designed by Benoît Bodhuin

Fractured into multiple tetragonal splinters, rectangular modules slightly spaced, like quartz and pixels.

The Northern Block: Tabia

Designed by Mariya V. Pigoulevskaya

Inspired by the work and principles of the iconic german industrial designer Dieter Rams, who is closely associated with the consumer product company Braun and the Functionalist school of industrial design.

Mostardesign: Mettro Pro

Designed by Olivier Gourvat

A sans-serif with a technological and minimalist look, it has six versatile weights from Air to Black with an alternative glyph set to improve its use in different graphic contexts.

Nina Stössinger: Sélavy

Designed by Nina Stössinger

A dotted typeface loosely based on the 13 punched-out caps on Marcel Duchamp’s 1934 Green Box.

Hoftype: Qubo

Designed by Dieter Hofrichter

A forcefully drawn monoline face, Qubo is neutral, cool and very versatile.

Insigne: Sancoale Slab Soft

Designed by Jeremy Dooley

Crafted from Sancoale’s simple geometry, new softened slab serifs provide a lively typeface that conveniently enhances its cousins: Sancoale Softened — a sans with blunted terminals; Sancoale Slab; and, certainly, the first Sancoale.

Sponsored by H&FJ.

This Week in Fonts

Your rating: None
Original author: 
Yoshihiko Mano

It’s the nature of the beast that web design is always changing, and one of the many things that designers often lose sleep over is fonts.

Till recently web fonts were usually limited to ones installed on Windows or OSX, but these days you can choose a wide range of fonts available online. This means lots of choice for design but with more choice comes more woe. Which one to pick for which occasion?

Well, let’s put aside difficult decisions for a moment. We want to have a bit of fun with fonts! PingMag has scoured the plains of the world wide web for some funky Japanese fonts that are useful (okay, maybe not so useful!) — but always unique.

Fonts that are almost practical!

Imagine Yokohama fun-japanese-fonts01

This font was created to mark 150 years since Yokohama opened its port to the world and to remake the “Yokohama” brand. The designers researched the images that people associated with Yokohama, and then turned the character you could see in these into a font. The result is a harmony of classic and modern, and rather attractive too. You can write in Roman characters and Hiragana, but the Kanji is limited just to characters used in Yokohama ward names!

Yakitori Font fun-japanese-fonts02Photo by matsuyuki


This is recommended for all budding izakaya owners! You can almost taste the atmosphere just in the lettering. (Personal use okay. Apply for commercial use.)

Yoji Font


Perfect if you’re in need of some nostalgia. Do you remember how your handwriting looked when you were a young child (yoji)? Say three or four years old? Well, with this font adults can recreate that charmingly earnest look on their work documents! It’s Japanese only and, of course, there’s no Kanji. (Personal and commercial use okay.)

Fonts for sentimental train (and other forms of transportation) aficionados

National Rail-esque Font fun-japanese-fonts05Photo by tosimisi


So now you can turn any word into a railway station name! The font resembles the style of characters used in old (i.e. back when JR was still nationalized) railway signage. Actually, it’s not just for nostalgia. The font can also look super modern and smart as well. (Personal and commercial use okay.)

Handwritten Railway Type fun-japanese-fonts07

Okay, this one’s for the real train fanatics among you, recreating the handwritten station name signs as used on Japanese railway lines from a bygone age. The design quality is also still good enough for today. (Personal and commercial use okay.)

National Rail Font: Pictographs fun-japanese-fonts08

This time it’s not words but the pictographs used in stations. Saying that, we’re not totally sure what that onsen (hot spring) symbol is doing there… (Personal and commercial use okay. Requires device with Japanese language input.)

Highway Sign Font fun-japanese-fonts09Photo by Ryo Yamaguchi

fun-japanese-fonts10 If you’re more of a driver then check out this font that looks like lettering on the signs to be found on Japanese highways. Striking and easy to read (since you are in theory driving fast!), this is great for titles. (Personal use okay. Apply for commercial use.)

Ghosts in the digital age?! Yes, it’s horror fonts!

Onryo fun-japanese-fonts11

Do you sometimes want to give your text a scary or ghoulish look? Gothic type just doesn’t cut it, right? Well, you will find Onryo (which means “ghost” or “phantom” in Japanese) a very useful font for those days in the office when you need to cast spells and curses on your work enemies. (Personal use okay. Commercial use also okay but recommended to check with the designer.)

DingTheInsect fun-japanese-fonts12

No scary experience is complete without some creepy-crawlies. For such occasions, reach for this font, which might just send shivers up your spine as you type. (Personal use okay. Commercial use also okay but recommended to check with the designer.)

Pure unadulterated fun!

JoJo Font


For the uninitiated out there, this font is in the style of the cult manga ‘JoJo’s Bizarre Adventure’. Great for adding flourishes of onomatopoeia and the like, transforming dull text into exciting comic book scenes.

Neko Font fun-japanese-fonts14

Who cares about getting meaning across? If you’re crazy about cats (neko), then the felines are all that matter! This font isn’t available as data but you can type what you want on the website, and then get an automated code to display an downloadable image.

And there you have it for now, folks! The wealth of Japanese fonts available online is almost endless if you search around — and we’ve just scratched the surface with this quick intro. Happy hunting!

Okay, so please look out for future PingMag articles written entirely in cats.

Your rating: None
Original author: 
(author unknown)

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.

If someone asked me how many slices of pizza I wanted for lunch, I would probably say it depends on how large the slices are. Then—even if they told me that each slice was one eighth of a whole pie, or that they themselves were ordering two slices, or even that the slices were coming from Joe’s Pizza—any answer I might give would still be based on relative knowledge and inexact assumptions.

Such is the current situation with the physical presentation of responsive typography on the web. The information at a designer’s disposal for responsive design is virtually nonexistent outside the realm of software. Very little knowledge about the physical presentation of content is available to inform the design. The media query features of today can only relay a very fragmented view of the content’s actual presentation, and related terms from CSS are confusing if not downright misleading.

The immeasurable pachyderm

Among all the physical qualities of web typography, the elephant in the room is the issue of size. I’m not talking about em or rem or “reference pixels” ¹ or even device pixels. I’m talking about real, actual, physical, bona fide, measurable, size!

It’s ridiculous that we can send robots to Mars yet it’s still virtually impossible to render a glyph on a web page and say with confidence: “If you measure this glyph on your screen with a ruler, it will be exactly 10 millimeters wide.” Although actual physical size isn’t always the most important factor in web design, in some cases it is critical. For example, consider content for partially-sighted or low-vision readers: the ability to tweak designs according to physical sizes would enable designers to make conscious design decisions with much more sensitivity to how the type is actually being seen. And even where physical sizing is secondary to relative sizing, why shouldn’t we nevertheless be able to factor in physical size when establishing the relationships between different elements?

Physical considerations ≠ print design

I don’t believe web typography should be a screen-based imitation of print typography. One of the greatest benefits of web typography, and web design in general, is that it is flexible, adaptable, fluidly adjustable, without being locked into any one specific configuration. However(!), that doesn’t mean web designers should be forced to design without any means to address the issues of physical presentation. On the contrary, responsive design will not reach its full potential until it allows the ability to respond to the very important physical variables of digital media.

Please pardon the cliché, but when it comes to typography, on screens or otherwise, size matters. Physical size affects optical issues that change how the eye and brain process typographic images. Not surprisingly, typographers and typeface designers have been compensating for optical size-related issues as far back as Gutenberg.

You can’t expect a paragraph of type with the same relative line-height, column width, letter-spacing, and glyph proportions to function just as well on two different displays that have the same number of pixels but completely different physical sizes. It’s great that designers can adjust proportions between typographic elements if the canvas varies in relative size, but any such compensation is still based on guesswork and assumptions about the physical size of that canvas. When people disagree about the size or spacing of type on a website, there’s a very good chance that their opinions are based on completely different physical manifestations of the same content, even if their software and settings are identical.

Resolute resolution, absolute absolution

One of the most crucial factors in the size equation is resolution. And when I say resolution, I don’t just mean “how many pixels is this?”, or even “how many device pixels is this?”, but also “how large are these pixels?”

This is very different from the W3C’s “resolution” media feature in the current draft of the Media Queries Level 4 spec. You will note that the spec refers to resolution in terms of “CSS ‘inches’”—the quotes around “inches” are theirs, implying that they are not actually inches at all.

For an example of why physical resolution matters, imagine you are rendering text on a digital billboard with a physical resolution of one pixel per inch (1 PPI). Now imagine you are rendering the same text on a 200 PPI mobile device display. Even if you knew the actual number of device pixels that would be used to render your type (which itself is difficult to do with confidence these days), you would want to treat the two compositions very differently, both in terms of the typeface as well as typographic layout. The billboard type would likely require less space between letters. The letterforms themselves would benefit from narrower proportions, and could endure a higher ratio between thick and thin strokes. The type might even require different colors to optimize contrast at that size. These are all basics of typography and typeface design.

Unfortunately, in the current landscape of media query features, there is no way to know the difference between 16 device pixels on a crude LED billboard and 16 device pixels on a high-density mobile display. Heck, there isn’t even a reliable way to know if your type is 16 device pixels at all, regardless of how large the pixels are!

Pixels still rule, for better or worse

I know what some em-based enthusiasts might be thinking: “But you shouldn’t be specifying type sizes in pixel units to start with! All type sizes should be spec’d abstractly in relation to each other or a base font size!” However, in the current world of web typography, no matter what unit of measure you use to spec your onscreen type sizes—em, rem, px, pt, in, %, vh, or whatever else—at the end of the line, your specification is being mapped to pixels. Even if you leave the base size of your document to the defaults and specify everything else with em, there is still a base size which all other sizes will ultimately refer to, and it is defined in pixels.

This is because, currently, the only unit of measure that can be rendered onscreen by any operating system with absolute confidence is the lowly pixel. Until we have media query features that allow us to spec for situations like:

@media (physical-resolution: 1device-pixels-per-physical-inch) { … }


@media (device-width: 10physical-centimeters) { … }

… any compensation for physical size is based entirely on rough guesses about the devices our content will be presented on.²

It’s a complete fallacy that the official CSS spec allows so-called “absolute” units of measure like inches, points, and centimeters to be mapped to anything but actual physical units. Ironically, previous versions of CSS treated these things as you would hope and expect, but a change was made “because too much existing content relies on the assumption of 96dpi, and breaking that assumption breaks the content.” Call me idealistic if you will, but I am more of the mind that a spec should be written based on what is best for the future, not to cater to things that were made in the past.³

Getting physical

Any ability to leverage physical variables for web design will require a joint effort by several groups:

  • Device manufacturers will need to provide APIs that can inform the operating system—and, by extension, web browsers and web designers—of the actual physical properties of the hardware being used to present content to the user. Some device APIs are already beginning to show up in the world, but there is a long way to go before functionality and adoption are anywhere near dependable.
  • Standards organizations—the W3C in particular—will need to establish specifications for how to reference physical properties when formatting content. They will need to update (or at least augment) their existing “absolute” units of measure to be more meaningful, so they are more than just multipliers of sizeless pixels.
  • Software manufacturers will need to implement support for new specs relating to physical media features. Browsers are the most obvious software that will need to implement support, but the biggest challenge might be in getting native support for device APIs in operating system software.
  • Type manufacturers and type services will need to provide more diverse ranges of typefaces that have been optimized for a variety of physical properties. Ideally, many of the needed variations could even be provided on the fly using a broader approach to the ideas of font hinting.
  • Web designers and developers, last but not least, will need to build their sites to respond to physical properties, leveraging all variables to the benefit of their users.

Size and resolution are just the tip of the iceberg of physical variables that could be considered when improving web typography. Things like viewing distance, ambient light, display luminance, contrast ratio, black levels, etc., etc., could all be factored in to improve the reading experience. Even the ability to know some variables within the realm of software, like the user’s rendering engine or the presence of subpixel positioning, would go a long way toward helping web typographers design a better reading experience.

In the meantime, I’d love to see more of the players mentioned above start to at least experiment with what’s possible when physical features can be specified, detected, and factored into responsive designs in structured, meaningful, and predictable ways. Until we can do that, we’re all just ordering pizza without knowing exactly what will end up on our plate.

Your rating: None

Robert Bringhurst has issued the latest edition of what Hermann Zapf called the “Typographer’s Bible”. The news will surely be welcomed by his ardent followers, but does the book speak to a modern congregation?

In 1992, when the first edition of The Elements of Typographic Style was published, Bringhurst was already an accomplished poet and translator of poetry — most notably Haida poetry, but also Navajo, Greek, and Arabic — into English. He was also a self-trained and accomplished book designer, and Elements was his attempt to catalogue and summarize the best practices of book typography and design, loosely according to the model provided by the book’s namesake, The Elements of Style by William Strunk and E. B. White.

The book was a huge success. Four subsequent editions were published, labeled (somewhat incongruously, given Bringhurst’s approach to typography) versions 2.0, 3.0, 3.1, and 3.2. Now, on the book’s twentieth anniversary and eight years after the last release, a version 4.0 has appeared.

It’s hard to overstate the reputation Bringhurst and his book have gained in the typographic community. It didn’t hurt that Zapf blurbed the book’s first edition by calling for the book to become the “Typographer’s Bible”. More recently, Hoefler & Frere-Jones have called Elements “the finest book ever written about typography”. It appears on countless syllabi and reading lists, and is one of the “triumvirate” of type books still recommended to beginning typographers and designers, along with Alexander Lawson’s Anatomy of a Typeface (1990) and Walter Tracy’s Letters of Credit (1986).

What accounts for the lasting influence and popularity of Bringhurst’s book? Besides the handsomeness of the book itself — Bringhurst continues to enjoy the support of his publisher, Hartley & Marks, with his standards of book design and production — there are three reasons: the range and depth of his treatment, the quality of his writing, and the confidence and generosity of his tone.

Bringhurst’s scope is wide: the fundamentals and finer points of macro- and micro typography, type anatomy and classification; choosing typefaces and page formats; the use of diacritics and other analphabetic symbols (no doubt his experience as a translator of languages that rely on extensive diacritical support in the Latin alphabet has sensitized him to these matters); annotated lists of designers and foundries; glossaries of glyphs and terminology; and more. Besides distilling centuries of typographic expertise, his treatment of it is remarkably thorough: he doesn’t pretend that his book is an exhaustive account of typography, but his care and attention to detail is obvious (in places even overwhelming). And all of it is supported by well-made illustrations and diagrams. It would be hard to find another writer in English who commands as much knowledge about the use of writing and print to capture language as Bringhurst does, and that he can condense it into 398 pages (in this edition) that many people will read (once more) from half-title to colophon is impressive.

The quality of Bringhurst’s writing allows him to pull this off. Knowledge, experience, judgment, and enthusiasm are not always accompanied by writing skill, and like many academic and quasi-academic fields, typography is not flush with talented prose stylists. But the fact that Bringhurst came to book design and typography from poetry is evident on every page. He is a gifted author used to making every word tell, and his prose is (to borrow Robin Kinross’s description from Modern Typography) “serene and incantatory”. He finds words that capture — more completely than practically any of us can muster — why typography matters. This is most simply and succinctly evident in “first principles”: “Typography exists to honor content.”

Finally, Bringhurst’s writing is a perfect match for his tone. The Elements of Style is actually a poor model for advice and guidance of any sort: Strunk takes an important insight (that writing should be as considered and economical as possible and appropriate) and worries it into dozens of ponderous, crabby, and often questionable commandments. Fortunately the similarities between that book and Bringhurst’s end with the title and the numbered divisions. Even at his most direct, and despite the fact that the book does have the feel and structure of holy writ in places, Bringhurst’s tone is moderate and reflective. His confidence never drifts into arrogance, and his traditionalist roots don’t prevent him from acknowledging that contemporary themes, subjects, and standards call for contemporary type treatments and approaches. Conservative, yes, but conservative in the style of Edmund Burke: you change what you must to preserve what you can.

None of this will be news to most readers here. But all this being said, is the arrival of a fourth edition of Elements something we should celebrate?

Bringhurst has probably taken a book grounded in print typography as far as it can go. But it is, still, grounded in print. It’s hard to believe that a book revised five times in the last twenty years mentions the World Wide Web exactly twice (if you’re willing to accept a mention of “hypertext” for one of them). And don’t look in the index for those passages, because “World Wide Web”, “web”, “webfonts”, “online publishing”, “internet”, “HTML”, and “CSS” don’t appear there. “E-books” does have two entries. “Linotype machine”, by contrast and with apologies to Doug Wilson for saying so, appears twelve times. (“Monotype machine”, in case you wondered, appears four.)

This doesn’t mean Bringhurst’s book is obsolete. After all, there’s no mention of the web in Lawson’s or Tracy’s books, either. Nor will you find any in the books of Jost Hochuli, Willi Kunz, Hans Bosshard, Carl Gerstner, Emil Ruder, Helmut Schmid, Geoffrey Dowding, Nicolette Gray, Daniel Berkeley Updike, Stanley Morison, Beatrice Warde, Jan Tschichold, or Eric Gill. And Giambattista Bodoni didn’t mention the Linotype machine, or even electricity. That doesn’t mean we have nothing to learn from them, that they don’t belong on the bookshelves of an educated typophile. There are principles of good typography that transcend substrates and technologies.

But all these books are products of their times and contexts, and we must read them that way, Bringhurst’s book included. The only new section in version 4.0 of Elements is a two-page examination of metal type (pgs 300–301). “To think about type”, he tells us to introduce the section, “you have to think backwards and forwards at once.” Well, yes — if you’re setting metal type. But virtually all undergraduate designers and typographers presently in school will never do that — in quantity, anyway, if at all. (It’s actually more likely they’ll set wood type.) That’s not to say that it’s a good thing they won’t, or a bad thing, simply that it’s true. So why do we recommend to them as a central text, as so many teachers and type designers do, a book that, for all its qualities, has an easier time thinking backwards?

Of course, students in any field involving typography should read it — must read it — but not first, and certainly not by itself. And not just because it’s grounded in a world of print. Display typography, which surely demands the same care that book typography does, is also nearly completely absent from the text. Even his consideration of type on the screen, smart as it is, is limited to two pages and five paragraphs.

More importantly and generally, though, for all its range and depth, and for all the generosity and precision of its advice, Elements is far better at exploring the meaning of good typography, at describing outcomes, than explaining process. The debates that brought us to what we value in good typography, the questions that remain contested, the actual means of translating principles into practice for students, are not here. And shouldn’t necessarily be. Bringhurst is the unofficial poet of typography, and a great one at that. But what I learn from Robert Frost is the meaning of woodcutting, not necessarily how to fell a tree or stack a cord of firewood.

The book isn’t without practical advice and we are fortunate that it delivers what it does. But unless Bringhurst plans a considerably expanded version 5.0 that focuses as much on web, mobile, and display typography as it does on the world of books, he should let Elements be what it is: a wonderfully written and wise summary of the world of typography as he found it. Surely others inspired by the world his text reveals to us, the beauty of his writing, and the thoughtfulness of his approach, can take it from here.

Your rating: None


Vertical rhythm is clearly an important part of Web design, yet on the subject of baseline, our community seems divided and there is no consensus as to how it fits in — if at all — with our growing and evolving toolkit for designing online.

This may be due to a lack of understanding and appreciation of the benefits that follow from a baseline grid, but it is more likely because baseline is notoriously difficult to get right, and no one yet holds the blueprint to its successful implementation.

Some even argue baseline is redundant online, as typographic terminology and behavior on the Web follow different rules than those used in print, the frustrating discrepancy between line-height and leading being the most obvious example.

For now, however, let’s assume baseline is, to some degree at least, a useful tool for Web designers. What exactly is it, what tools do we have at our disposal in order to execute it, and, crucially, is it worth the hassle?


Vertical Rhythm And Pattern Recognition

Before tackling the mathematical, potentially pixel-nudging implementation of baseline alignment, it’s a good idea to get an understanding of its parent principle: vertical rhythm. By understanding the why of the baseline, we’ll be better equipped and more motivated to come to grips with the sometimes tedious and obsessive how.

Vertical rhythm, in simplest terms, concerns the structural height and spacing of vertically stacked elements, perhaps most commonly the padding, margins and line height. Just like a horizontal grid achieves harmony by restricting the layout to a set of predefined unit sizes, the vertical rhythm (or grid, if you like) solidifies the structure by offering consistent, predictable measures as the user scrolls down the content.

Grids are not only helpful on the horizontal axis, but also on the vertical axis.
Grids are not only helpful on the horizontal axis, but also on the vertical axis.

Why is vertical rhythm important? Well, it has to do with how our mind works and how we use pattern recognition to decipher the world around us. Without going into the subject at length (other people much smarter than me would be more suited to that task), one can say that pattern recognition allows the human brain to store similar or identical impressions (such as primary shapes or colors) in a pattern library and retrieve them for quick analysis of new stimuli. This is the reason why we don’t look at individual letters when reading, but instead recognize whole words at a time (by pulling previous instances of the same pattern from our memory bank). It’s also the reason why we instantly recognize the letters themselves (“A,” “B,” “C,” etc.), even if the font, size and color vary — the basic shapes are stored in our pattern library.

Now it follows that any stimuli that doesn’t match any of your existing pattern records will prompt a new entry in the memory bank, which, in turn, requires more brain processing power — and that’s where the importance of design structure and grids, whether horizontal or vertical, comes in. Imagine a simple layout with a consistent paragraph spacing of X. Having analyzed the first space, your brain will instantly recognize all other identical spaces as part of the same pattern. If, on the other hand, the same layout uses different spacing between each element, the reader’s brain would have to analyze all individual spaces in order to understand their meaning. In other words: the more different shapes there are for the brain to analyze, the longer it’s going to take.

Irregular shapes (left) require more processing power than regular shapes (right).
Irregular shapes (left) require more processing power than regular shapes (right).

As any irregularity in a structure will break the automatic flow of pattern recognition (thus wasting brain activity that could otherwise have been used on good content), a regular, consistent and predictable structure will, naturally, aid the legibility and cognitive interpretation of your design. Establishing a solid baseline grid is a great method to achieve just that.

Furthermore, utilizing a consistent system in which every vertical (and horizontal) space or element derives from a predetermined unit size not only eliminates arbitrary inconsistencies, but also makes the designer’s job easier by basing structural decisions on an overarching framework. Establishing a standard where, for example, headers always have two baselines of white space below them, and the padding of every box always equals three baselines, adds logic to our layouts and makes them easier not only to design, but also to build and, most importantly, digest.

Now, if vertical rhythm seem like an abstract concept, the second benefit of baseline — horizontal alignment across multiple columns — should be easier to grasp. Most commonly seen in print design, particularly magazines and newspapers that frequently use multi-column layouts, the baseline alignment of adjacent paragraphs (or headers) is delightfully calm when done right, and annoyingly disruptive when implemented badly or not at all. The quiet order arriving from horizontal alignment exhibits a visual confidence, an invisible scaffolding that holds everything in place and reassures the readers at a subconscious level. A book with every line on a left hand page aligning with their counterparts on the right simply feels trustworthy; a book where the lines don’t match up at all somewhat less so.

Horizontal baseline alignment across multiple columns.
Horizontal baseline alignment across multiple columns.

The Trouble With line-height

Traditionally, the baseline is the invisible line upon which most letters “sit,” and the distance between each baseline forms the basis of the baseline grid, which, as we just discussed, aids not only the vertical rhythm but also the horizontal alignment of elements in adjacent columns. Having defined a baseline grid, what follows is the forced alignment of all other elements, ensuring that any line of text, any border, any image or boxed element will always match up and adhere to the same vertical structure.

The trouble is that where tools like InDesign let you do this by clicking a button (literally switching the grid on and off) and allow you to easily resize shapes to fit, when it comes to CSS, there’s no other way to do it than meticulous restriction and monitoring of line height, padding, margin, size — anything that may affect the total height of an object.

The traditional baseline is the line upon which most letters sit and from which the total height of elements should derive.
The traditional baseline is the line upon which most letters sit and from which the total height of elements should derive.

To make matters worse, the CSS line-height property doesn’t have an inherent concept of baseline, and each line of text is placed roughly in the middle of the element’s total height. This means that perfectly aligning the actual base of your text (which is to say the baseline) across different styles and fonts requires further manual, time-consuming tweaking and pixel nudging.

So how does one go about implementing CSS baseline? Well, due to the lack of a native baseline syntax, snap-in-place or browser functionality to force vertical alignment, we’re left to experiment. But let’s start with the basics.

The Good: Basic CSS Baseline

To date, at least as far as I’m aware, no consensus on a right way to do CSS baseline has formed. Some people are happy as long as the line height and spacing follow a set of guiding rules, others are more obsessed and meticulous — for better or for worse — and are not satisfied until every line of text sits beautifully on the baseline, and images, borders, boxes and other elements perfectly align to the same grid. The good news for all of us, however, is that basic CSS baseline really isn’t that hard at all. By making a few design decisions up front (and sticking to them), all it takes is a bit of elementary math.

To define your baseline, it’s a good idea to start with the smallest text size you’ll be using, in most cases your body text, and work upwards from there. In my examples below, I’m using 14 pixel font-size on a 22 pixel line-height, which means 22 pixels is my baseline. This definition has the consequence that all line-heights and the total height (including borders, padding and margin) of all elements must be a multiple of 22 pixels, like so:

h1 { 
	font-size: 40px; 
	line-height: 44px;
	margin-bottom: 22px;
p { 
	font-size: 14px; 
	line-height: 22px;
	margin-bottom: 22px; 

Now defining our line-height and font-size in pixels is contentious at best, so in the name of scalability let’s convert them both to ems. Doing so makes the code a little harder to scan, but the math is fairly simple — just remember to recalculate the line-height if you change the font-size!

h1 { 
	font-size: 2.5em; /* = 40px/16px */
	line-height: 1.1em; /* = 44px/40px */
	margin-bottom: 22px; 
p { 
	font-size: 0.875em; /* 16px is the default em size */
	line-height: 1.5714285714285714em; /* = 22px/14px */
	margin-bottom: 22px; 

Note that I will invariably be referring to font-size and line-height in pixels throughout this article, as this will indicate more clearly the “physical” sizes and proportions in the examples given. All code, however, will stick to ems.

Utilizing a visible grid (many people use a background PNG or GIF, others use tools like Baseliner), we can put this to the test and monitor the alignment of all our styles as we go along. At this point, we may find that the lines of text don’t “sit” on the baseline, but rather float in between the gridlines. That’s nothing to worry about at this stage — we can simply offset our background image or add some arbitrary padding to the top of our body to fix it.

A visible grid can be very helpful during the design process.
A visible grid can be very helpful during the design process.

So far so good, but our code is still extremely basic. What happens when we include more pizzazz — for example a top border — to our elements? Naturally, the numbers have to be adjusted to incorporate the height of the border to ensure that the total height of the object adds up to a multiple of the baseline.

h1 { 
	border-top: 3px; 
	padding-top: 22px; 
	margin-bottom: 19px; /* 22px-3px */ 

Note how the 3 pixel border-top and the 19 pixel margin-bottom adds up to our baseline of 22 pixels.
Note how the 3 pixel border-top and the 19 pixel margin-bottom adds up to our baseline of 22 pixels.

Using Sass or REM

Although it’s not exactly rocket science, getting the numbers to add up when working on complex websites can be a challenge, especially when using relative units. If you’re in a position to sacrifice the scalability of ems and stick to pixels, however, frameworks like Sass can take a some of the sting out of it. With Sass we can define the baseline as a variable ($baseline, in my example) and use simple equations to define multiples of this, making the whole process a lot simpler and the CSS much easier to scan. Should you want to change your baseline halfway through the process, you only have to do it one place. Although my example below concerns Sass, the same principle would apply when using rems — defining the baseline in one place makes it easier to implement across your code.

$baseline: 22px;

.box { 
	padding-top: 3px; 
	height: $baseline*15; 
h1 { 
	font-size: 40px; 
	line-height: $baseline*2; 
	margin-bottom: $baseline; 
p { 
	font-size: 16px; 
	line-height: $baseline; 
	margin-bottom: $baseline; 

Using JavaScript for Images and Complex Layouts

Applying a baseline to a simple typographic layout is, well, rather simple. But we must also ensure other elements, including images, align to the grid. For containers, buttons, dividers, etc., this is a matter of restricting, by means of CSS, any unit to a multiple of the baseline. Images, on the other hand, rarely adhere to this restriction and are often served at a range of arbitrary heights, and in such cases a little bit of JavaScript can make our lives easier. I won’t go into the detail here, but both the jQuery plugin Baseline.js and this article on vertical rhythm by Matthew Wilcox are worth looking into. If you work on more complex layouts, you might want to check out FtColumnflow — a polyfill that “fixes the inadequacies of CSS column layouts.” It’s extensively used on the Financial Times Web app and may well be of use if you’re looking for something a bit more robust.

And that’s it for the basics. By making sure our line heights, paddings, margins, heights — everything — always add up to a multiple of our baseline, we can rest assured the integrity of our vertical rhythm remains unscathed. Simple, right?

Of course, you wouldn’t be reading this article if there wasn’t more to it…

The Bad: Improvising For Variety

The bad news is this. As much as designers thrive in restricted environments, sometimes a 22 pixel baseline can feel more like a frustrating barrier than a helpful constraint. For example, following the golden ratio, a paragraph body size of 16 pixels infers a paragraph header at around 26 pixels (though the below may apply to anything above 20 pixels, depending on the font). Keeping our baseline of 22 pixels, you may find that a single baseline is too tight a line height for comfortable reading, yet a double baseline (44 pixels) is too wide. Of course, arguably this only becomes a problem if the h2 runs onto two lines, and in theory one could get away with assuming the column width was big enough for that never to happen. Ahem. In theory.

h2 at an awkwardly small or large line-height.
h2 at an awkwardly small or large line-height.

If there was such a thing as snap-in-place, this wouldn’t be an issue, as we could simply choose not to apply our baseline to our h2 and watch in wonder as the the following paragraphs magically slotted back into place. But alas, no such sorcery is currently available and we’re forced to think pragmatically to come up with a solution.

At the start of this article I recommended defining your baseline from the line-height of your smallest text element, like the body text. As we’ve just seen, however, a fixed, minimum unit of 22 pixels (or whatever your body line-height may be) can make for awkward line heights for certain font sizes. But what if we were to halve our original baseline? Our body text would now technically have a line-height of two baselines, but that’s only semantics. In most cases, the resulting possibilities of variation and typographical freedom are worth it. Using the golden ratio to quickly define a few header sizes (rounded up or down to make our ems neater), we can easily see that a comfortable line-height is available at every increment: 16px/22px, 28px/33px, 40px/44px, etc.

h1 { 
	font-size: 2.5em; 
	line-height: 1.1em; 
	margin-bottom: 22px; 
h2 { 
	font-size: 1.625em; /* 26px/16px */ 
	line-height: 1.2692307692307692em; /* 33px/26px */ 
	margin-bottom: 11px; 

h1, h2, and p all aligning to the baseline grid.
h1, h2, and p all aligning to the baseline grid.

The Ugly: Offsetting Type

Before I go any further, let me be the first to acknowledge that the following is completely experimental and some of you may even call it bad practice. If you’re willing to humor me, however, keep reading even as it gets ugly. Well, ugly from a “clean code” point of view. From a design point of view, it might get very pretty indeed.

Between the basics and a bit of pragmatic (but optional) improvisation to increase variety, we now have the knowledge and tools to improve the vertical rhythm of most layouts. But the baseline? Not quite. As mentioned before, the way CSS line-height is calculated means the characters are positioned roughly at the vertical center of the line height, rather than sitting neatly on the baseline of it with descenders protruding (like in InDesign or Quark). Many of you will rightly point out that this is what’s supposed to happen. This is how CSS line-height works, and there’s nothing we can do about it. That’s true. But our eyes don’t know CSS semantics. Our eyes are not trained to follow the x-axis center of characters when scanning lines of text — they’re trained to follow the baseline, the bottom of the characters, and when two adjacent lines are misaligned the readability suffers.

Take a look at the following example:

 h1 { 
	font-size: 2.5em; 
	line-height: 1.1em; 
	margin-bottom: 22px; 
h2 { 
	font-size: 1.625em; /* 26px/16px */ 
	line-height: 1.2692307692307692em; /* 33px/26px */ 
	margin-bottom: 11px; 
p { 
	font-size: 0.875em;
	line-height: 1.5714285714285714em; 
	margin-bottom: 11px; 
p.intro {
	font-size: 1.125em; /* 18px/16px */
	line-height: 1.22222222em; /* 22px/16px */
	margin-bottom: 22px; 

Placed in adjacent columns, even thought the baseline has been applied correctly to the intro paragraph, the base of the letters won’t line up to those of the main paragraph because of the font’s calculated line-height position.

CSS line-height makes alignment across adjacent columns inaccurate.
CSS line-height makes alignment across adjacent columns inaccurate.

Now this is where it gets ugly. In order to accurately align the base of all lines of text across all columns (which, of course, is one of the main points of having a baseline grid to start with), we have to offset the type manually. A simple way to do this is to add padding-top until the characters rest on the baseline and adjust the margin-bottom to reflect the offset.

h1 { 
	font-size: 2.5em; 
	line-height: 1.1em; 
	padding-top: Xpx; /* This requires trial and error, as X depends on your font and line-height */ 
	margin-bottom: 22px-Xpx; 
h2 { 
	font-size: 1.625em; /* 26px/16px */ 
	line-height: 1.2692307692307692em; /* 33px/26px */ 
	padding-top: Xpx;
	margin-bottom: 11px-Xpx; 
p {
	font-size: 0.875em; 
	line-height: 1.5714285714285714em;
	padding-top: Xpx; 
	margin-bottom: 11px-Xpx; 
p.intro {
	font-size: 1.125em; /* 18px */
	line-height: 1.22222222em; /* 22px */
	padding-top: Xpx; 
	margin-bottom: 11px-Xpx; 

Messy? Perhaps. Tedious? Indeed. But very gratifying and wonderful at the same time. There’s nothing quite like turning on the baseline overlay on a complex layout to reveal the magic that is perfectly aligned typography.

All elements align across multiple columns.
All elements align across multiple columns.

Phew. If you’re still with me you’re probably either a masochist or have an unhealthy obsession with detail — either way I congratulate you, as your baseline is no doubt as solid as a brick outhouse.

Is It Worth It?

So there we have it. Basic CSS baseline is relatively easy and requires no more than a little math and organization to improve your layout. At the other end of the scale, we can manually adjust padding and margins to mimic the more sophisticated baseline of print design, a notion that will no doubt bring scowls to the faces of CSS purists. The real question, of course, is whether the visual benefits from manually offsetting type are worth it. In some cases, for example design-led campaigns and microsites, it could well be.

In others, particularly larger, more complex websites (your project managers will be scratching their heads wondering why it takes you so long to build the initial template) or collaborative projects with several developers working on the same code, well, it probably isn’t. Let’s face it — what we’re talking about in the most extreme examples not only adds manual labor, but also makes the code more intricate and harder to maintain. It will even affect the load time of your website if applied on a large enough project.

But consider this: just a few years ago, less-than-favorable techniques like “sliding doors” were advocated by industry leaders to hack attributes that CSS3 has now made commonplace. Were rounded corners really worth using two divs instead of one? Well, obviously, to some people they were — yet others may have considered them a waste of time, resulting in bad practice and semantically flawed code. But the point to take away is this: if no one experimented with such labor- and code-intensive techniques, we probably wouldn’t have native syntax for this technique today.

Experimentation, bad practice, hacks, ugly code — whatever we call it — has pushed, and continues to push, our syntax forward, reinventing the tools we will use to create and publish the next generation of online content. To echo Mark Boulton, “How cool would it be for CSS to be able to give you pain-free baseline grid?” Whatever your level of obsessiveness — whether your characters sit neatly upon their baselines or float in between them — vertical rhythm is always an important consideration, and following any of the approaches outlined in this article should result in a satisfactory baseline grid.

There will, of course, still be cases where the restrictions feel too impeding, and sometimes elements like captions, navigation or list items don’t seem to sit right in your predefined structure. In those cases, it’s worth remembering that a few compromises are not the end of the world. Some designers, including the eminent Khoi Vinh, argue that baseline is most important in the context of the main body of your content, and peripheral elements may break the baseline without breaking the layout.

Hopefully the understanding that there’s no right or wrong way of approaching baseline will incite further experimentation on your part, and I encourage anyone with a typographical affection to contribute to the ongoing process of making vertical rhythm an equal priority to horizontal grids in the future of Web design.

Good luck!



© Espen Brunborg for Smashing Magazine, 2012.

Your rating: None