It's my own list based on sifting through a metric ton of fonts available for online use, trying them for size and what not. I really like type design and related matters, so I used to do that for every project, the OCD way, and it was an enormous time sink. So I ended up compiling a short list and started updating it every time I'd see a good type in use when surfing.
We've had a print designer and typography expert in with us these last few weeks and top of the list of things to fix was our web typography.
Source Sans Pro is the font we've gone with after a fairly extensive search. And we've set the base size at 16px with a line-height of 24px. Which is to say, fairly large, very readable.
I was a big fan of ProggyClean but Source Code Pro converted me. And it works in more places. (If only there was an italic version. Syntax highlighting can look weird.)
Source Sans Pro is an excellent, extremely versatile, well-hinted and very contemporary-looking humanist sans-serif. Not to mention the platform availability and wide selection of weights. It's become my new Helvetica.
Since we are on this topic, I have a public service announcement: even though light Open Sans looks great and is trendy for headings, using a light font weight for body text is a bad idea because it makes it difficult to read. I keep coming across examples on the web, always with bad results.
Open Sans itself is a nice font, I have nothing against it. As a web font it might get rendered improperly, but that is an issue with the browser and the platform.
What I was talking about -- unlike, say, Arial, Open Sans also has a light weight (font-weight: 300) variant. That is now popular with large headings BUT I do not find it at all readable as body text (in Open Sans or most other fonts). Wordpress.com is a good example, as they do NOT make this mistake.
Open Sans like all the other Helvetica replacements (except Arial) are only cool the first few days. After that it's like, nah, gimme back Helvetica (which have been cool since the 70s):
Open Sans is not a Helvetica replacement / poor man's Helvetica just because it is sans-serif. It belongs along side other beautiful sans faces like Avenir, Frutiger, Myriad, and others that have their own styles and worthiness in design.
Helvetica is indeed cool (the Neue family cooler, IMO) and has been since the 50s, and _Helvetica_ is also cool. Thinking of Helvetica as the only worthwhile sans-serif typeface is less cool :)
I prefer Helvetica Neue (1983); its spacing and curves are a little more relaxed than traditional Helvetica. Plus, Helvetica is notorious for being rendered poorly on Windows web browsers. Since Windows does not have a Helvetica Neue (unless the user has installed an Adobe design application), you can avoid Helvetica on Windows with a CSS font stack like:
I don't understand, Helvetica Neue renders awfully at body-text sizes on computer displays. Unless you need the light weights, use Arial. It's Helvetica made to look good on computers under 16px.
"Proper". I agree with Oliver Reichenstein's argument[1], but Google does 13px and it's fine. The font-size in most desktop apps is less than 16px. Human's are adaptable. 16px is just more comfortable.
I've had some success with removing specific fonts entirely:
font-family: sans-serif;
You get Helvetica on Mac, Arial on Windows and various other default fonts on other platforms. Users can also pick their own font via browser settings.
For pixel-perfect alignment, you need to deal with some minor size differences between the fonts, but pixel-perfect design is not really achievable in many designs anyway.
Unfortunately, Helvetica Neue also renders poorly on Windows web browsers. It's a problem that I have been seeing a lot lately, especially with the popularity of Twitter Bootstrap. I understand that being a Windows user with Helvetica/Helvetica Neue installed is not very common, but when a website has an unreadable font I immediately leave it.
I’m more than happy to pay Typekit to provide my website visitors with high quality fonts that are optimized for all major platforms and conform to my clients’ brand guidelines. Adobe Typekit[1] even has a free tier that lets you use many of the fonts in its catalog and all requests are handled by their CDNs, saving you bandwidth (=money).
Even when I have carte blanche, I rather use Myriad or Frutiger over Open Sans. On OS X and iOS, Open Sans appears unbalanced to me.
As for the openness: if somehow Typekit’s CDNs are down, there’s always the fallback fonts, like Helvetica/Arial. I don’t see a need to start hosting fonts myself or settle for less than ideal fonts hosted elsewhere.
[1] I subscribed to Typekit years before it was acquired by Adobe, and I feared Adobe would ruin it, but to my surprise, since the acquisition the service has only gotten better.
Didn't they effectively increased the "download size" of pages and slowed the rendering down because now pages depend on the font which has to be downloaded, at the same time as they made the rendering on Chrome on Windows looking worse? Is that progress?
I don't find the fonts on Chrome under Vista[1] particularly bad. Not worse than other OSs. I have lousy eyesight, so most sites have lousy readability, so I often change the fonts.
It's weird that fonts on Windows, OS X, and Linux are all so differently blurry / sharp.
It'd be great if there was some user-understandable standard language so that users could chose the setting they prefer. You do get used to the differences, but it'd be nice to not have to do that each time I changed machine.
All this doesn't matter to me while I cannot increase font size by zooming in the page. Why does it happen to more and more web sites? I zoom in because font is too small for me, but font size doesn't increase, only paragraph width increases!
Is there any relation between the font rendering engine and the font being hinted for Windows? When I saw the title of the article on the page my first thought was the font not being properly hinted for Windows.
You're right, it most likely means font is not hinted for windows. That looks horrible when rendered with GDI at smaller sizes because GDI hammers everything into pixel grid and doesn't do vertical anti-aliasing. DirectWrite features anti-aliasing in both directions and doesn't try to fit everything into pixel grid. Because of that non-hinted fonts look much better, although blurrier, with DW than with GDI.
So, it turns out that when you have selectively added Open Sans typefaces as system fonts, this is what all these sites start to look like: http://i.imgur.com/kgpY6WO.png
I had added two densities so I could muck around with stuff in Pixelmator and was wondering why everyone had chosen the horrible slender version for body text on various sites, but apparently it just means whatever the system collection provides gets priority (which makes sense).
I'm partial to Serif myself, so I know what you mean :-)
In addition to Droid Serif, Liberation serif and Linux Libertine and Gentium recommended here, check out PT Serif also. Very readable on high resolutions and medium body fonts...
All these sets below, are complete (R, SC, B ,IT, B+IT...) fonts AFAIK.
This would be why my iPhone displays the page without text for 30 seconds until the font loads. Much as I like web fonts, using them for body text is painful.
Depends where the delay lies. If the font is loaded in such a way that page rendering blocks in all cases then they need to rearrange their code somewhat, but it could be your browser that is broken: unless there is something blocking rendering (the font being loaded synchronously in a static script tag or something) then the browser should render the content using an alternative from the CSS definition or what-ever its default is, and reflow once the font is loaded. While it is extra processing it isn't like modern phones are short of a CPU cycle or few.
Nothing is broken, it's just a design decision: do you show unstyled content or wait until you have everything. See http://paulirish.com/2009/fighting-the-font-face-fout/#updat... for details but the gist is that browsers used to differ (Firefox chose the approach you prefer) but have converged on blocking until the fonts have downloaded.
Currently the only way to get the behaviour you want would be using something like https://github.com/typekit/webfontloader and using CSS to specify a default to be used until the font has transfered:
body { font-family: sans-serif; }
.webfonts-loaded body {font-family: "Open Sans"; }
I'm a frequent user and massive proponent of Open Sans, which I think allows me to say how much I wish it had a Hairline and Black weight. I end up using Lato for a Futura-esque heavy weight. (eg: http://techevents.co)
Looking at both of those screenshots, am I the only one who finds font-rendering on Macs very blurry and extremely hard to read?
So blurry in fact, I find it's hard to tell that there are different fonts in those two screenshots. They just both look like text smudged over a while matte when switching back and forth between them.
Rather than designing to better fit the pixels you can see like on Windows, I'm pretty sure the Mac OS X hinting was designed to get progressively better as screen densities increased. Like their reliance on hardware acceleration in the window manager, it was a forward-looking technical decision built in to the OS.
Unfortunately, we got stuck in a 96 DPI rut throughout the 2000s and are only just coming out of it with high-DPI "Retina" displays. Now the Mac hinting decision makes more sense, and the ClearType technology looks bizarre, whereas for all the last decade it was the opposite.
Yes, it's blurry, especially for the eye coming from Windows. You get used to it, though. My favorite font rendering is the current Ubuntu's default: it doesn't destroy letter shapes as much as Windows, but still not as blurry as OS X.
I agree , sans serif is just not readable. A mix between serif for text and sans ( for headers , titles ,etc ... ) is the way to go. I just cant read any long text that is sans. It's very painfull.
http://www.google.com/fonts/specimen/Droid+Sans
http://www.google.com/fonts/specimen/Lato
http://www.google.com/webfonts/specimen/Pontano+Sans
https://typekit.com/fonts/proxima-nova
https://typekit.com/fonts/museo-sans
http://www.google.com/fonts/specimen/PT+Sans
https://www.microsoft.com/typography/fonts/family.aspx?FID=3...
http://www.webink.com/face/1133
http://www.google.com/fonts/specimen/Istok+Web
http://www.fontspring.com/fonts/mostardesign/interval