Bonus points for knowing the UK roadsign font
July 19, 2015 10:21 AM Subscribe
Infographic: Know Your Fonts [Electric Literature]
It turns out Helvetica is not as all-purpose as Gary Hustwit would like us to believe…
This made me groan a bit since I'm kind of a big nerd about that movie and there's at least half of the film that is all about how Helvetica is not the greatest font ever, despite its ubiquity. But I will try and look past this line and just enjoy some font talk.
posted by buriednexttoyou at 11:18 AM on July 19, 2015 [3 favorites]
This made me groan a bit since I'm kind of a big nerd about that movie and there's at least half of the film that is all about how Helvetica is not the greatest font ever, despite its ubiquity. But I will try and look past this line and just enjoy some font talk.
posted by buriednexttoyou at 11:18 AM on July 19, 2015 [3 favorites]
Unfortunately, it repeats the received knowledge abouts 'serif for print, sans for web'.
Actual empirical studies and discussion here, here and here.
TLDR: the quality of the font you choose (its shapes, kerning, contrast, x-height, etc.) is much, much more important than whether it's a serif or sans.
posted by signal at 12:00 PM on July 19, 2015 [13 favorites]
Actual empirical studies and discussion here, here and here.
TLDR: the quality of the font you choose (its shapes, kerning, contrast, x-height, etc.) is much, much more important than whether it's a serif or sans.
posted by signal at 12:00 PM on July 19, 2015 [13 favorites]
is this the original? it seems weird that the orange text isn't clickable.
posted by andrewcooke at 12:18 PM on July 19, 2015
posted by andrewcooke at 12:18 PM on July 19, 2015
There's a whole lot of stuff on that graphic that seems either incorrect or, at the very least, misleading.
For instance, Top Body Copy Fonts...Arial, Trebuchet, and Helvetica. I'm not disagreeing that they're the most popular. But, they're "most popular" because, in the era before web-fonts, those were the most likely fonts people were going to have installed on their computers. So, in your website's html/CSS, you'd specify "Sans-Serif, Arial, Trebuchet, Helvetica" and you were probably 99% covered. Their "popularity" had more to do with ubiquity rather than anyone actually liking them.
posted by Thorzdad at 1:01 PM on July 19, 2015 [10 favorites]
For instance, Top Body Copy Fonts...Arial, Trebuchet, and Helvetica. I'm not disagreeing that they're the most popular. But, they're "most popular" because, in the era before web-fonts, those were the most likely fonts people were going to have installed on their computers. So, in your website's html/CSS, you'd specify "Sans-Serif, Arial, Trebuchet, Helvetica" and you were probably 99% covered. Their "popularity" had more to do with ubiquity rather than anyone actually liking them.
posted by Thorzdad at 1:01 PM on July 19, 2015 [10 favorites]
If “Garamond” is the typeface, then “ITC Garamond” is the italic version at a certain weight: the font.[facepalm] “ITC” isn’t shorthand for “italic”, it’s shorthand for “International Typeface Corporation”. “ITC Garamond” is the Garamond typeface released by ITC. “ITC Garamond 12-point book italic” is a font.
posted by letourneau at 1:54 PM on July 19, 2015 [29 favorites]
The most useful Font Inforgraphic I've ever seen is FontAsses.
(which I supplemented with a few of my favorites, plus the obviously needed Arial/Helvetica comparison)
posted by oneswellfoop at 2:43 PM on July 19, 2015 [8 favorites]
(which I supplemented with a few of my favorites, plus the obviously needed Arial/Helvetica comparison)
posted by oneswellfoop at 2:43 PM on July 19, 2015 [8 favorites]
This is a bad chart and wrong, less useful than a Wikipedia article in the middle of an edit war. Providing misleading information on matters of opinion (scraping newspaper websites for design cues is like basing your wardrobe on the wholesale price of cotton). Wrong not only on the minor details that only font nerds should know about and would care about ("Humanist", not "Humanistic", is a style of font), but wrong on major facts like what an italic font is.
The Truetype and OpenType vs. Web Fonts section is so wrong it's incoherent. The first two are font formats. The third is a term of art for the means to provide font files to client browsers -- which can be either TT or OT (except for most versions of Internet Explorer, which require EOT).
posted by ardgedee at 3:06 PM on July 19, 2015 [12 favorites]
The Truetype and OpenType vs. Web Fonts section is so wrong it's incoherent. The first two are font formats. The third is a term of art for the means to provide font files to client browsers -- which can be either TT or OT (except for most versions of Internet Explorer, which require EOT).
posted by ardgedee at 3:06 PM on July 19, 2015 [12 favorites]
[Serifs] are designed to make the typeface easier to read in print, as the human eye quickly distinguishes the letter with the serif attached to it.
Serifs predate the printing press by over 1,000 years (see the inscriptions on Trajan’s Column). They are ornamentations whose forms were determined by the shapes of the chisels used to engrave the letters. As mentioned above, there is no solid evidence they make a typeface “easier to read.”
Truetype and Opentype files are the files you’ll download from websites like dafont.com.
As a public service message, 99% of the fonts on Dafont.com are too low-quality to use for...anything. A few fonts that I made long ago are available on that site, and I am referring to them especially when I say that. They are bottom-of-the-barrel in terms of quality. If you’re looking for higher quality free fonts (some of which, e.g. Source, Fira, and Open Sans, are professional-quality and could have been sold for hundreds of dollars per license), try Fontsquirrel.com. None of my fonts are on that site, a good sign.
27% of the world’s top 15 news websites...
(That’s 4 websites)
...uses Helvetica as their header.
Based on what? The standard practice is to list multiple fonts in a site’s stylesheet, so that if the designer’s first choice of font is not installed or otherwise not loadable on the user’s system, it will try to use the next font in the list. Is this saying that on four websites, Helvetica is listed first in the stylesheet font stack? That means nothing.
Three custom fonts were designed to help dyslexic readers.... None have conclusive proof that they offer more legibility.
That is correct, there is no proof. So why are they even mentioned in the graphic?
There’s nothing wrong with typographical rules of thumb for people who aren’t obsessed with fonts, but this infographic is confused and misleading, as if the creator learned everything they know about fonts from some different infographic.
posted by tepidmonkey at 3:14 PM on July 19, 2015 [11 favorites]
Serifs predate the printing press by over 1,000 years (see the inscriptions on Trajan’s Column). They are ornamentations whose forms were determined by the shapes of the chisels used to engrave the letters. As mentioned above, there is no solid evidence they make a typeface “easier to read.”
Truetype and Opentype files are the files you’ll download from websites like dafont.com.
As a public service message, 99% of the fonts on Dafont.com are too low-quality to use for...anything. A few fonts that I made long ago are available on that site, and I am referring to them especially when I say that. They are bottom-of-the-barrel in terms of quality. If you’re looking for higher quality free fonts (some of which, e.g. Source, Fira, and Open Sans, are professional-quality and could have been sold for hundreds of dollars per license), try Fontsquirrel.com. None of my fonts are on that site, a good sign.
27% of the world’s top 15 news websites...
(That’s 4 websites)
...uses Helvetica as their header.
Based on what? The standard practice is to list multiple fonts in a site’s stylesheet, so that if the designer’s first choice of font is not installed or otherwise not loadable on the user’s system, it will try to use the next font in the list. Is this saying that on four websites, Helvetica is listed first in the stylesheet font stack? That means nothing.
Three custom fonts were designed to help dyslexic readers.... None have conclusive proof that they offer more legibility.
That is correct, there is no proof. So why are they even mentioned in the graphic?
There’s nothing wrong with typographical rules of thumb for people who aren’t obsessed with fonts, but this infographic is confused and misleading, as if the creator learned everything they know about fonts from some different infographic.
posted by tepidmonkey at 3:14 PM on July 19, 2015 [11 favorites]
If you think that seeing Helvetica listed in the CSS of a few sites means it's actually used to render the site, then I have some news for you: you shouldn't be making shitty infographics about fonts.
posted by Rhomboid at 6:06 PM on July 19, 2015 [1 favorite]
posted by Rhomboid at 6:06 PM on July 19, 2015 [1 favorite]
"The term 'font' is widely misused on the internet. A font is a specific weight and style of the overall typeface."
Actually, this is the widely "misused" definition (which is perfectly cromulent for everyone but letterpress typesetters who are in the process of ordering type, and yes even for them too in every other situation) (and on top of which, they've neglected to include the size). Traditionally, a font is a packaged unit of movable type which you would order from a type foundry, containing differing (but standard) numbers of each character based on how often each is likely to be used in a job, sort of like a game of Scrabble. "need five fonts 12pt garamond stop," your telegram might read. Then it'd be delivered way too late, and once you'd got it all sorted into your California job case you'd immediately realize you hadn't ordered nearly enough, and you'd grumble about how there are always too many c's and too few p's, accidentally preenacting the hotdog scene from the Steve Martin version of Father of the Bride.
You can also buy fonts of type on eBay right now if you're so inclined.
posted by Sys Rq at 7:57 PM on July 19, 2015 [5 favorites]
Actually, this is the widely "misused" definition (which is perfectly cromulent for everyone but letterpress typesetters who are in the process of ordering type, and yes even for them too in every other situation) (and on top of which, they've neglected to include the size). Traditionally, a font is a packaged unit of movable type which you would order from a type foundry, containing differing (but standard) numbers of each character based on how often each is likely to be used in a job, sort of like a game of Scrabble. "need five fonts 12pt garamond stop," your telegram might read. Then it'd be delivered way too late, and once you'd got it all sorted into your California job case you'd immediately realize you hadn't ordered nearly enough, and you'd grumble about how there are always too many c's and too few p's, accidentally preenacting the hotdog scene from the Steve Martin version of Father of the Bride.
You can also buy fonts of type on eBay right now if you're so inclined.
posted by Sys Rq at 7:57 PM on July 19, 2015 [5 favorites]
No mention of bitmap fonts? Hinting? Unicode?
Yes, I'm going to be grumpy with you guys, my people, my grumpy font people.
posted by RobotVoodooPower at 8:44 PM on July 19, 2015 [2 favorites]
Yes, I'm going to be grumpy with you guys, my people, my grumpy font people.
posted by RobotVoodooPower at 8:44 PM on July 19, 2015 [2 favorites]
As a developer who dabbles in design, all I can say is "Nobody ever got fired for using Proxima Nova".
posted by furtive at 9:45 PM on July 19, 2015 [2 favorites]
posted by furtive at 9:45 PM on July 19, 2015 [2 favorites]
I'm incredibly depressed at the continuing popularity of Helvetica and Arial. Come on, people; we've had fonts designed specifically for the screen and not print for almost two decades, now; learn to use them! (For web? Verdana > Helvetica/Arial). But yeah, the CSS specifying Helevtica as the first thing in the font stack means that the site was designed on a Mac, generally (since Helvetica is a default on Macs); seeing Arial there instead means it was designed on Windows (and in both cases it means the designer just used the system default sans-serif). At least people have figured out that Georgia is a better screen font than Garamond or Bodoni or Times New Roman, finally.
posted by Pseudonymous Cognomen at 10:43 PM on July 19, 2015 [1 favorite]
posted by Pseudonymous Cognomen at 10:43 PM on July 19, 2015 [1 favorite]
We've reached peak infographic.
posted by Sreiny at 11:37 PM on July 19, 2015 [1 favorite]
posted by Sreiny at 11:37 PM on July 19, 2015 [1 favorite]
The infographic clearly requires a correctional infographic.
But it did lead me to this Wikipedia list of transportation typefaces. Interesting how Clearview, Caractères, Clarendon, Frutiger, Transport and Johnston, and many others all evoke particular places so strongly, how empire has influenced their spread into different countries and how the basic task of finding a good signage font was duplicated so many times around the world.
posted by rongorongo at 12:18 AM on July 20, 2015 [5 favorites]
But it did lead me to this Wikipedia list of transportation typefaces. Interesting how Clearview, Caractères, Clarendon, Frutiger, Transport and Johnston, and many others all evoke particular places so strongly, how empire has influenced their spread into different countries and how the basic task of finding a good signage font was duplicated so many times around the world.
posted by rongorongo at 12:18 AM on July 20, 2015 [5 favorites]
All I require of a font is that it be unobtrusive. Far from wanting to know them better, if I could develop, like, font agnosia, I'd be happy never to think about the subject again.
posted by Segundus at 1:30 AM on July 20, 2015 [1 favorite]
posted by Segundus at 1:30 AM on July 20, 2015 [1 favorite]
They certainly don't know their fonts very well. Times New Roman is a font designed for newspaper print, as it crams the most information into the least space, printed in columns. It is certainly not a very good font for books, for the same reason, and is rarely, if at all, used for that purpose.
posted by ojemine at 1:33 AM on July 20, 2015 [1 favorite]
posted by ojemine at 1:33 AM on July 20, 2015 [1 favorite]
All I require of a font is that it be unobtrusive
Thus making typography the least gratifying of graphical arts: The lesser you realize it, the better it is.
posted by ojemine at 1:36 AM on July 20, 2015 [2 favorites]
Thus making typography the least gratifying of graphical arts: The lesser you realize it, the better it is.
posted by ojemine at 1:36 AM on July 20, 2015 [2 favorites]
I think some fonts need to be noticeable. One of the reasons that Johnston works so well is that it's immediately recognisable and eye catching, so that important direction signs stand out even through the mass of loud advertising typefaces that line the walls of the London Underground.
posted by Eleven at 4:24 AM on July 20, 2015 [1 favorite]
posted by Eleven at 4:24 AM on July 20, 2015 [1 favorite]
> But yeah, the CSS specifying Helevtica as the first thing in the font stack means that the site was designed on a Mac, generally (since Helvetica is a default on Macs); seeing Arial there instead means it was designed on Windows (and in both cases it means the designer just used the system default sans-serif).
It's not quite that straightforward. Helvetica Neue is often specified ahead of both Helvetica and Arial, since plenty of their peers on Windows have Helvetica Neue installed. And designers on Macs often know (well, they should all know, but let's be realistic) that most visitors to their sites will be on Windows machines and will not have added Helvetica to their system, and will specify the fallbacks appropriately. Not that it matters a whole lot; the specific order (Helvetica->Arial or Arial->Helvetica) only has a visible effect on Macs which have MS Office installed. It will not affect Windows users because Microsoft undermines your best intentions.
Personally I wouldn't mind a proliferation of Segoe UI on the web -- it looks nice, more contemporary than Helvetica, and I kind of prefer it, on-screen, to Lucida Grande. But there are vanishingly few Macs with Segoe UI installed; I'm not certain how it would render (since Apple is slowly deprecating screen-tuned fonts in favor of retina-resolution displays), so it might be a moot point.
posted by ardgedee at 6:14 AM on July 20, 2015
It's not quite that straightforward. Helvetica Neue is often specified ahead of both Helvetica and Arial, since plenty of their peers on Windows have Helvetica Neue installed. And designers on Macs often know (well, they should all know, but let's be realistic) that most visitors to their sites will be on Windows machines and will not have added Helvetica to their system, and will specify the fallbacks appropriately. Not that it matters a whole lot; the specific order (Helvetica->Arial or Arial->Helvetica) only has a visible effect on Macs which have MS Office installed. It will not affect Windows users because Microsoft undermines your best intentions.
Personally I wouldn't mind a proliferation of Segoe UI on the web -- it looks nice, more contemporary than Helvetica, and I kind of prefer it, on-screen, to Lucida Grande. But there are vanishingly few Macs with Segoe UI installed; I'm not certain how it would render (since Apple is slowly deprecating screen-tuned fonts in favor of retina-resolution displays), so it might be a moot point.
posted by ardgedee at 6:14 AM on July 20, 2015
Given the discussion on this post it only reinforces why I like the original link--it may not be right but at least it is simple and straight forward. This all to complicated
posted by rmhsinc at 7:08 AM on July 20, 2015 [1 favorite]
posted by rmhsinc at 7:08 AM on July 20, 2015 [1 favorite]
The most useful Font Inforgraphic I've ever seen is FontAsses.
Guys, we finally found the best use for Papyrus!
posted by C'est la D.C. at 7:19 AM on July 20, 2015
Guys, we finally found the best use for Papyrus!
posted by C'est la D.C. at 7:19 AM on July 20, 2015
rmhsinc: "-it may not be right but at least it is simple and straight forward."
Yeah, that's why I always use 3.0 for the value of Pi. Screw those eggheads with their fancy infinite digits.
My circles do come out looking odd, though.
posted by signal at 8:55 AM on July 20, 2015 [3 favorites]
Yeah, that's why I always use 3.0 for the value of Pi. Screw those eggheads with their fancy infinite digits.
My circles do come out looking odd, though.
posted by signal at 8:55 AM on July 20, 2015 [3 favorites]
"Given the discussion on this post it only reinforces why I like the original link--it may not be right but at least it is simple and straight forward. This all to complicated"
Can we all have a big hand for "Best impression of a Republican primary voter"? Great job!
posted by klangklangston at 12:02 PM on July 20, 2015 [3 favorites]
Can we all have a big hand for "Best impression of a Republican primary voter"? Great job!
posted by klangklangston at 12:02 PM on July 20, 2015 [3 favorites]
Signal and Klangston-I use 3.1416 which gets me close enough that I know what I am seeing. At age 73 with early cataracts and Fuch's Endothelial Dystrophy ( a bit more than a nuisance but operable) finding the right font and typeface is a real issue--not esoteric and academic. I use a slightly larger font 12-14 sans serif and do all serious reading on an Ipad with a type and a black background. Direct light and glare are the greatest challenges as I se things through a light fog. Do you have any suggestions regarding typeface, I tend to use Helvetica and Times.
posted by rmhsinc at 12:33 PM on July 20, 2015 [1 favorite]
posted by rmhsinc at 12:33 PM on July 20, 2015 [1 favorite]
So, for you, the font distinction that will matter more than serif/san serif is whether the characters have modulated strokes. A term for this is "humanist," (not "humanistic" as per the poster). Popular humanist fonts include Calibri, Lucida Grande, Myriad, Trebuchet and Verdana. Give one of those a try and you may like it more than Helvetica or Times.
It sounds like you benefit from higher contrast environment — the black background and white type — but you might also find that going up to 16pt would help more. If you're using a plugin that allows you to use your own style sheets, I'd advise doing things like setting the body copy to all have a leading (space between lines) of 1.5 lines, rather than the default of 1 line.
There are also a fair number of browser plugins that help make sites more readable, though honestly I don't have enough personal experience to recommend one over another.
posted by klangklangston at 1:01 PM on July 20, 2015 [3 favorites]
It sounds like you benefit from higher contrast environment — the black background and white type — but you might also find that going up to 16pt would help more. If you're using a plugin that allows you to use your own style sheets, I'd advise doing things like setting the body copy to all have a leading (space between lines) of 1.5 lines, rather than the default of 1 line.
There are also a fair number of browser plugins that help make sites more readable, though honestly I don't have enough personal experience to recommend one over another.
posted by klangklangston at 1:01 PM on July 20, 2015 [3 favorites]
Klangston. Thanks for taking the time to respond. I will definitely experiment with these suggestions. I use several add ons but I have been somewhat stymied re typeface. I appreciate the comments on font distinction and humanist fonts
posted by rmhsinc at 3:20 PM on July 20, 2015
posted by rmhsinc at 3:20 PM on July 20, 2015
Glad to help! (I'm not a jerk all the time, I promise.) But things like humanist fonts varying stroke weight and avoiding too similar characters being more important than serifs versus gothic/grotesque/sans for readability is why I get annoyed at pretentious posters like the FPP. Figuring out what design choices make content more accessible is an issue that really should and does matter both as social justice and economics; regurgitating phlogistonic pedantry does folks like you a disservice just to puff up the presumed authority of the poster writer's classy taste. It's as obnoxious as insisting "they" is incorrect as a singular pronoun — received bushwa from classist Pharisees.
posted by klangklangston at 1:22 AM on July 22, 2015 [1 favorite]
posted by klangklangston at 1:22 AM on July 22, 2015 [1 favorite]
Just switched to Calibri--default 15--very nice, I will experiment with the others. This is helpful--I am not sure you realize how confusing it can be--one shit load of alternatives and many "expert" opinions. Will try each one for 2-3 days
posted by rmhsinc at 4:19 AM on July 22, 2015
posted by rmhsinc at 4:19 AM on July 22, 2015
« Older "I made my bones when you were going out with... | ‘‘Are you free yet?’’ ‘‘I’m getting there,’’... Newer »
This thread has been archived and is closed to new comments
posted by rmhsinc at 10:26 AM on July 19, 2015 [1 favorite]