Skip navigation
Help

Font Bureau

warning: Creating default object from empty value in /var/www/vhosts/sayforward.com/subdomains/recorder/httpdocs/modules/taxonomy/taxonomy.pages.inc on line 33.

At yesterday’s Ampersand New York web typography conference in the Times Center at The New York Times, Font Bureau designer/technologist (and A List Apart columnist) Nick Sherman demo’d Size Calculator, a web application created to bring screen design a capability that print design has enjoyed for 500 years.

It is trivial for a designer to set type (or any artwork) to appear at a specific size in centimeters or inches on the printed page. But it is impossible to do so when designing for screens. Here’s how Zen it gets: if I use CSS to set a line of type at 65cm, it will most certainly not be 65cm tall—nor does the W3C expect it to be. Actual size will depend on the dimensions and resolution of the screen. (Perceived size will of course depend on viewing distance, but that is true for print as well.)

Likewise, if I want an image or a line of type to appear to be exactly the same size when viewed on different screens—say, on a smartphone and a desktop monitor—there’s no way to achieve that, either.

Size Calculator solves these problems by using JavaScript to do the math.

What it is good for: if you know the dimensions and resolution of your device (be it a wall screen at a conference, a digital billboard, or a specific model phone held in a specific orientation), you can finally do the things I mentioned in the paragraphs above. Same size type on different screens viewed at different distances? Achievement unlocked. Another thing Nick did in his demo was to “print” an exact size dollar bill on the screen in the Times Center auditorium. He proved that it worked by walking to the screen and holding the actual dollar in front of the projected dollar. He then printed a life-size image of himself. Fun!

What it is not good for: although Size Calculator is exciting, it would not be good for responsive web design, because RWD is about designing for a universe of unknown devices, resolutions, and capabilities.

But if you are designing for a limited set of known screens, the sky’s the limit—literally: your design can take miles or km into account. If you’ve always wanted to make a ten thousand foot letter display at 12pt when viewed from a helicopter, now’s your chance.

What will you do with Size Calculator?

0
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) { … }

or:

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

0
Your rating: None

The week in type

Let’s start with some fantastic news: Issue #2 of Codex magazine is now available for pre-order. What’s more, you can now purchase a subscription. The second issue is rather special — A new Editor in Chief (Paul Shaw), a complete redesign (Linda Florio), more pages, more of the very, very best content. Spread the word.

Inspiration

More Luca Barcellona in action in Firenze:

Erik Spiekermann talks about Type on Screens at Creative Mornings Berlin:

I posted this Ampersand Balloon project by Conor & David months ago. Have just discovered the making of video:

Beautiful Bitmaps, a project from Uppercase mag. Here are a couple of my favorites:

Each letter of the alphabet is available as a print from the Uppercase store.

Great idea from Tim Brown: Type Set Match hosted on Dribbble.

Twenty Swedish Posters for 1930s Hollywood:

HT: @tealtan

Books

I’ve ordered mine, and can’t wait to get my hands on it. Herb Lubalin from Unit Editions:

This meticulously researched book offers a complete career overview of Herb Lubalin, beginning with his early days as one of the original Mad Men in the New York advertising world of the 50s and 60s, and continuing into the years of his greatest achievements as one of the world’s most influential typographers and graphic designers.

Process

An interesting short read on a logo(type) redesign by Typejockeys:

The Air New Zealand Logotype Design Process from Kris Sowersby:

New fonts

Taca designed by Rúben Dias, and released through Fountain Type — a kind of Jean Claude Van Damme meets Eurostile:

The really lovely Hummingbird from Laura Worthington. Replete with a bucket-load of contextual alternates:

Gira Sans by Rui Abreu of Fountain Type:

And a lovely promo video:

Another script from the maestro Ale Paul. Hipster Script:

New from Typotheque, Karloff:

Read more about the design process and inspiration in Beauty & Ugliness in Type Design.

