Programming fonts

http://s9w.github.io/font_compare/?rp

by s9w • 11 years ago

72 69 11 years ago

s9w.github.io

tomswartz07• 11 years ago

This is very useful!

I've been a big fan of Droid Sans Mono for the longest time, and my biggest complaint was the lack of 'crossed' zeroes.

Roboto does have the crossed zeroes, but it seems a bit less crisp than Droid Sans to me.

grigio• 11 years ago

Nice! I'd like to change the default string to see how it renders in different fonts

s9w11• 11 years ago

You mean change it dynamically on the site? I wouldn't know how that would be possible. That would rely on browser rendering which is probably quite tricky to get it to look exactly like in editors. Not even mentioning the hassle with all the fonts and settings

JoshTriplett2• 11 years ago

One possibility: what if you used a version of libfreetype or similar, compiled via emscripten, and run it on the client?

pbnjay• 11 years ago

Looks pretty neat! - Can you render the fonts at higher DPI? It doesn't look good on a retina screen at all.

Ex: http://i.imgur.com/HiclAPI.png

s9w11• 11 years ago

Well screenshots are just screenshots and are dpi-indepandant. But the compare mode has a 2X zoom button for this. Not enough? I could use bigger font sizes, but that's not without trouble

sabarjp2• 11 years ago

The problem is that non-retina images get doubled in size on a retina display, so it looks blurry. I suggest providing 2x sized images. You can use media queries to show different sized images or rely on down-sampling. There's a few different strategies.

sabarjp2• 11 years ago

