Don Knuth’s TeX is a computer typesetting system frequently used, loved, and cursed by mathematicians, computer scientists, and other academics. LaTeX is a document preparation system built on top of TeX — it’s actually the way most people who use TeX use it. I thought it’d be fun to write up how to mark up and style the TeX and LaTeX logos in and CSS. I think my solution looks nice, is semantic, and degrades gracefully.

When writing TeX and LaTeX in plain text, people traditionally write TeX and LaTeX. So that’s where we’ll start things out, by simply writing TeX and LaTeX in our HTML. It’s nice to keep this as the textContent of the markup, so that text-mode browsers get something appropriate and idiomatic.

We’ll need elements for the ‘a’ in LaTeX and for the ‘e’ in both. While sub and sup immediately come to mind, given the (very) rough semantic match and their default rendering, I don’t think the decision to go with them is clear-cut. If you think using them in this case is semantically abusive, go ahead and substitute spans in for them. You’ll need to adjust some of my CSS selectors as well.

T<sub>e</sub>X
L<sup>a</sup>T<sub>e</sub>X

Now we have TeX and LaTeX. I’d like to make the A and E uppercase, by using a text-transform CSS rule, but I don’t want to apply such a style willy-nilly to sub and sub elements. Looks like we need some kind of wrapper element.

.tex sub, .latex sub, .latex sup {
  text-transform: uppercase;
}<span class="tex">T<sub>e</sub>X</span>
<span class="latex">T<L<sup>a</sup>T<sub>e</sub>X</span>

That produces something along these lines: LATEX. Not bad, but not great either. Let’s try to get the kerning right. The TeXbook defines the \TeX macro like so:

\def\TeX{T\kern-.1667em\lower.5ex\hbox{E}\kern-.125emX}

This translates into CSS easily; the units are exactly the same.

.tex sub, .latex sub {
  vertical-align: -0.5ex;
  margin-left: -0.1667em;
  margin-right: -0.125em;
}

There’s a catch, though: the \TeX macro presumes that the E is the same size as the T—but by default, browsers reduce the font size of sub. So let’s squash any strange font sizing (while still respecting the surrounding page’s type choices):

.tex, .latex, .tex sub, .latex sub {
  font-size: 1em;
}

We’re done with the E, and can now write TeX with abandon. Let’s move on to \LaTeX’s A. I found the definition of \LaTeX in an essay by David Walden:

\def\LaTeX{%
  L\kern-.36em
  {\setbox0=\hbox{T}%
    \vbox to \ht0{\hbox{\the\scriptfont0 A}\vss}}%
  \kern-.15em
  \TeX
}

Take another look at its output: LaTeX. The A is reduced in size, but moved up so that the top of the A is on the same line as the top of the adjacent T. We can emulate this in CSS by doing two things: first, reducing the sup’s font size to some portion of 1 em, and then increasing its vertical-align by the difference, so that font-size and vertical-align add up to 1 em, the height of the T. We can handle the kerning just like before.

Here’s what I ended up with:

.latex sup {
  font-size: 0.85em;
  vertical-align: 0.15em;
  margin-left: -0.36em;
  margin-right: -0.15em;
}

And there you have it. Markup for the TeX and LaTeX logos which look nice, are independent of typeface and other page styles, and degrade reasonably well.


If you found the above at all interesting, you should definitely check out The Elements of Typographic Style Applied to the Web: A practical guide to web typography.

Comments

  1. I didn't thought that LaTeX has text logo :) Good to know.

    erpcrm, 18 December 2008

  2. Thank you. This is exactly what I looked for.

    Yogsototh, 26 October 2010

Add a comment

Posting...