A large family from Adobe, Source Sans Pro. And free to download, including the source files (open source):

Luela from Cindy Kinash is fun. Combine it with Luela Frames for Etsy-esque feel:

From Font Bureau, The Reading Edge™ Series of fonts for small sizes on screens:

The site itself is testament to what can be achieved typographically on screen. Great stuff.

A fun way for kids or adults to learn Korean:

Korable Block from Allied Operations on Vimeo.

Type-related book marks

Baseline.js, a jQuery plugin for fixing vertical baselines.
The Typeface of Truth.
Kerning — the Italian typography conference.
Paris vs New York — Fonts in Use.
Abobe Edge Webfonts.
Using @font-face for resolution independent graphics.
Publishing startups and great fuzziness.

Finally

Don’t forget to order your copy of Codex journal of typography! You’ll love it.



Sponsored by H&FJ.

Hipster Hummingbirds

0
Your rating: None

  

What is it that makes a typeface into a text font, instead of a font for larger sizes? The answer differs slightly, depending on whether one aims for print or Web-based environments.

Nevertheless, there are certain features that most good text faces have in common. Familiarity with these helps to select the right fonts for a given project. This article presents a few criteria to help the process along.

Some of today’s most successful typefaces were designed to excel in very specific areas of use: Frutiger grew out of airport signage, Georgia and Verdana were among the first mass-market fonts created for on screen reading, FF Meta was conceived as a telephone book face, and even the Stalwart Times New Roman was tailored for the pages of the London Newspaper The Times. Many typefaces are also often fine-tuned for using in certain sizes.

It should be noted that in this article, when “text” is mentioned, it is in discussion of body text, or running text (in other words, text at a similar size to what you are probably reading right now, rather than much larger sized words).

Features Of A Good Text Typeface

The features outlined in this article are those that type designers keep in mind while developing new typefaces. It’s important to realize that these aspects of typeface design are different from the text treatment a graphic designer employs while laying out a book page or website—no matter what a typeface’s inherent rhythm and niceties are, setting a text is still something that must be done with great care in respect to readability. There are problems that good fonts themselves cannot solve—whether or not a text sings on the page or screen depends on factors like the width of the column, the amount of space between each line, the contrast between the foreground/background and a number of other factors.

Different versions of the Bembo design
Above, Bembo over the years: this typeface was a favorite of many book designers throughout the 20th century. At the top of the image is a scan of the original Bembo typeface, printed with letterpress. The digital version of the typeface—Bembo, seen in the middle, is too light for ideal text in print. A newer digitization was published in 2002—Bembo Book, seen at the bottom. This font is much darker, and is a better representation of the original Bembo idea. However, the middle version is still very elegant, and may still be used well in sub-headlines.

Every typeface has its own inherent rhythm, created by the designer who made the font. With typefaces that are intended for use in body text, it is primarily this rhythm that will make the typeface readable. But there are additional factors that go into the making of a good text face: the space between the letters, the degree of contrast in the letters’ strokes, as well as the x-height and relative size of the whitespace inside of the letters. Not every typeface that works well in text will apply all of these factors in the same way, but all good ones will have many of these features in common.

1. Stroke Contrast

When it comes to typefaces, the term “monolinear” is used to describe letters that appear to be designed with a consistent stroke thickness. Monolinear typefaces are low-contrast typefaces. Stroke contrast can be a helpful feature in small text sizes, but it is not paramount that a text face appears to be monolinear. Indeed, many newspapers employ high-contrast fonts; the question that must be considered is just how thick the thin strokes in high-contrast typefaces are.

Sample Layout in the Cycles typefaces

The images in this section show different ends of the contrast spectrum: the Cycles types shown above are serifed, with a good deal of contrast. Sumner Stone’s Cycles typeface is an excellent choice for book design as its letter forms combine clarity with a rather high degree of stroke contrast and an almost timeless appearance. Five separate “versions” of Cycles are used in the above image; each block of text is set in its own optically-sized font.

