Some thoughts about fonts (for math)

— Posted inDesign, Uncategorized — 3 min read

What fonts to use for a website that relies heavily on Unicode is quite difficult. Sometimes the look of a font, though quite important to make a good typographic impression, is not of the same importance as a full support of all glyphs you need to show.

While sorting the characters of a Math Keyboard for the JavaScript Graphical / Virtual Keyboard Interface I stumbled over the problem that there is only a small selection of fonts which offer a decent support of the necessary Unicode glyphs. Whereas it would be better for the VKI layout to use a monospace font, especially when it comes to mathematic symbols but true for other “esoteric” symbols too, there are too few monospace fonts installed on the average users system that provide a good Unicode support – even worse:

There are hardly any good (preferably free) monospace fonts available at all.

So, back to the sans-serif family – but:

  • Which one to use?
  • In which order?
  • What to use as fall-back fonts apart from the generic families?

If you use the following declaration:

font-family: Arial, "Lucida Sans Unicode", "Lucida Grande";

all will get messed up because the first font matches on 99.xx% of all MS Windows based systems and several *X*-oid systems too. In this case a character will be taken from “Lucida xxxx” only if it is not matched by Arial, which btw. offers a poor Unicode support – not to be confused with “Arial Unicode MS” which has an excellent support for every days use.

Example of the differences:

  • This is a ⨑ in Arial
  • This is a ⨑ in Lucida Sans Unicode
  • This is a ⨑ in DejaVu Sans

There is a high chance that you might not see the “‘ANTICLOCKWISE CONTOUR INTEGRAL’ (U+2233)” symbol between “a” and “in” at all if you don’t have “DejaVu Sans” installed – but you can see the different widths and heights, kerning and hinting of the fonts anyway. You can hit the “+” key of your keyboard several times to zoom into the page and see the differences in detail if you are using Opera.

The same goes for the Mac font-families Helvetica and Lucida Grande, which come with the system by default.

When it comes to Linux or other *X*-oid systems the situation becomes worse because you can never know what fonts came with the distribution and what fonts didn’t.

So precedence of your font declarations is important, if you want to provide a good Unicode support.

Here is my sorted font stack for an optimized Math display (but this would match most of the other Unicode characters in a very good way too):

{font-family: "Lucida Sans Unicode", "Lucida Grande", "DejaVu Sans", "Arial Unicode MS", Arial, Helvetica, sans-serif;}

Just try it out, its easy to use, but your mileage in CSS-font-stacks may vary.

8 replies on “Some thoughts about fonts (for math)”

  2. yepp, the example has fixed font height because i wanted the math sign to be visible even with the default setting.

    BTW: I userCSSed the whole site anyway, so I can see nice fonts and decent sizes and utilize the full width of the window 😉

  3. @WOFall
    Updated the post, replaced px by em and increased the line height. Increasing the general font size should work now for the example too 🙂

    …. and no, webfonts are normally quite poor when it comes to math. May be someone will build a decent monospace math font at some time. I would do it if I could get my (very) old fontographer to work under the new OS but it seems I am out of luck. A new license is too expensive for my taste (I can afford it, but I don’t want to bail out some hundred bucks for that. That would be different if I were a professional font designer, then it would be cheap because the software is really great – it is for fonts what the Adobe creative suite is for images)…

  4. The way css is supposed to work, you should not need to have symbols and text in the same font. You can bind fonts to languages, and you can (and should) use semantic markup to separate the formulas from the text. This is especially elegant in html5.

    I am very much in favour of using webfonts, but svg with embedded fonts is also a good way to support more advanced layout.

    There are some useful links and hints on:
    http://symbolcodes.tlt.psu.edu/bylanguage/math.html#browsers

  5. Of course I can bind fonts to languages and use SVG etc. pp. but there is always the problem: Is the font installed at the user side? What precedence should I set in the font stack?

    There is the option to build the whole page in SVG, off course, but that is not really accessible too, especially if you allow users to edit or comment. Then you need either a ton of JS (evil stuff :D). Furthermore SVG support in some browsers is pathetic at best.

    Yes, semantic markup is extremely important, but try to do that in a comment like this …

    Please don’t say webfonts. Most of them have bad kerning, several have a poor support for math and – what is worst: They pollute the web with extra downloads (which in the end pollutes the environment too. The energy that is needed to store and transport the bits doesn’t come for free. About 70kB to 100kB of extra download need as much as heating up a small cup of coffee from room temperature to drinking temperature ;))

    … and thanks for the reminder, I have bookmarked that site for some years and take the occasional view at it 😀

  7. Re: Unpractical specifications. This is a widespread problem. There are engineers, architects, etc, who design things. When the construction crews get the blueprints they have to make changes, sometimes big changes, just to get the plans to work in reality. They have to move fixtures, walls, etc, because the designer didn’t think about, f.ex., you can’t wield a necessary tool in an incompatible space. Of course you can solve this problem by accepting only designs/blueprints from architects who have practical hands-on experience and create their specs accordingly.

  8. appending to your last sentence:
    … which would leave you in the end stuck with things that “were good for our forefathers”. I think I heard some people complain about the “glacial speed” of the W3C while trying to adopt new things …

Comments are closed.