9 ms·

Computer Modern on the Web

67 points by phaer 13y ago

ivan_ah 13y ago
This is very cool and will allow for a consistent appearance of book math content both online and offline. Something about the cm fonts gives them an air of respectability. Thx for porting these fonts!
rz2k 13y ago
I use Computer Modern Typewriter Oblique (which is plain slanted) for my font in terminals and text editors. I really like how it looks. Unfortunately, some IDEs like IntelliJ ignore the oblique part and print the characters upright. However oblique is compatible with syntax highlighting that uses italics, because the true italic form of CM Typewriter resembles a script typewriter. Anyway, I always consider adding CM Typewriter Oblique to lists of the best monospaced fonts, but consider that maybe it will come across as too "hipster".
sp332 13y ago
From the transcript on this video http://www.webofstories.com/play/donald.knuth/55;jsessionid=D59822370796D1D8524FA73E19509C52 http://www.webofstories.com/play/donald.knuth/55;jsessionid=... Well, I came up with 25 of the 26 letters in the middle of June and they weren't beautiful but they were pretty close to being okay to my eyes at the time, but then there was the letter S. And I couldn't figure out how to draw a blasted S. And it has a very peculiar shape where it changes over from curves left, then right a little bit, and then back and forth, and what's going on in this shape. None of my mathematical formulas would handle it. And I spent several days without sleep up at the lab, trying different things and every time it would just look very ugly. And finally, I had to come home and go to bed and I showed my results to Jill and she said to me, ‘Well Don, why don't you make it s-shaped?’
fidotron 13y ago
I swear that a good amount of the TeX love is cargo culting, including any appreciation of Computer Modern, which is a seriously ugly typeface. It's almost as if adopting it for the web is simply a grasp for mathematical credibility more than any real aesthetic consideration. Note: I'm not criticising TeX, but changing fonts away from CM is about the first thing anyone concerned with quality output should be doing.
- twowordbird 13y ago
  Somebody always posts this comment re: Computer Modern, but I've never seen anybody offer up some of these strictly superior printing fonts (of which there are apparently many). Would you care to link some examples?
  - fidotron 13y ago
    Junicode is a far better classic serif, for example.
  - nwhitehead 13y ago
    I prefer Palatino when typesetting mathematics using latex. It looks nicer than Computer Modern and is super easy to use. Nowadays I use xelatex and actual fonts instead of staying stuck in the tex font ghetto. http://www.tug.dk/FontCatalogue/palatino/ http://www.tug.dk/FontCatalogue/palatino/
    - jasomill 13y ago
      Similarly, I've had nice results combining Zapf Renaissance Antiqua text (via XeTeX fontspec) with Palatino maths and Optima headings.
  - pseut 13y ago
    I've become a fan of bitstream charter lately[1], available through the mathdesign package \usepackage[bitstream-charter]{mathdesign} I am not a designer, but I think it looks good with adobe's source code pro[2]: \usepackage{sourcecodepro} [1] http://www.myfonts.com/fonts/bitstream/charter/ http://www.myfonts.com/fonts/bitstream/charter/ [2] http://store1.adobe.com/cfusion/store/html/index.cfm?event=displayFontPackage&code=1960 http://store1.adobe.com/cfusion/store/html/index.cfm?event=d...
  - ska 13y ago
    The main problem isn't supporting other text fonts (including TTF), but the fact that those fonts don't properly support the symbols. So all in all it's a bit of a nasty aesthetic trade-off. There are several packages that attempt to create symbol sets to match things like palatino, with varying success. Some are just terrible. And there are a few commercially available ones that do support most if not all symbols, so if it's worth a few hundred dollars to you there is that route. Nothing has great solution for web, really. We're slowing moving from execrable to ugly but at least it is progress.