Below, Avenir Next—also a great text face—is from another style of letter, and has very little contrast. I wouldn’t split good typefaces up into good contrast and bad contrast groups. Rather, some typefaces have a degree of contrast—be it too high or too low—that makes them less suitable for use in text. There is no definite rule on how much or how little contrast impacts a text face’s legibility. However, it is clear that both no contrast and excessive contrast can have adverse effects.

Text in Planeta and Avenir Next

Geometric sans serif typefaces often appear to be monolinear stokes; their letters seem not to have any stroke contrast. In order to achieve this effect to the max, type designers have always made slight optical corrections. To look monolinear, a geometric sans needs some degree of thinning. In the image above, Planeta (left) is compared with Avenir Next (right). Both typefaces are more recent additions to the geometric sans category than stalwart faces (like Futura), or classic display designs (like ITC Avant Garde Gothic). Planeta has no visible stroke contrast, which must be a conscious decision on the part of its designer. While this does give it a unique style, it makes the face less suitable for text than Avenir Next, which is actually not as monolinear as it appears at first glance.

2. Optical Sizes

Text in Garamond Premier Caption and Display Sizes

The Garamond Premier typeface family features different versions of each font. These variants are tailored for use in a certain size range. Above, the Display font (left) is compared with the Caption font (right). The Display font is optimized for texts that will appear in very large point sizes, while the Caption font has been optimized for very small text.

In her book Thinking with Type, Ellen Lupton writes:

“A type family with optical sizes has different styles for different sizes of output. The graphic designer selects a style based on context. Optical sizes designed for headlines or display tend to have delicate, lyrical forms, while styles created for text and captions are built with heavier strokes.”

The intended size of a text should be considered when selecting the typeface: is the typeface you want to use appropriate for the size in which you need to set it? Does the family include optical sizes (that is, different versions of the typeface that are tailored specifically for use at different sizes)? As with each of the factors mentioned in this article, the size at which a font is set can make or break your text.

In many ways, it is easiest to see the qualities necessary for good text faces by comparing potential selections with “display” faces. Like the term “text,” “display” refers to the size at which a specific font may best be used. In print media, as well as in many screen and mobile-based applications, the term “display” is often analogous with “headlines.” If a typeface that you are considering looks more like something that you might like to use for a headline, it won’t be the best choice for body text.

In the comparison image below, the Garamond Premier Display font has a tighter rhythm than the Caption font—not as much space is necessary between letters when they are set in large point sizes. Why should one consider type families with optical sizes, anyway? Well, as users bump up the point size of digital fonts, the space between letters increases in equal proportion. This inter-letter space slowly becomes too large, and makes a text feel like it is breaking apart. When a proper text font is set large, it may require some tighter tracking. Typeface families that offer optically-sized variants of their styles play a helpful role here.

Text in Garamond Premier Caption and Display Sizes

In the image above, the first line of text—“Stanley Morison”—is set in the Garamond Premier Display font, while the lines of text underneath it are set in Garamond Premier Caption. Each font is balanced for its size, and they also harmonize well with one another. In another image (below), these fonts have been switched: the headline is now set in the Garamond Premier Caption font, and the text in the Garamond Premier Display. The letters in the Caption face look too clumsy when they are set so large, while the Display fonts’ letters appear uncomfortably thin in a “text” setting.

Text in Garamond Premier Caption and Display Sizes

The amount of stroke contrast visible in caption-sized fonts is much lower than in display-sized fonts. If the Garamond Premier Display font (from the above image) was rendered in a smaller point size, its thin strokes would begin to break apart, making the text unreadable. But this would not occur with the Caption version.

Garamond Premier Caption can robustly set real text, even in poor printing conditions. How well a font will render in small sizes on screen depends on the operating system and applications in question. Font formats themselves also play a role; in certain environments, TrueType fonts with “hinting” information may vastly improve on screen display (see the “Hinting” section at the end of this article).

