Comparing Programming Font Pairs

I really like this visualization of the difference between Deja Vu Sans Mono and Apple Menlo:

(Credit to Jesse Burgheimer)

I decided to take a stab at programmatically generating a similar comparison for all the fonts I’ve been looking at.  Here’s the Mathematica code:

(Click for full size version)

It was then easy to generate this for every pair of fonts:

I went through them all and picked out the ones I thought were most interesting:

If you’re interested in seeing the results for every pair, you can download them all.

If you’re really interested in typography, I recommend:

6 Comments

  1. Posted January 27, 2011 at 12:48 pm | Permalink | Reply

    There seems to be some sort of quirk in Mathematica involving symbol characters– notice how things like ()!/ are not only exactly matched, but seriously out of place weight-wise in the font.

    Alas, I don’t use Mathematica so I don’t know what the issue actually is…

    • Posted January 27, 2011 at 1:30 pm | Permalink | Reply

      You’re totally right! I’ll look into that and see if there’s a workaround.

  2. Posted January 27, 2011 at 1:19 pm | Permalink | Reply

    Where is the facebook like link ?

  3. MMA_Pope
    Posted January 27, 2011 at 4:57 pm | Permalink | Reply

    A passage from the Book of Obscure Mathematica Features:
    Style["( . ) ( . ) ", 60, FontFamily -> "Comic Sans MS",
    PrivateFontOptions -> {"OperatorSubstitution" -> False}]

    • Posted January 27, 2011 at 8:48 pm | Permalink | Reply

      You are awesome. I’ll use this in a follow-up post.

  4. Anthony Starks
    Posted January 27, 2011 at 10:01 pm | Permalink | Reply

    Here’s how do do these in Go:

    package main

    import (
    “os”
    “fmt”
    “github.com/ajstarks/svgo”
    )

    var (
    canvas = svg.New(os.Stdout)
    width = 900
    height = 900
    fontsize, glyph int
    chars = “ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789(){}[],.:;-+*/\\&_^%$#@!~`’\”"
    )

    func letters(top, left int, font, color string, opacity float32) {

    rows := 7
    cols := 13
    glyph := 0
    fontsize = 32
    spacing := fontsize * 2
    x := left
    y := top
    canvas.Gstyle(fmt.Sprintf(“font-family:%s;font-size:%dpt;text-anchor:middle;fill:%s;fill-opacity:%.2f”, font, fontsize, color, opacity))
    for r := 0; r < rows; r++ {
    for c := 0; c 2 {
    canvas.Start(width, height)
    canvas.Text(80, 520, os.Args[1], “font-size:14pt; fill:blue; font-family:”+os.Args[1])
    canvas.Text(80, 540, os.Args[2], “font-size:14pt; fill:red; font-family:”+os.Args[2])
    letters(100, 100, os.Args[1], “blue”, 0.5)
    letters(100, 100, os.Args[2], “red”, 0.5)
    canvas.End()
    }
    }

4 Trackbacks

  1. By Iterating on Font Pair Comparisons « 1/N on January 31, 2011 at 8:58 am

    [...] Fixed the issue with the operator symbols (Thanks MMA_Pope!) [...]

  2. [...] Sans Mono eben­sowenig ver­leug­nen und jetzt gibt’s auch noch die Menlo. Wie man bei diesem Schriftvergleich sieht, sind die Unterschiede nicht wirk­lich riesig. Panic hat mit der Panic Sans, die im Editor [...]

  3. [...] Inconsolata vs. Courier Image by ajstarks See: 1overn.com/2011/01/26/comparing-programming-font-pairs/ This entry was posted in Courier and tagged Courier, Fontcompare, Inconsolata. Bookmark the [...]

  4. [...] Inconsolata vs. Courier Image by ajstarks See: 1overn.com/2011/01/26/comparing-programming-font-pairs/ This entry was posted in Courier and tagged Courier, Fontcompare, Inconsolata. Bookmark the [...]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.