pnathan 13y ago
Sweet! For some reason, I find Computer Modern to be perhaps the most beautiful serif font I've come across, handily beating out any competitor I've looked at.
Millennium 13y ago
Glad to hear it. I've been thinking about blogging a read-through of Knuth, and I wanted to use the font as an homage.
DanBC 13y ago
edit: This is my connection! Sorry. http://imgur.com/KovolXb http://imgur.com/KovolXb Using Chrome (latest?) on Vista. Pink blobs are near, not on, flaws.
- twotwotwo 13y ago
  Chrome beta is doing this to me on a lot of sites that load Web fonts. It's like it laid out the page using the metrics from the Web font, but then rendered it using a system fallback font.
  - leephillips 13y ago
    It's a tradition: http://lee-phillips.org/google-chromeBadKerning/ http://lee-phillips.org/google-chromeBadKerning/
- TylerE 13y ago
  Looks great here: http://i.imgur.com/Wmh9oel.png http://i.imgur.com/Wmh9oel.png Google Chrome 31.0.1650.63 (Official Build 238485) OS Mac OS X
- rsofaer 13y ago
  Yeah, the page is pretty messed up on my Chrome/Win7 also.
brennen 13y ago
I think that most of what I appreciate about Computer Modern is that it sends the neighborhood font nerds into fits of white-hot rage every time I use it.
noelwelsh 13y ago
Here's an article typeset in Computer Modern that was recently on the HN frontpage: http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/ http://swannodette.github.io/2013/12/17/the-future-of-javasc... Great article, but ZOMG is the typesetting atrocious! Look at the kerning between F and u in Future, and a and S in JavSscript. So, so bad. Knuth's contribution to typography was great for its time but with so many excellent free fonts available we have moved beyond the need for Computer Modern.
- taeric 13y ago
  Knuth's contribution to typography was far greater than a single font. Just saying. I'm curious to see that article actually typeset with his work.
- leephillips 13y ago
  Do these kerning problems have anything to do with the design of Computer Modern or with TeX? I don't think so; whatever you're seeing on that page results from the interaction of your browser, the markup, and the MathJax scripts.
- reeses 13y ago
  A bigger kern on the 'f' in 'future' would create a ligature. I suspect the web font and, more importantly, the HTML creator would not perform the substitution.
SeanLuke 13y ago
I really dislike Computer Modern. I think it is an amateur typeface. Its italic glyphs are at different angles from one another. None of its bowls are consistent. It has strange and discordant differences in thicknesses across letters. The serif fonts are mangled in kerning and positioning in really weird ways. And the roman is extremely wide, extremely thin, and surprisingly hard to read when used for its primary purpose: papers. I think CM is predominant in TeX not because it's a good looking typeface. It's not predominant in TeX because it's nicely compatible with provided math symbols (which it is). CM is predominant only because for a very, very long time it was the only option available, and so people got used to scientific papers being "supposed" to look like that. But this is not a field known for its typesetting aesthetics: heck even as late as 2003 the large majority of these papers were still using the CM bitmaps rather than vector fonts, resulting in an unreadable mess when converted to PDF files. Tables are written so as to absolutely maximize the number of horizontal and vertical rule lines you can possibly stuff into a text table. The ACM's official style file is so awful and broken that multiple style files have been created to secretly patch it. Some have historically been filled with swear words. And I cannot count the number of papers nowadays which write things like $foo$, not realizing that this de-kerns the letters. Also, it appears the version from this link is missing its kerning.
- ubercow13 13y ago
  What might a paper use $foo$ for? Aside from a product of three variables which presumably shouldn't be kerned
  - deleted 13y ago
    [deleted]
  - Athas 13y ago
    A multi-letter variable name.
illicium 13y ago
Even if you use a Computer Modern webfont, your page won't look even remotely as good as if it was produced using TeX. Browsers are lacking proper justification (Knuth-Plass line breaking), hyphenation (which kind of exists in CSS3), microtype optimizations (e.g. hanging punctuation) and automatic ligatures. There are some hacks [1] to solve these issues, but easy immaculate typography on the web is currently a no-go. [1] http://www.bramstein.com/projects/typeset/ http://www.bramstein.com/projects/typeset/
cec 13y ago
I absolutely love the "Bright" font, and have immediately started using it [1]. It didn't quite look right on the headings though, so I'll stick with Open Sans for those. [1] http://chriscummins.github.io/ http://chriscummins.github.io/