3. x-Height

Text in Garamond Premier Caption and Display Sizes

Garamond Premier’s Display face (above left) is shown next to the Caption face (above right). Both fonts are set at the same point size. The Caption face features a much higher x-height than the Display font.

Many successful text faces feature high x-heights; this means that the ratio of the central vertical area of lowercase letters—the height of the letter x, for instance—is large when compared to the length of the ascenders and descenders. Depending on its design, a text face may have a low x-height and still be quite legible. But the benefit of incorporating a large x-height in a design is that it maximizes the area of primary activity.

A high x-height may also prevent some letters, like the a or the s, from appearing to become too dark; these two letters have three horizontal strokes inside the x-height space, which is a very small area in text sizes. In order for letters to maintain clarity and understandability, they must have a consistent rhythm, as well as include large, open forms.

4. The Spaces Inside of Letters

The images below illustrate just a few of the intra-letter spacing elements that should be understood and considered when choosing which typeface to choose for your body text. In order for the white spaces inside of letters to remain visible in small sizes, it is necessary for their counterforms to have a certain minimum mass, proportionally.

Counters
ITC Bodoni Six and ITC Bodoni Seventytwo

The image above shows text set in two members of the ITC Bodoni family: ITC Bodoni Seventytwo and ITC Bodoni Six typefaces. In the first line, “Randgloves” is set in a size mastered for 72pt display (ITC Bodoni Seventytwo), while “and jam” is in the Caption size (ITC Bodoni Six). These words are reversed in the second line. Note how the enclosed white space in the top portion of the e changes between the display and text optical sizes.

Apertures
Apertures in FF Meta

“Apertures” are the gateways that whitespaces use to move in and out of the counterforms of a typeface’s letter. The above image highlights the wide apertures in four letters from Erik Spiekermann’s FF Meta typeface. These allow for the typeface’s letterforms to feel more open. In certain sizes and settings, wide apertures—and the large counterforms that are their result—will make a text more readable.

Apertures in Frutiger and Helvetica

The top line of the image above is set in Helvetica, and the bottom line in Frutiger. While the counterforms inside the letters of these two typefaces are similar in size, Helvetica’s apertures are much smaller. Because of this, white spaces inside of Helvetica’s letters and between Helvetica’s letters are much more closed off from each other than in a typeface with more open counters—like Frutiger.

Other counterforms and problematic letters worth remembering include the c; if the apertures of a, e, s are very open, the c should follow this same route. Then there are lowercase letters like a, e, g, s that often have rather complex shapes—specifically, they each feature several horizontal strokes inside a small amount of vertical space. How do their forms relate to one another? How large is the typeface’s x-height? Do the ascenders and descenders have enough room, particularly f and g? Do the counterforms inside of roundish letters (e.g., b, d, p, q, o) have the same optical size and color as those inside of straight-sided letters like, h, n, m, and u? How different from one another are the forms of the capital I, the lowercase i and l, and the figure 1? Can the 3 and the 8 be quickly differentiated from each other? How about the 5 and the 6?

5. Kerning

Sample text in Carter Sans, with and without kerning

In the sample above, kerning has been deactivated for the second line. The gaps between the letters T y and V o are too large when compared with the amount of space between the other letters in the text. The typeface used in the image is Carter Sans.

Despite the popular misuse of the term in graphic design circles, “kerning” does not refer to the spacing values to the left and right of the letters in a font. Rather, fonts contain a list of kerning pairs to improve the spacing between the most troubling lettering combinations. The importance of kerning in a font is the role it may play in maintaining an optimal rhythm. Just as kerning describes something much more specific than a typeface’s overall spacing—or the tracking that a graphic designer might apply to a text—kerning is not the rhythm of a typeface itself, but an element that may strengthen a typeface’s already existing rhythm. Not every typeface design requires kerning, and there are typefaces on the market that indeed may have too many kerning pairs—a sign that the basic letter spacing in the font could have been too faulty in the beginning.

