Programming fonts | Hacker News Reader

Programming fonts

s9w.github.io

72 pointss9w69 comments

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

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.

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.

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

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.

oh wait, ALL images get 2x upscaled? That sounds crazy. There are double-sized samples in the compare mode. But if they're still upscaled by macOS, what can I do?

Mac and Windows will 2x all images for users with HiDpi displays. You can use CSS to display the images as background-image then media queries are available to serve differently sized images for HiDPI. Alternatively, most images look completely fine scaled down, they just get blurry scaled up. If you use an image that is 2x bigger than defined in the img tag it will play nice on HiDPI.

I cannot vouch for this one, but Apple has a suggestion https://developer.apple.com/library/safari/documentation/Net...

Use the srcset attribute to provide @2x sizes.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Im...

Example: <img src="img.jpg" srcset="img@2x.jpg 2x" alt="">

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.

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...

I disagree but I got down voted enough to guess people like the term???? It makes zero seance. Your retina is the part of the eye that converts light into signals for the brain. Your screen is a display and has nothing to do with converting signals.

It makes sense in the detail that it matches resolution. Our retina is the fundamental limit to our visual resolution. Like the pixels on the screen. Would it make more sense to call it a 'retina-matching monitor' instead?

I think invisible pixels works for me :)

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

I always flip those terms around in my head. Thanks stand corrected.

http://99designs.com/designer-blog/2013/02/26/ppi-vs-dpi-wha...

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/

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

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...

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.

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

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.

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.

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.

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

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

Tewi looks a lot like montecarlo, no?

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

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.

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).

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

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...

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

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.

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.

I tried using Inconsolata but recently switched to Anonymice pro.

Inconsolata all the way.

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.

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!

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.

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.

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

Oh that looks great. I'll add it!

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.

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.

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

Proves even further to me that Terminus is superior.

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.

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.

With AA text on a normal-DPI LCD screen, it never feels like I'm focussed on the screen properly. With no hard edges and no sharp corners, my eyes can't seem to find the right setting. Whatever I do, it just always feels slightly wrong. Blurry edges just don't make me think that something is smooth - they make me think I haven't focussed properly. Drives me nuts.

I wouldn't mind so much, but over time people seem to keep taking the option of a pixelly display away, and when anybody complains, they're told they don't know what they're seeing through their own eyes.

Fortunately, AA text + retina display, I like, because the pixels are too small for the blurriness to be visible, and things look sharp again. So roll on more of that please. (High-DPI, I mean. Not AA. We have more than enough AA to be getting on with.)

Interesting. Thanks for sharing.

High-DPI displays are clearly the right long term solution. It was amazing to use one for the first time - I couldn't see the individual pixels anymore, and it was disconcerting in a really good way. It's like a bit of Hollywood fakery brought to life.

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

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.

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.

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?

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

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))

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.

No Menlo?

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

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.

Alright, well I should just do it and wait if something happens. I'll add it, thanks!

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

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

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

No Glass Tty VT220?

Huh, this comes up blank in Mobile Safari.

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...

Why is Comic Sans missing?

Reply on news.ycombinator.com