67 points by phaer 13y ago

This is very cool and will allow for a consistent appearance of book math content both online and offline. Something about the cm fonts gives them an air of respectability. Thx for porting these fonts!

rz2k 13y ago

I use Computer Modern Typewriter Oblique (which is plain slanted) for my font in terminals and text editors. I really like how it looks. Unfortunately, some IDEs like IntelliJ ignore the oblique part and print the characters upright. However oblique is compatible with syntax highlighting that uses italics, because the true italic form of CM Typewriter resembles a script typewriter. Anyway, I always consider adding CM Typewriter Oblique to lists of the best monospaced fonts, but consider that maybe it will come across as too "hipster".

sp332 13y ago

From the transcript on this video http://www.webofstories.com/play/donald.knuth/55;jsessionid=D59822370796D1D8524FA73E19509C52 http://www.webofstories.com/play/donald.knuth/55;jsessionid=... Well, I came up with 25 of the 26 letters in the middle of June and they weren't beautiful but they were pretty close to being okay to my eyes at the time, but then there was the letter S. And I couldn't figure out how to draw a blasted S. And it has a very peculiar shape where it changes over from curves left, then right a little bit, and then back and forth, and what's going on in this shape. None of my mathematical formulas would handle it. And I spent several days without sleep up at the lab, trying different things and every time it would just look very ugly. And finally, I had to come home and go to bed and I showed my results to Jill and she said to me, ‘Well Don, why don't you make it s-shaped?’

fidotron 13y ago

I swear that a good amount of the TeX love is cargo culting, including any appreciation of Computer Modern, which is a seriously ugly typeface. It's almost as if adopting it for the web is simply a grasp for mathematical credibility more than any real aesthetic consideration. Note: I'm not criticising TeX, but changing fonts away from CM is about the first thing anyone concerned with quality output should be doing.

twowordbird 13y ago
Somebody always posts this comment re: Computer Modern, but I've never seen anybody offer up some of these strictly superior printing fonts (of which there are apparently many). Would you care to link some examples?
- fidotron 13y ago
  Junicode is a far better classic serif, for example.
- nwhitehead 13y ago
  I prefer Palatino when typesetting mathematics using latex. It looks nicer than Computer Modern and is super easy to use. Nowadays I use xelatex and actual fonts instead of staying stuck in the tex font ghetto. http://www.tug.dk/FontCatalogue/palatino/ http://www.tug.dk/FontCatalogue/palatino/
  - jasomill 13y ago
    Similarly, I've had nice results combining Zapf Renaissance Antiqua text (via XeTeX fontspec) with Palatino maths and Optima headings.
- pseut 13y ago
  I've become a fan of bitstream charter lately[1], available through the mathdesign package \usepackage[bitstream-charter]{mathdesign} I am not a designer, but I think it looks good with adobe's source code pro[2]: \usepackage{sourcecodepro} [1] http://www.myfonts.com/fonts/bitstream/charter/ http://www.myfonts.com/fonts/bitstream/charter/ [2] http://store1.adobe.com/cfusion/store/html/index.cfm?event=displayFontPackage&code=1960 http://store1.adobe.com/cfusion/store/html/index.cfm?event=d...
- ska 13y ago
  The main problem isn't supporting other text fonts (including TTF), but the fact that those fonts don't properly support the symbols. So all in all it's a bit of a nasty aesthetic trade-off. There are several packages that attempt to create symbol sets to match things like palatino, with varying success. Some are just terrible. And there are a few commercially available ones that do support most if not all symbols, so if it's worth a few hundred dollars to you there is that route. Nothing has great solution for web, really. We're slowing moving from execrable to ugly but at least it is progress.

pnathan 13y ago

Sweet! For some reason, I find Computer Modern to be perhaps the most beautiful serif font I've come across, handily beating out any competitor I've looked at.

Millennium 13y ago

Glad to hear it. I've been thinking about blogging a read-through of Knuth, and I wanted to use the font as an homage.

DanBC 13y ago