6. Consistent Rhythm Along the Line

Simple Text Sample in Frutiger and Helvetica

In the image above, compare the spaces between the letters of the Helvetica typeface (first row) with Frutiger’s (second row). Frutiger is a more humanist design, featuring a slight diagonal axis in its letters; many of them look similar to Helvetica’s, at least at face value. However, the space between Helvetica’s letters is much tighter.

While most of the images in this article feature typeface families that include Optical Size variants, many commonly used typefaces on the market today do not offer these options. This is why it is helpful to be able to identify text typefaces based on their features, rather than just on their names in the font menu. As mentioned earlier, it is primarily the typeface’s rhythm that dictates the readability of a block of text.

Take Frutiger and Helvetica, which are both commonly used in text, especially for corporate communication—Neue Helvetica is even the UI typeface in iOS and MacOS X 10.7. Yet, despite its popularity, Helvetica is not very effective as a text typeface; its rhythm is too tight. By rhythm, I’m not referring to tracking—or any other feature that a designer can employ when typesetting—but the natural flow of space between letters, and within them as well. Frutiger is a much more open typeface—the spaces between its letters are closer in size to the white spaces inside of the letters than in the case of Helvetica. Like all good text typefaces, Frutiger has an even rhythm—space weaves in and out of the letters easily.

7. Caveat: Signage Faces

To round off my discussion on text typefaces, I’d like to briefly mention some fonts that are often shown in rather large sizes: fonts for signage. Interestingly, many signage typefaces have design features very similar to typefaces created for very small applications. The Frutiger typeface, based on letters that Adrian Frutiger originally developed for the Roissy airport in Paris (now named after Charles De Gaulle), is quite legible in small sizes precisely because it is a good signage typeface. Despite their size, signage fonts serve a rather different purpose than Display fonts.

Frutiger in an airport signage-like setting

Additional Elements To Consider

After considering the criteria mentioned above, the next question that often comes up is, “does this font have oldstyle figures, or small caps and ligatures, etc.?” A font’s letters might look really great in text, but if they do not include additional elements and features, their use is somewhat minimized. I avoid using fonts with small character and feature sets where I can, because I feel that the lack of these “extras” may break the kind of rhythm I aim to achieve.

1. OpenType Features

Once you’ve established a consistent rhythm by setting your text according to the correct size and application, it would be a pity to inadvertently break that flow. Large blocks of tall figures or capital letter combinations do just that.

Even in languages like German, where capital letters appear at the start of many words, the majority of letters in a text planned for immersive reading will be lowercase letters. Every language has its own frequency concerning the ratio of “simple” lowercase letters like a c e m n o r s u v w x z to lowercase letters with ascenders or descenders—b d f g h j k l p q y. In international communication, language support is a key consideration when choosing a font, and other character set considerations may especially play a role.

FF Meta Pro Book and two examples from its many figure styles

Traditionally, the style of figures used in running text also have ascenders and descenders. These figures—often called oldstyle figures or text figures—harmonize better with text than the “uppercase” lining figures. These so-called lining figures either align with the height of a typeface’s capital letters, or are slightly shorter. It is no surprise that, when shipping the Georgia fonts for use onscreen and online, Matthew Carter and Microsoft made the figures take the oldstyle form. Many other typefaces that have long been popular with graphic designers, like FF Meta (seen above), also use oldstyle figures as the default style. In my opinion, lining figures are best relegated to text set in all-caps.

Long all-caps acronyms—like NAFTA, NATO, or USSR—also create an uncomfortable block in the line for the reader. Setting these letter-strings in small caps helps reestablish a specific typeface’s natural rhythm in reading sizes, as may be seen in the first line of the image below (set in Erik Spiekermann’s FF Meta).

FF Meta Pro Book and its small caps

