Copy
edit me

Web Fonts &
Typography News

Issue #18 • 18 June, 2019

Well, it happened. Try as I did to keep up with my every-week schedule, life got in the way. Last week our neice graduated from high school, and between that and other family goings-on, it just wasn’t possible to get this out in the form it deserved. So I’m hoping that this will turn out to be a boon: my goal was to try publishing on Tuesdays to see if that had any impact on how many people read it. If you have a preference, or days you’re more likely to read things like this, let me know.

This past week seemed to be a busy one, with interesting news from TypeMedia students and Mandy Michael. There were also great events going on in Singapore (JSConfAsia), Istanbul (ISType) and New York City (Typographics)—it was a whole week full of FOMO. I’ll pass along links to videos once they’re available.

FontSmith posted about creating ‘the first variable font logo’ and it is indeed fabulous. Upon tweeting a link to it though I got a few fantastic responses leading to a bunch of other examples that came before—for Dr. Who (via Nick Sherman), Charles & Thorn, Prince (?!)—thanks CJ!, and more. So many great tweets I stuck them all in a Moment to collect them (and will add more as I find them). [Goes to show that making any claim of ‘first’—or retweeting it as such—should be done only after a lot of research! But it’s still pretty awesome]

I’ve also had some really exciting conference invitations and workshop inquiries this past week, and am looking forward to sharing more about that soon. Until then, have a great week!


Cheers,

Jason

Replies go straight to my inbox—let me know what you want to learn!
 

Today’s Tip

Facts about figures: numeric styles with OpenType features

Over the past few months we’ve looked at a lot of different typographic techniques, approaches, and technologies. Before we get into the next big technical series (it’s high time we talk about font loading performance and management), I wanted to dial the focus back down into some finer details. Specifically I want to talk about OpenType features—but that can be a really big topic. So I want to start off right, and go by the numbers.

No, really: we’re going to talk about numbers.

Examples of numeral styles as shown in Robert Bringhurst's The Elements of Typographic Style

Eyes wide Open(Type)

OpenType features encompass a whole range of elements within a typeface, from tiny details of spacing between specific letterforms (kerning), to alternate glyphs (an extra style of a lower case ‘a’ for example), to special connected characters called ‘ligatures’ (think of combinations like ‘ff’ or ‘fi’) and even glyphs for specific fractions. It can also include different styles of numerals. I thought this might be a good way to introduce the idea of OpenType features, how to use them on the web, and why you might want to do so. 

On the case

There are a few different styles of numerals you may have come across. though it might not be immediately apparent that it is one style of several within a typeface design, rather than the design itself. The three we’re going to look at are Lining and Old Style Figures, and Tabular (as opposed to Proportional) spacing. Here are the differences between them:

Lining Figures

Also known as ‘Titling Figures’, these are the most standard ones. They have equal heights, and line up on the baseline (or bottom edge) together evenly. You can think of them as ‘all caps’.

Example of lining figures
Lining, or Titling Figures
.lining-figures {
  font-variant-numeric: lining-nums;
}

Old-Style Figures

This style of numerals have uneven heights and look like they have ascenders and descenders jutting above and below the baseline. Sometimes referred to as ‘Text Figures’, this style of numeral tends to have an older feel to them and are designed to sit in line with lower case letters mixed in with other text.

Oldstyle, or Text Figures
.oldstyle-figures {
  font-variant-numeric: oldstyle-nums;
}

Tabular Spacing

This is not actually a style, but rather about consistent spacing along the horizontal axis. This means that each numeral occupies the same size space so they line up nicely in columns when used in data or financial tables. 

Example of tabular numerals
Lining and Oldstyle numerals with tabular spacing
.tabular-figures {
  font-variant-numeric: tabular-nums;
}

Proportional Spacing

While this used to be more the default, lately I’ve seen tabular spacing set as the norm in a number of fonts I reviewed for this issue. In general, unless you need to line up numerals in a table, you’ll get more pleasing results by specifying proportional spacing.