edit: This is my connection! Sorry. http://imgur.com/KovolXb http://imgur.com/KovolXb Using Chrome (latest?) on Vista. Pink blobs are near, not on, flaws.

twotwotwo 13y ago
Chrome beta is doing this to me on a lot of sites that load Web fonts. It's like it laid out the page using the metrics from the Web font, but then rendered it using a system fallback font.
- leephillips 13y ago
  It's a tradition: http://lee-phillips.org/google-chromeBadKerning/ http://lee-phillips.org/google-chromeBadKerning/
TylerE 13y ago
Looks great here: http://i.imgur.com/Wmh9oel.png http://i.imgur.com/Wmh9oel.png Google Chrome 31.0.1650.63 (Official Build 238485) OS Mac OS X
rsofaer 13y ago
Yeah, the page is pretty messed up on my Chrome/Win7 also.

brennen 13y ago

I think that most of what I appreciate about Computer Modern is that it sends the neighborhood font nerds into fits of white-hot rage every time I use it.

noelwelsh 13y ago

Here's an article typeset in Computer Modern that was recently on the HN frontpage: http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/ http://swannodette.github.io/2013/12/17/the-future-of-javasc... Great article, but ZOMG is the typesetting atrocious! Look at the kerning between F and u in Future, and a and S in JavSscript. So, so bad. Knuth's contribution to typography was great for its time but with so many excellent free fonts available we have moved beyond the need for Computer Modern.

taeric 13y ago
Knuth's contribution to typography was far greater than a single font. Just saying. I'm curious to see that article actually typeset with his work.
leephillips 13y ago
Do these kerning problems have anything to do with the design of Computer Modern or with TeX? I don't think so; whatever you're seeing on that page results from the interaction of your browser, the markup, and the MathJax scripts.
reeses 13y ago
A bigger kern on the 'f' in 'future' would create a ligature. I suspect the web font and, more importantly, the HTML creator would not perform the substitution.

SeanLuke 13y ago

I really dislike Computer Modern. I think it is an amateur typeface. Its italic glyphs are at different angles from one another. None of its bowls are consistent. It has strange and discordant differences in thicknesses across letters. The serif fonts are mangled in kerning and positioning in really weird ways. And the roman is extremely wide, extremely thin, and surprisingly hard to read when used for its primary purpose: papers. I think CM is predominant in TeX not because it's a good looking typeface. It's not predominant in TeX because it's nicely compatible with provided math symbols (which it is). CM is predominant only because for a very, very long time it was the only option available, and so people got used to scientific papers being "supposed" to look like that. But this is not a field known for its typesetting aesthetics: heck even as late as 2003 the large majority of these papers were still using the CM bitmaps rather than vector fonts, resulting in an unreadable mess when converted to PDF files. Tables are written so as to absolutely maximize the number of horizontal and vertical rule lines you can possibly stuff into a text table. The ACM's official style file is so awful and broken that multiple style files have been created to secretly patch it. Some have historically been filled with swear words. And I cannot count the number of papers nowadays which write things like $foo$, not realizing that this de-kerns the letters. Also, it appears the version from this link is missing its kerning.

ubercow13 13y ago
What might a paper use $foo$ for? Aside from a product of three variables which presumably shouldn't be kerned
- deleted 13y ago
  [deleted]
- Athas 13y ago
  A multi-letter variable name.

illicium 13y ago

Even if you use a Computer Modern webfont, your page won't look even remotely as good as if it was produced using TeX. Browsers are lacking proper justification (Knuth-Plass line breaking), hyphenation (which kind of exists in CSS3), microtype optimizations (e.g. hanging punctuation) and automatic ligatures. There are some hacks [1] to solve these issues, but easy immaculate typography on the web is currently a no-go. [1] http://www.bramstein.com/projects/typeset/ http://www.bramstein.com/projects/typeset/

cec 13y ago

I absolutely love the "Bright" font, and have immediately started using it [1]. It didn't quite look right on the headings though, so I'll stick with Open Sans for those. [1] http://chriscummins.github.io/ http://chriscummins.github.io/