Along with common ligatures like fi ff fl, small caps and the many figure options are the most common OpenType features found in quality text fonts. Aside from having both lining and oldstyle figures, OpenType-functionality can enable a font to include both tabular and proportionally-spaced figures, numerators and denominators for fractions, as well as superior and inferior figures for academic setting. Additional OpenType features (such as contextual alternates or discretionary ligatures), are more powerfully noticed in display sizes, and in some cases can even be distracting in text.

2. Hinting

The display of text on screen, particularly on computers running a version of the Windows operating system, may be fine-tuned and improved with the help of size-specific instructions inside of the font file. These instructions are commonly referred to as “hints.” A TrueType font (or a TrueType-flavored OpenType font), is capable of including hinting. However, not every font manufacturer goes to the effort of optimizing the onscreen appearance of its fonts for Windows—even those fonts specially created for use in text sizes.

Prensa in three different rendering environments

All of the text in the above image is shown in the same font: Prensa, set at 18 pixels. The lowest row shows this at actual size in three different onscreen rendering environments. In the enlargements, the top row shows a close-up of rendering in Safari on MacOS X, which ignores the hinting data in fonts. The second row shows rendering in Internet Explorer/WindowsXP (Grayscale only, for this sample). The third row is from a ClearType environment—in this case, from Firefox on Windows7. Prensa is a typeface designed by Cyrus Highsmith at the Font Bureau; the Web font is served by the Webtype service.

Recommended Typefaces For Readability

Aside from the typefaces already mentioned in this article and its images, here is a small selection of faces that I personally enjoy at the moment. Even though lists of “favorite” typefaces are about as useful as lists of favorite songs or favorite colors, I am happy to pass my subjective recommendations along. No doubt that as new projects arise, my list of favorites is likely to change, too. I do think that these typefaces serve as great starting places. Some are also just from cool friends whose work I dig. Alongside each selection, I mention whether this choice is currently available for print only, or if there is a Web font version, as well. Don’t forget: the typefaces that you pick in the end should depend on your projects, their audience, and the content at hand.

Small sample of the Arnhem typeface

Arnhem is a no-nonsense high-contrast oldstyle-serif face. It is a contemporary classic for newspaper and book setting, designed by Fred Smeijers and distributed via OurType. Available for print and Web.

Small sample of the Benton Sans typeface

Benton Sans is a Tobias Frere-Jones performance of Morris Fuller Benton’s News Gothic genre. Designed for Font Bureau, it is not only a great typeface for small print in newspapers, but one of the best-rendering text faces for the Web as well. Available for print and Web.

Small sample of the Ibis typeface

Ibis is another Font Bureau typeface, designed by Cyrus Highsmith. This square serif family is also no stranger to cross-media text-setting. Ibis works just as well whether you use it in print or on screen. Available for print and Web.

Small sample of the Ingeborg typeface

Ingeborg is modern serif family from the Viennese type and lettering powerhouse, the Typejockeys. Like any proper family should, Ingeborg has optically-sized variants for text and display settings. The display versions of the typeface can get pretty far out, too! Designer Michael Hochleitner named this typeface after his mother. Available for print and Web.

Small sample of the Ludwig typeface

Fred Smeijer’s work in contempory type design is so significant that he gets two shout-outs in my list. His Ludwig type family takes a nod from 19th century grotesques, but he does not try to sanitize their quirky forms, as so many type designers had tried to do before him. Available for print and Web.

Small sample of the Malabar typeface

This is one of the typefaces that I’ve designed. I’m somewhat partial to Malabar. Available for print and Web.

Small sample of the FF Scala Sans typeface

Martin Majoor’s FF Scala Sans has been my top go-to typeface for almost 15 years. It mixes well with the serif FF Scala type, but it’s also really great on its own. Available for print and Web.

Small sample of the URW Grotesk typeface

Of all the typefaces designed by Hermann Zapf over his long career, URW Grotesk is clearly the best. Unfortunately, it has been a little overlooked. URW Grotesk is a geometric sans, with a humanist twist that brings much more life into the letters than this genre usually allows for. Plus, the family is super big. Available for print and Web.