Looks like all the font strings are images (makes sense, most of those aren't web fonts). I would also love retina images, since fonts can look vastly different between say, a MacBook Pro, a windows desktop at 1080p, or a low resolution remote desktop.

micampe2• 11 years ago

Unless it’s using the same rendering engine for the images that your OS uses it’s pointless anyway, as demonstrated by the fact that there is a “renderer” option on the page itself.

This is only meaningful as a comparison between those two renderers on an unspecified version of Windows.

baldfat4• 11 years ago

When you say Retina you mean high dpi since retina is just a trade marked word for dpi of 220 inches or higher and means different things at different models.

Sorry to be a stickler but Retina is a worthless term and just causes confusion.

CognitiveLens2• 11 years ago

To any non-tech person, "high DPI" is probably more likely to cause confusion and is just as variable in definition. To (almost) any tech person, "retina" is common enough that everyone knows what you're talking about.

Being trademarked doesn't really affect the meaning of a word once it's part of popular parlance - Kleenex, Band-Aid, Hoover, Google...

micampe2• 11 years ago

If you really want to be a stickler you should use PPI, not DPI.

buster• 11 years ago

Why is Comic Sans missing?

psychometry• 11 years ago

No Menlo?

s9w11• 11 years ago

I don't know if I am allowed to use it. It's from Apple, no?

joosters• 11 years ago

From the Font Book application: (sorry for the formatting. EDIT: Hey, it sort of worked!)

  Manufacturer	Bitstream
  Designer	Jim Lyles
  Copyright	Copyright © 2009 Apple Inc. Copyright ©  2006 by Tavmjong Bah. Copyright © 2003 by Bitstream, Inc. All Rights Reserved.
  Trademark	Menlo is a Trademark of Apple Inc.
  Description	Menlo is based upon the Open Source font Bitstream Vera and the public domain font Deja Vu. Bitstream Vera is a trademark of Bitstream, Inc., designed by Jim Lyles.
  Enabled	Yes
  Duplicate	No
  Copy protected	No

I don't know if that helps you or not? But presumably you can show images of the font in any case.

theophrastus2• 11 years ago

Very useful! - but i'd humbly ask why any programming font set with a non-struck zero would be associated with a green indicator, (e.g. Droid Sans Mono, Luxi Mono). Perhaps the associated green/red don't mean what i think they might?

s9w11• 11 years ago

The red/green are anti-alias indicator. They're stay red for bitmap fonts even with AA toggled on to signal that they cannot be anti-aliased. Maybe I should make that clearer

theophrastus2• 11 years ago

Thank you! Nice you highlighted comparison of little nasties like lowercase "l" (ell) nearly indistiguishable from a "1" (one) (like "Envy Code R") (horribly burnt by that in a Fortran program long ago with "k = l" instead of desired "k = 1" (i didn't write that, just spend days of debugging it))

joonoro• 11 years ago

Ah this has reminded me how awesome gdipp is [0]. For those who don't know, it's an alternative renderer for Windows that makes the fonts look a lot better. The only downsides are that it hasn't been updated in years and that it breaks the font rendering in a few applications (notably Chrome and Skype).

[0] https://code.google.com/p/gdipp/

jd35• 11 years ago

I've always preferred MacType[0] over the old gdipp project. It improved upon elements from the gdipp project in many ways. You can try out my config if you like: [1].

[0] https://code.google.com/p/mactype/

[1] http://pastebin.com/YP23PP5v

omgtehlion• 11 years ago

This is a matter of choice I suppose.

For me gdipp (or mac ftm) rendered fonts look like just crap. Never been typographic junkie though...

tuxracer2• 11 years ago

It also depends on the DPI of your display. The classic Windows font renderer sacrifices accuracy for readability on low DPI displays. If the stroke of a font was going to be 1.3 pixels wide at a given siW Windows will just crop the extra 0.3 to give a crisp edge on low DPI displays. Unfortunately on HiDPI displays this can needlessly make the font stroke very thin.

jasonkostempski• 11 years ago

I use Terminus as my Linux terminal font and love it, however, I don't get to use Linux much and it's hard getting Terminus to work anywhere else.

jryan493• 11 years ago

Try http://files.ax86.net/terminus-ttf/ ?

pronoiac• 11 years ago

Huh, this comes up blank in Mobile Safari.

jryan493• 11 years ago

Proves even further to me that Terminus is superior.

VLM• 11 years ago

I agree with you, although I suspect many people confuse the clarity of Terminus with AA being forced off because its a bitmap font. They really want a non-AA display, and Terminus being bitmap forces the issue.

If you just shut off AA there are some fonts almost, but not quite, as good as Terminus. Non-AA Ubuntu Mono is almost as good as Terminus. Non-AA Source Code Pro is almost as nice as Terminus. Dejavu Sans Mono is almost as good as Terminus.

The clarity and consistency of Terminus never fails to impress me. Other fonts have like 25 good glyphs and at least one "whoops" usually a M or W or E. Think of Monoid or the sad M in otherwise good Ubuntu Mono. Then again Ubuntu mono is definable as a Terminus clone with a broken M. Or sometimes none of the glyphs are individual disasters but the whole font has crazy variations, think of the Meslos some verticals are double width very strange looking, unreadable, looks like old fashioned ransom note.

I used an OCR font for awhile a couple years ago. Its not bad once you get used to it. An ugly yet productive duckling. Easy to read does not necessarily equal beautiful (with the exception of Terminus).

I have a suspicion that Terminus and buckling spring / model-M keyboard use correlate, as a "will not accept anything but the absolute best" attitude.

jryan493• 11 years ago

You're right. I have AA turned off on my machine, and use fonts that just look good without it.

marssaxman2• 11 years ago

I've never understood why some people dislike antialiased text rendering so much. Aliased text is obviously inferior to my eyes - all the spurious 90-degree angles add meaningless noise to the character forms, as though the font is decorated with a lot of extra fuzz. Antialiasing smooths all this cruft away, leaving the character shape more clearly defined. And yet there are people who dislike this look enough to disable it and work around it, describing it as "blurry", though my experience is that it's less blurry. I really wonder what it is about their experience which differs so greatly from mine.

jdlyga• 11 years ago

It's great that we have so many choices of great programming fonts nowadays. What's everyone's font of choice? I've been using Consolas for the last few years.

LukeHoersten• 11 years ago

I've been using Ubuntu Mono for years and absolutely love it. Consolas and Roboto look nice as well though.

savanaly• 11 years ago

Inconsolata all the way.

k2enemy• 11 years ago

I've been using Input Mono for a few years now. I think this is the longest I've stuck with a particular monospace font.

http://input.fontbureau.com/preview/?size=14&language=python...

deepanchor• 11 years ago

I'm a huge fan of Liberation Mono. I've been using it for years -whenever I try to change up my terminal a bit by playing around with other fonts, I always end up back where I started.

noir_lord• 11 years ago

Roboto Mono - I live in jetbrains product (intellij, pycharm, phpstorm) and the font rendering on Linux is pretty bad yet Roboto Mono actually manages to look good, I'd post a screenshot but I'm away from my machine at the moment.

aidenn02• 11 years ago

I've been using Bitstream/DejaVu Sans Mono for years as I really like their choice for 1Il| but this page made it easy for me to find some alternatives to try. Ubuntu mono and Monoid both stand out as looking good to me (M+ is a close third, but has larger line spacing than I'm used to).

aidenn02• 11 years ago

I don't know if you're still looking here, but after trying out the alternatives, they all had things I didn't like. Source Code Pro was nearly perfect for me, if the latin characters were only as tall as the non-latin characters; the designer seems to like generous space between lines to the point of even skimping on accent length for upper-case characters. The good news is that it makes the Han characters much more legible, as they are larger than the latin ones, but I never use those in my programming.

Looking at alternative fonts, I noticed that the designer of the Meslo font considers Menlo (so also Bitstream/DejaVu) to be "too cramped," so my personal preference must be fore closer-together lines than average.

Here's some samples from a directory listing:

https://phab.jasom.org/orfiles/dejavu-sans-mono-latin.png

https://phab.jasom.org/orfiles/dejavu-sans-mono-non-latin.pn...

https://phab.jasom.org/orfiles/source-code-pro-latin.png

https://phab.jasom.org/orfiles/source-code-pro-non-latin.png

man5quid• 11 years ago

I tried using Inconsolata but recently switched to Anonymice pro.

jd35• 11 years ago

Interesting project, but some of these look a bit... wrong to me. For example, ProFont is my favorite bitmap programming font and the renderer used makes it look bad. Just loaded it up in my Terminal.app to show how it /should/ look: [0]. Also while I'm at it, some cool fonts not mentioned that I think deserve some attention are tewi[1] and ProggyTiny[2]. Tewi glyphs are particularly nice [3].

[0] http://i.imgur.com/3A0HEqu.png

[1] https://github.com/lucy/tewi-font

[2] http://www.proggyfonts.net/download/

[3] https://rbt.asia/boards/g/img/0379/00/1383925217833.png

s9w11• 11 years ago

hmm in what way do you think it looks bad? I just double checked and the screenshots on the page are correct. I can see that some letters (MN) are too close together on the site. I'll try a different font version to see if that fixes it.

Thanks for the suggestions! I'll have a look and add them all if they work. But my internet right now is damaged so it might take some time.

jd35• 11 years ago

Yeah I think it was just the strange kerning and size that it was displayed in. I know ProFont has bitmap sizes other than 9 (10, 12, 14, 24, etc.) but I'm not accustomed to seeing any other than 9 used for programming is all.

I have a patched version of profont for windows that correctly supports the powerline glyphs which I use in mintty. In the end, when I have everything configured (ClearType disabled, MacType excludes mintty.exe), it looks exactly like my above OS X screenshot.

swah• 11 years ago

Tewi looks a lot like montecarlo, no?

jd35• 11 years ago

a good point. tewi does have best-in-class glyph support though.

peterhajas• 11 years ago

Woah, how'd you get your window controls to be like that?

jd35• 11 years ago

Hello! I've been customizing my OS X installs since 10.5 with various programs (ThemePark, (S)artFiletool, and most recently Alex Zielenski's ThemeEngine[0]). I'm a fan of the `platinum' theme from Mac OS 9, so I've been creating a system-wide OS-9 theme in my spare time this past ~year. I have .car files available for Yosemite and El-Capitain (the version I'm currently using). The Yosemite files are (mostly) true to the old OS 9 aesthetic, but I thought I'd change up the look of the traffic lights on el-capitain and release it at some point [1]. I have the source files for each different design I've done, along with the Assets.car (the replacement for the deprecated [and absent in 10.11] SArtFile.bin), SystemAppearance.car (change highlight colors in menubar and right-click menus/make window masks sharp instead of rounded [yes it also affects the GraphiteAppearance.car window masks]), and the GraphiteAppearance.car (used for the platinum traffic lights) files. At some point I will finish both of these and release them, but for now (I just finished my summer job working for one of my professors/I'm on vacation at the moment) the Yosemite theme remains slightly incomplete, and I've got some more testing to do on El-Capitain. Also gotta port that Yosemite-System-fontpatcher project to work with the new San Francisco (let's not get that confused with susan kare's 1984 `SanFrancisco'! [2]) typeface so I can finally get Charcoal/Chicago as my system font again like it was in Yosemite...

[0] https://github.com/alexzielenski/ThemeEngine

[1] http://i.imgur.com/fpZemvX.gifv

[2] http://i.imgur.com/Q1tZknV.png

s9w11• 11 years ago

There are no windows versions of tewi, so I can't add it. And I'm not sure about ProggyTiny as I've already got proggyClean and there are so many other variants.

But I did manage to fix profont by using a ttf version instead of the .fon one. Will be updated soon.

JoshTriplett2• 11 years ago

I've tried various programming fonts, and I keep coming back to DejaVu Sans Mono. There are a few others that are as good, but none that seem so much better to be worth getting used to.

straws• 11 years ago

Inconsolata-dz is a great font, though I recommend

https://github.com/DeLaGuardo/Inconsolata-LGC

for fans of Inconsolata that would like bold and italic weights, as well as extended glyphs.

s9w11• 11 years ago

Oh that looks great. I'll add it!

s9w11• 11 years ago

This seems to be more or less identical with the -dz version as that already contains bold and italics. So unless I'm missing something I don't think this is necessary

CognitiveLens2• 11 years ago

when i clicked on the link, i thought it might be an article about actually programming the design of a typeface - generative glyphs! algorithmic aesthetics! oh well... one day...

xeonoex• 11 years ago

I wish that more fonts had a semi-bold version, like Source Code Pro. It's one of the main reasons I use that font, since it looks good at smaller sizes, but still allows the syntax highlighting colors to stand out. You can tell the difference between black and blue at a glance.

bitwize• 11 years ago

No Glass Tty VT220?

weinzierl• 11 years ago

Excellent, I love it! Did you calculate the font size so that almost all lines are equally long automatically? Why are some lines shorter?

I think Courier and Courier New would be good additions. They are terrible programming fonts but for years were very widespread because they were very often the default and still very often are the last resort fallback.

Tiksi2• 11 years ago

The subpixels on my screen aren't rgb (vbgr on this one) ordered, so the images with AA don't quite work right for me. Annoyingly, quite a few sites/applications make the assumption that everything is rgb, which causes crappy looking text on my portrait screens, and even worse on my monitor at home which is bgr ordered.

Also putting in a plug for my personal favorite font, Tamsyn ( http://www.fial.com/~scott/tamsyn-font/ ) Although firefox recently dropped support for bitmap fonts on linux, and my ttf version of it only looks good at one size, so I've been trying to find something to replace it in the browser.

s9w11• 11 years ago

I've never had contact with different subpixel configurations. So I have no clue how to fix that. Any ideas?

I will add Tamsyn, thanks for the suggestion!

Tiksi2• 11 years ago

Well it wouldn't really be fixing it, but you could render the images with different ordering and allow people to select. I'm not sure if there's a way to detect it in browser. Setting the ordering depends on what os you're on. In linux you can set it either with fontconfig and/or in whatever DE you use. In windows I'm not aware of a way to specifically set the order, but it can be changed with cleartype tuner. Osx I have no clue if you even can.

Example of bgr AA: http://paste.click/fXuAWF

It'll probably look wrong on your monitor, with red and blue fringing visible. Thats what rgb ordered images look like to me.

I think it may be possible to specify AA with css, so that might be another avenue, but I'm not sure.

I do like the idea of the site and appreciate all the effort.

Programming fonts

Related Stories