Lining and Oldstyle numerals with proportional spacing
.proportional-figures {
  font-variant-numeric: proportional-nums;
}

This leads me to the notion of defaults. Every designer will make their own choices about which style and spacing are the defaults. In fonts I looked at this week, it was a split between oldstyle and lining figures, and many had tabular spacing as the default. But since you can’t be sure, you may want to be explicit in your CSS so you can be sure you get what you intend if a default should change (or a fallback font gets used instead).

You might start with something like this:

h1, h2, h3, h4, h5, h6 {
  font-variant-numeric: lining-nums porportional-nums;
}
p {
  font-variant-numeric: oldstyle-nums porportional-nums; 
}
td {
  font-variant-numeric: lining-nums tabular-nums;
}
Not every typeface has all the styles and spacing of numerals, but more have them than you might realize—and they’re fairly easy to access in CSS. Likewise, not every font has OpenType Features enabled for use on the web—it does add a bit to file size. I had to hunt around a bit to find an open-source font that had all the combinations available: lining and old style figures, and both proportional and tabular spacing.

Note that you can also combine style and spacing in a single declaration:

.lining-tabular-figures {
  font-variant-numeric: lining-nums tabular-nums;
}

A tangled web (of support, anyway)

There are two ways to specify styles and spacing, and in the demo I show how to use both. This will cover for older browsers that don’t support the intended syntax, and the proper format for those that do. While it may seem simpler to just use the lower-level font-feature-settings, there are a couple of complications this can incur. 

First is with specificity: even if you have declared font-variant-numeric: tabular-nums on the element you want, if anywhere up the chain of parent elements you have defined font-feature-settings: "tnum" 0;, that will supersede and you won’t get your tabular numbers. 

Second is simply to do with verbosity. When declaring font-feature-settings, even if you want to change only a single value, you have to redeclare the whole string. So if you have used it to set other OpenType features (like ligatures, alternates, or fractions) in addition to your numeric styles, you have to redeclare the entire string. While you can skirt around that issue by using CSS Custom Properties to set individual values, since those are not supported in IE 11, you still have the same issue if you want support there.

Here’s an example showing the full ‘progressively-enhanced’ way of specifying:

.lining-tabular-figures {
  font-feature-settings: "lnum" 1, "tnum" 1;
}
@supports (font-variant-numeric: lining-nums) and 
    (font-variant-numeric: tabular-nums) {
  .lining-tabular-figures {
    font-feature-settings: normal;
    font-variant-numeric: lining-nums tabular-nums;
  }
}
So that’s the story, by the numbers. Have fun, and don’t forget to send links to your perfectly-aligned data tables and case-sensitive numeral styles. I’d love to showcase your work!

Resources

Web Type News

Does your organization need a boost?

If your brand voice needs some volume, or your team could use a hand improving font performance—maybe you could use a Type Audit. I work with you and your team to identify how well your site’s voice aligns with your brand, and can show you how to improve how quickly it gets on screen on any size device. Read more about Type Audits and let’s talk!

Upcoming Events

  • Heading to Barcelona on July 17th for CSS Camp to chat about dynamic typography and variable fonts
  • Winding up in the Windy City for An Event Apart Chicago on August 26-28
  • Teaching a full-day workshop and giving a talk on variable fonts at Web Unleashed in Toronto on September 12-14
If the typeface in this message has Georgia on your mind, you're not seeing the web fonts :( I'm hoping that you're seeing it set in the lovely Roslindale (Display Condensed and Text) designed by the amazing David Jonathan Ross for his FontOfTheMonth.club. You should check it out!
Copyright © 2019 Jason Pamental, All rights reserved.


Forward to a friendSubscribe
Want to change how you receive these emails?
You can update your preferences or unsubscribe from this list.

Email Marketing Powered by Mailchimp