Small sample of the Weiß-Antiqua Typeface

Are you a DIY-fan? Do you like to print with letter press, whether you set your own type by hand, or have polymer plates made? Then check out the typefaces of Emil Rudolf Weiß! His Weiß-Antiqua is an eternal classic. Weiß may have passed away 70 years ago, but his work is still relevant. He was German, so his last name is sort of pronounced like Vice, as in Miami Vice. Available for print and Web.

Conclusion

There are many factors that play a role in typeface selection. Aside from just browsing through the available fonts that they have, or fonts that could be newly licensed for a project, designers regularly spend considerable effort determining the right typeface to complement a project’s content, or the message at hand. Understanding some of the thoughts that go into the making of text typeface—including how a typeface’s letters are fitted to each other to determine a text’s default underlying rhythm—helps lead to better informed decisions regarding what types are indeed apt, and which faces are better suited for other sorts of jobs. After having read this article, I hope you feel more comfortable with this kind of decision making, and that you will know what to look for with a font in the future.

Other Resources

For more information about choosing the right text fonts, you may be interested in the following books and Web resources:

1. Websites

2. Books

Note: A big thank you to our fabulous Typography editor, Alexander Charchar, for preparing this article.

(jvb) (il)

© Dan Reynolds for Smashing Magazine, 2012.

0
Your rating: None

After a long hiatus (inexcusably skipping 2009 and ’10) we’re back with our annual review of the year in type.

The idea is simple: I invite a group of writers, educators, type makers and type users to look back at 2011 and pick the release that excited them most. The reviews range from the academic (like Paul van der Laan on Zizou or Jens Kutilek on FB Alix) to the theoretical (such as Jan Middendorp on Agile) to the personal (like Carolina de Bartolo who reviewed Calibre and Periódico after firsthand experience with a redesign of WIRED magazine) to the playfully unexpected (Microsoft’s Si Daniels praises Apple Color Emoji) to the exclamatory (Matthew Butterick on Neue Haas Grotesk).

This is not a juried contest. The result isn’t necessarily the “best fonts of the year”, or even those most used or ballyhooed. But these 50 selections do capture a pretty accurate snapshot of where type design is now, and where it’s headed.

If 50 seems like a lot, consider the thousands of new releases that didn’t make the list. The general public’s interest in typography continues to grow, and with that comes hundreds of new designers who are dabbling in or starting new careers in type making. Our list of honorable mentions represents only a small slice of the new fonts published in 2011.

As always, the other clear trend is new technology. By the end of 2008, we could finally declare OpenType the default font format. Three years later, in the wake of the @font-face declaration, there are new formats and new substrates as destinations for type design. Yet, in contrast to OpenType’s glacial adoption rate, webfonts are poised to take hold quickly, sparked by intelligent delivery platforms (pioneered by Typekit in 2009), early adoption by major foundries (led by FontFont), and screen-specific font design (like Font Bureau’s RE series).

The unexpected benefit of the new webfont era for an effort like this one on Typographica – it becomes easier to judge a typeface more fairly. Despite type’s long history in print, a font made today will likely be seen on screen far more often than on paper. I’ve always lamented that critics and users usually judge typefaces only on screen, not in their “proper” medium. But in an age in which we read more on screen than in print, maybe this isn’t a universal problem anymore. Of course, now font makers need to rethink the way type is made and rendered, but we’re already seeing progress there.

This year’s list wouldn’t be possible without Chris Hamamoto’s enduring design, Billy Whited’s proficient coding, Laura Serra’s image wrangling, able proofing by Matthew Coles, and, of course, all the contributors. We’re also grateful to FontFont for the newly updated FF Quadraat and Process for Anchor, typefaces that make writing and reading on the web a pleasure. Thank you!

The “Typefaces of 2011” image uses Salvo and Acta.

0
Your rating: None