Browser substitution of old style figs and modern figs with Corbel

Bruce's picture

Greetings all,

I'm working on a web site design for which I would like to use Corbel as the suggested font of first choice for text. This is a redesign of a site that now uses Verdana for text and Trebuchet Bold for display. Verdana works fine as basal text, but looks less handsome in bold, especially when set in all caps. Hence the current choice of Trebuchet Bold for display. The beauty of Corbel is that it seems to work well everywhere in the overall look and feel that we desire -- u/lc, a/c, bold, bold a/c, etc.

However, there are many places in this site where the abbreviation MM2 appears. Since Corbel's default usage for numerals is old style figs, this makes for an awkward combination of characters. (If Typophile is displaying my post on your machine the way it does on mine, you'll see this right here, since I am seeing an old-style 2.)

Numerals appear rarely on this site, apart from this one constant MM2 combination, so I am hesitant about using Corbel, lest site readers think it is an error.

The site is being built in CSS, about which I know just enough to be dangerous. And what might be possible in CSS3 certainly ain't possible right now . . .

If I understand this properly, I could ask that this be hard-coded to call for the particular desired glyph -- a "2" in modern figs -- so that this MM2 combination appears consistently throughout the site if the browser's system has Corbel. But any browser that does not have Corbel is going to display something unintended, and other than a modern-fig "2." Is this correct?

The client may be fine seeing the MM2 combo with the very short old-style fig 2, or it may be that they'll reject the idea out of hand. I'm just trying to understand what are the possibilities before I pitch the idea of Corbel.

Thanks for any input.


kentlew's picture

Hey, Bruce -- Good to see you're still around, alive and kicking.

I'll let the web wonks give you more expert opinions and possible solutions. All I can say is that I suspect you'll be setting yourself up for a world of headache and frustration on your current course. Myself, I would surrender the Corbel and look elsewhere.

-- Kent.

JCSalomon's picture

 Actually, Corbel doesn't seem to have given the lining figures any PUA code points, so I'm not sure how you could display a lining `2' even on systems that had the font installed.


Thomas Phinney's picture

What you really need is for the browsers and CSS to support lining vs oldstyle as formatting. Not there yet.



Florian Hardwig's picture

Hi Bruce!

What Thomas said.

A bit more detailed here:
The css3 fonts module is still a working draft […] so there remains the possibility to address the omission of figure case selection. […] the numerals cannot be ‘transformed’ to upper- or lower-case, in the style of text-transform. This implies that a ‘variant’ property should be used, much like font-variant is used to specify small caps. As such, it is proposed that a numeral-variant property be added to the css3 fonts

However, you can use a workaround similar to the one described here: Using The Best Ampersand Available.

Just tag all instances of ‘MM2’ in your HTML with something like <span class="lf">MM2</span> (lf for lining figures here, you can pick any name). Then, in the CSS, specify a sequence of sans fonts that are similar to Corbel – but have lining figures, as default:
.lf {font-family: "Myriad Pro", "Myriad", Calibri, sans-serif;}

There certainly are more (possibly better) options. Still, Myriad is quite widespread, and users that have Corbel will most likely also have Calibri. Both do a great job.
For some other faces, you’d have to adjust the size (see Lucida Sans), otherwise they’d stand out. Unfortunately, and afaik, you can’t do that dependent on the font, yet.

This example is rendered by Safari on Mac OSX; font-size: 18px. I assume your text will actually be even smaller, so the differences would really be insignificant.


Bruce's picture

Thanks for that suggestion, Florian. This could be an effective workaround.

Am I correct in thinking that since Acrobat Reader uses Myriad as its default sans font, then almost every computer is going to have it installed?


Florian Hardwig's picture

I’m afraid it’s not as easy as that. Fonts that come with Acrobat – and reside somewhere on the computer – still might be unavailable to the browser. If one can believe this study, Myriad is actually very rare: The most common fonts,
Maybe Joe Clark can elaborate on this topic? I reckon he knows quite a lot about the spread of fonts.

I’d go with Calibri and rely on the fact that those come bundled, if any.
Keep in mind most users won’t see neither Corbel nor Calibri.
In any case, make sure to add Corbel to the end of your font stack, as a fallback, so that your users don’t end up with some random default sans like Arial. That might look worse than having the old-style figures in the first place.

Bruce's picture

Well, this is exactly what is so disheartening for me when I approach web issues. I am a book designer, so I want to control everything, and of course I can't!

My hope was that Corbel could pop up first, on the newer Windows machines that happened to have it, but would rely on Verdana and Trebuchet as next choices for everyone else, and certainly ahead of Helvetica and Arial. Yet I see now that not everyone has even these fonts.

Thank you for the link to the codestyle study. Useful and interesting. When I went to their site, I noted that Gill is not displayed correctly (in Gill) in the list of font names, and when I asked for samples of Calibri and Corbel they both displayed in Times. Oh well, I'm sure the hard data in percentages is correct.

I look with envy at Sumner's site ( and how gorgeously he sets up everything, controls everything! Every line break! Every subtlety of linespacing! Every alignment with illustrations! And of course he's doing that through PDFs, over which he does have complete control. But my collaborator and friend, who'll be writing code for this new site, keeps telling me to have as few "pictures of words" as possible, since it runs directly counter to the idea of searches, appearances in rankings, and so forth.

What a strange tug of war this is, between the modern practices of searchability and any-browser-displayable type on the one hand, and my hot-metal, lock-it-all-up-in-the-chase and control every hairspace desires on the other . . . Am I a curmudgeon who can't change? Or am I a person who justifiably wishes to see information displayed in a particular and refined way, on every computer?

I'm sure many of you have these conversations with yourselves on a regular basis. And in the end, I guess I should put up, shut up, and just keep on using Verdana.

Thomas Phinney's picture

Bruce: Actually, Sumner is using GIFs, not PDF.

eeblet's picture

Florian beat to me the CSS answer. :)

All the PCs I've encountered (beside my own) lack Myriad.... It's probably best to throw in one more generic option (helvetica?) before the "sans-serif" option, since the default sans is often asstastic.


forrest's picture

I realize this is an old thread, but I have to say that the lack of control designers have over display on the web is a feature, not a bug.

"displayed in a particular and refined way, on every computer?"

Considering that screens and eyesight (if your user even has eyesight) vary a lot, this is impossible and not a good thing.

Florian Hardwig's picture

Why would it be ‘not a good thing’ if the author could suggest a figure style that goes best with the content?

Three years later, there is hope for more typographic control: W3C’s CSS Fonts Module Level 3 Working Draft includes a section about numerical formatting: the font-variant-numeric property.

John Daggett (Mozilla) explains the OpenType font feature support in Firefox 4. In this browser, you can select lining figures via the vendor-specific CSS declaration -moz-font-feature-settings: "lnum=1";.

See also Christopher Slye’s article on Typblography, OpenType Features Come to the Web.

Syndicate content Syndicate content