Georgia font: old-style numeral 0 looks similar to lowercase o
Closed this issue · 25 comments
Also noted by others:
http://nedbatchelder.com/blog/200805/bad_web_type_georgias_numerals.html
http://meta.unix.stackexchange.com/questions/716/question-title-font-renders-0-number-zero-much-like-o-lower-case-letter
The later's fix — insert Liberation Serif before Georgia — makes me wonder if this is only a problem for linux's Georgia?! (Or were they simply assuming the audience of unix.SE would mostly have Liberation Serif?)
Experimenting with unicode-range overriding just the digits in Georgia.
Original (ubuntu with msttcorefonts/Georgia.ttf):
With simply local(serif) for digits => DejaVu Serif on my ubuntu:
Somewhat ugly and will vary too much across systems.
With Times, its way worse, the digits are horribly narrow:
With Bitstream Charter for digits:
URW Bookman L looks like best match for Georgia [thanks to this 2010 post]:
but the digit 1 looks exactly like the lowercase L which is a deal-breaker (recall that I started out wanting to fix lowercase o vs digit 0) :-(
Of course I'll have to test any combo across systems, including browsers that don't understand unicode-range...
Ideally I'd like a way to declare "use these replacements but only if you're actually using Georgia". I don't see a CSS way to do that, though maybe removing digits from Georgia would be close? In practice Georgia is everywhere except linux (without msttcorefonts) and android (Droid).
A more radical change might be abandoning Georgia. Pallatino maybe? But I like Georgia's proportions and really its italic :-)
P.S. font-variant-numeric doesn't help, it's only Firefox and I don't think Georgia has variant digit glyphs.
I for my part consider numbers like “1234567890” a lot harder to read than “$1234567890$”. And the different appearance between numbers in prose and numbers in LaTeX formulas looks somewhat inconsistent. Furthermore, the non-lining “0” is a lot easier to mistake for a letter “o” than the lining “$0$” for “O”.
This reminds me that what I most probably want if I don't use the native font's digits is to use MathJax's digits! Except that matching x-height might get tricky.
Similar concerns on EE meta (but EE has switched to Helvetica/Arial since):
http://meta.electronics.stackexchange.com/questions/2511/change-the-way-digits-are-displayed-get-rid-of-non-lining-digits
http://meta.electronics.stackexchange.com/questions/2571/didnt-we-switch-the-site-style-to-use-lining-numerals
Liberation Serif:
First line is very similar to Times:
(is Liberation Serif what Times resolves to on my ubuntu?) but italic and/or bold are even narrower - Times' are acceptable.
On the plus side, Liberation Serif has more distinguishable 0/O and 1/l; Times italic capital O is almost like digit 0.
Counter-opinion: some people argue that it's good for text to include numbers in different style when they have "non-matematical" sense.
- http://meta.math.stackexchange.com/questions/10317/why-does-the-font-use-text-figures-lowercase-digits#comment38307_10317
-
Different kinds of numerals for different kinds of numbers. The visual contrast helps the mind put each number in the appropriate context and makes reading more efficient. — https://linyangchen.wordpress.com/2014/08/15/typographic-refinements-of-thesis-design-in-latex/
That may be true, but mathdown is shooting for easy writing without considering fine details. I certainly want text numbers & math numbers to look the same — if I can pull it off.
Tried math digits:
As expected, directly using the font doesn't match x-height like MJ does.
The first is smaller and very narrow, a-la Times.
Wait, the above uses "STIXMathJax_Main" font but MJ itself uses "MathJax_Main" font. They are differently shaped.
Aha. That's where the MJ bold-italic problem comes from: MathJax_Main comes from MathJax/fonts/HTML-CSS/TeX/ and has only has {Bold,Italic,Regular} variants. The only BoldItalic is STIX (which I don't like, too thin) and MathJax_Math-BoldItalic, which has no digits (it's mostly latin & greek letters)!
URW Palladio L:
Hmm. That's as narrow as Times (regular) and Liberation Serif.
It looks good, except for way too tight kerning — especially see italic "0th" and "4rd".
I'm coming around to Times on kerning grounds? Must check on different systems. Should also try lossening kerning by CSS.
The above screenshots more or less exhaust my arsenal of cross-system (or matchable, e.g. Palladio/Palatino) serif fonts.
But for just digits, it'd be fine to serve a tiny web font. E.g. I could extract digits from Bitsream Charter (which is only installed on Linux).
Crazy experiment: monospace digits(!?), specifically Courier 10 Pitch:
Not that bah, great digit-text kerning but too much digit-digit spacing and the zero is an atrocity.
Alas, letter-spacing applies to the whole font stack. Don't see a way to apply to one @font-face.
(font-stretch is irrelevant, it's when same font includes wide/condensed variants)
Ooh, a tiny web font is great idea to avoid unicode-range support issues.
Turns out Firefox still has it behind flag, with the nasty implication that the digits font will be used for everything.
Yet some browsers invalidate the whole @font-face declaration, so punching a hole in Georgia wouldn't portably work either. (Though "Georgia range -29,40-, lining range 30-39, full Georgia" might work?)
There is a more robust approach: I can easily make CodeMirror add a class to all digits. For some reason that feels "ugly", but I think I'll start with that as the simplest and will postpone unicode-range to a day when I want to waste time...
Screenshots for Palatino & friends with unicode range:
http://app.crossbrowsertesting.com/public/i866dfd0fa0b9da1/screenshots/z453c1fd2acf1f9e99b9
(top is the digit-replacing stack, bottom is pure Georgia)
- Firefox applies Palatino to all chars :-(
- IE8 shows only Georgia. :-), because unlike Firefox, that's a fine failure mode.
- Works in IE 9+ and Edge. digit-text kerning is tight.
- Works on Chrome. kerning is mostly fine, but tight on XP/Chrome 43.
- Works on OSX Safari 8 and iOS 8 Mobile Safari. kerning is fine. On iOS looks somewhat bad — digits are too narrow and light.
- Ubuntu & android inconclusive, didn't have real Georgia.
Tried a "double sandwich": georgia without digits, only digits, full georgia.
http://codepen.io/cben/pen/RWgZJg
In theory it should solve Firefox, in practice it's broken even in my chrome in strange way: letters are clearly not georgia, despite debugger claiming they are.
Digits generally respond correctly to changes of unicode-range, in both sandwich layers.
Could using same font twice trigger a browser bug?
shots: http://app.crossbrowsertesting.com/public/i866dfd0fa0b9da1/screenshots/z75e37c664703d2286b7
Here is an example in Firefox:
digits are Georgia while the word "Georgia?" is not?!
I started experimenting with a webfont: Charter.
http://codepen.io/cben/pen/jbLPyo =>
[EDIT] http://app.crossbrowsertesting.com/public/i866dfd0fa0b9da1/screenshots/z14388354498df38c93c
=> Perfect compatibility!
Replaced digits everywhere except IE8; didn't inhibit Georgia for other characters anywhere;
looks fine on platforms lacking Georgia (android, ubuntu).
And kerning looks OK everywhere!
Charter digits subset is 15k as WOFF CSS (9k gzipped) which is a non as negligible as I hoped, but not too heavy (for reference, mathdown currently loads 474 KB from site + order of 30KB from firebase).
Should also test Merriweather Serif which is (so far, might change) metric-compatible with Georgia
[https://ebensorkin.wordpress.com/2015/02/06/the-updated-free-merriweather-is-finally-available-from-font-squirrel/].
This is not a guarantee they'll mix well but does sound promising, as well as allowing less noticable FOUT.
[http://miranj.in/blog/2015/collateral-damage has good arguments why FOUT is the only low-bandwidth-user friendly option for web fonts.
Nevertheless, if it's a web font I'm seriously considering putting the font in critical path (via data uri?). A big point of unicode-range is to let browser avoid loading until those chars are needed — but it'd be unacceptable for only digits in the text to appear later, and somewhat strange for them to change shape (also requiring detecting they loaded and refreshing CodeMirror).
OTOH, if it's something that linux already has, e.g. Charter, it's better to make it a separate file — which puts me at the browser's mercy wrt to FOIT/FOUT.]
Charter (top) vs MathJax digits:
Hmm. I'm not going to match that fancy italic (recall that MathJax font has no bold italic) but that's rare enough; it'd be nice to better match the normal italic though (eg closed 6, 9)?
However some users would get STIX which my Charter digits resemble sufficiently. Can't match for everyone without going through MJ...
BTW, mathdown docs regularly include monospace digits, if only in numbered lists:
That makes 3 number styles to confuse the user — text, math, list numbers/mono :-(
Turns out MathJax font is directly derived from Computer Modern, which I can easily get in all 4 bold/italic styles:
http://www.fontsquirrel.com/fonts/Latin-Modern-Roman
https://www.ctan.org/tex-archive/fonts/lm
(Latin Modern is improved Computer Modern with better coverage; same from my pov)
LM Roman even has "table numerals" (equally spaced digits) which is not a bad quality for "universal" digits (it also has proportional and/or old style variants).
http://ctan.mirrorcatalogs.com/fonts/lm/doc/fonts/lm/lm-info.pdf
Not a perfect size match to MathJax but looks fine (Chrome, Ubuntu with msttcorefonts):
Kerning is fine too, but needs cross-platform check.
BTW, Latin Modern's license, essentially equivalent to the Latex license, has lots of conditions for modifying. I've been writing legalese for most of yesterday and I'm still at it :-(
The fact the Font Squirrel generator is a proprietary tool seems OK but muddles the issue somewhat.
Perhaps I should not be lazy and learn font tools myself...
P.S. I should have known a priori that a font called "Latin Modern" will involve legalese ;-)
Testing Latin Modern:
http://app.crossbrowsertesting.com/public/i866dfd0fa0b9da1/screenshots/z7af72040f8bf218ce4d
=>
- Didn't work under IE 9, 10, 11 (shows pure Georgia)?! Deal breaker.
- It's ugly (especially the italics) on all Windows browsers it works on.
The lines are too thin compared to surrounding letters, and at some points the line disappears!
MS Edge is slightly thin, Opera and Chrome are thinner, Firefox is most broken:
- It's pretty on all Mac browsers. A bit thin on iPad.
- A bit thin compared to Charter and Droid Serif on ubuntu and android that don't have Georgia.
Verdict
I'm not gonna debug this on IE. (Random guess: my font-family name is too long?)
=> I'll use Charter for the digits. Yay! I'm free of the legalese! :-)
I'm not gonna debug this on IE. (Random guess: my font-family name is too long?)
OK, couldn't resist. Shortened font-family name from 36 to 25.
=> Yep, fixed on IE9+
http://app.crossbrowsertesting.com/public/i866dfd0fa0b9da1/screenshots/z0e9acf80d6ab888c3c5
Still, the weight is too thin (plus perhaps hinting issues) which I can't fix.
Charter it is.
Finished my Latin Modern legalese work out of stubborness.
Not pushing it into the mathdown repo as there is chance I'm not 100% compliant.
(would be easier if I knew my way around free font tools instead of Font Squirrel's black box).
Dumped here instead: https://gist.github.com/cben/3379f483aecf8e531474
It occurs to me now that I could mostly avoid the thinness issue if I used the MathJax font for regular, bold, italic and Latin Modern only for bold italic. Nah.
Bonus: Turns out Charter digits are also "tabular" (equal-width):
Deployed.
Run Webpagetest before and after, no measurable performance difference.
Should also test Merriweather Serif which is (so far, might change) metric-compatible with Georgia
Nope, it also has old-style figures. Pro version has lining figures (https://twitter.com/merriweatherfnt/status/432061982305693696).
FYI for anyone coming across this via Google, the URW foundry's donated "URW Bookman L" has seen some improvements since its initial inclusion in Ghostscript: http://www.tug.dk/FontCatalogue/tegyrebonum/
Thanks. If you want more people to find via google, https://graphicdesign.stackexchange.com/questions/7284/looking-for-a-font-similar-to-georgia-but-without-the-numbers-dipping-as-they-d is probably a more visited place.
For me TEX Gyre Bonum is still unacceptable for same reason as Bookman L — its digit 1 is too similar to Georgia's lowercase letter l.