Anyone know of any good resources about web typography?
In particular I’m interested in thinking about:
There are fonts specifically designed for viewing on a browser - Georgia and Verdana etc - but given that monitors are better/crisper and Windows now displays type with hinting and the advent of Typekit… should we still stick to these fonts for our body copy?
Can we use typefaces, for body copy, that are deemed very legible and often used in books: Caslon, Garamond etc?
What makes a font more legible on screen (for body text) - large x height - compared to print?
Can you use web fonts (Typekit, Google etc) in graphic emails?
Anyone got any views on the Merriweather font? This is supposedly created with the monitor in mind - but I don’t really understand what makes it more suitable for digital use?
Mark I woud love to chat more about this but I’m on my way out for dinner - will check back in later. In the mean time here’s a great article - http://www.awayback.com/revised-font-stack/
Getting Google fonts to work should be less of a problem, as all you need is a copy of the font in your computer’s fonts folder, a Freeway defined font set with that font in it, and Google’s markup in the header. You only need to worry about using the custom font set in Freeway if you want to retain the WYSIWYG experience.
Hi Marcel - I’m more interested in web fonts (from Google, Typekit, FontSquirrel etc) than font stacks, because it offers me the opportunity to use exactly the font I want to use and know the reader will see that font.
I think what I’m trying to ask is: if a serif typeface is deemed suitable for continuous text in print (say Garamond) then are all the factors that make is suitable still true for viewing on a screen?
or should we use a serif typeface specifically designed for the screen for body copy?
Paul - the font kits from FontSquirrel - are the different versions of the font that it generates done well? Is the hinting done well so that they look great on all browsers? or is it best to use services like Google Web Fonts and TypeKit where (I presume) they have invested huge amounts of time to get the hinting just right for each version of the font?
HI,
I think the hinting etc. (if it exists - I have no idea) depends on the browser/OS displaying it. Some of the font files provided by FontSquirrel are in formats such as SVG to ensure backwards compatibility with older browsers/devices. This may or may not have all the whizzy data needed to draw the fonts as you expect. Like much of the web, assume basic display, and anything more fancy on top is gravy.
I guess that the presence/absence of hinting depends on the licensing for the font. YMMV. Test before you deploy, etc…
Also be aware that Apple and Microsoft render fonts differently. Apple renders it as the designer intended, regardless of resolution or pixel density. Microsoft re-jigs the glyphs for display purposes. For example the horizontal bar on a capital letter H may get anti aliased by Apple if it falls on a pixel boundary. Microsoft will move it so that the fall over the boundary doesn’t happen, or is minimised. There is nothing you, the web designer, can do to influence either of these behaviours.
The font kits from FontSquirrel look fine to me - but as noted above, platforms, browsers etc. may well impact on the final result. I don’t think we can be as precious about this kind of fidelity for some time yet. Yes, we may want it, but right now we probably aren’t going to get it.
Mark sorry this was the article I meant to post - http://samiam.org/blog/20110719.html In my experience it is really hard to get fonts to look great across all browsers and operating systems. The designer of the Merriweather font - Ebin Sorkin - is doing a lot of reworking and tweaking to address the hinting issues and will be releasing an update soon.
I do not have a list of fonts that are suitable for onscreen viewing, I suppose the best thing to do is to view the fonts that you’re interested in using on both Mac and PC machines to see how they render.
Just too many variables with with onscreen rendering to have perfect typography on every platform.
I don’t think we can be as precious about this kind of fidelity for some time yet. Yes, we may want it, but right now we probably aren’t going to get it.
When you say to use an Apple and PC to test view fonts, does that include MS windows on a Mac (I use parallels) or will that ‘cheat’ the results (Render as a mac). Another way put, will the virtual machine render truly as a PC?
Thanks
Frank H.
On Aug 8, 2011, at 7:30 AM, Helveticus wrote:
Mark sorry this was the article I meant to post - http://samiam.org/blog/20110719.html In my experience it is really hard to get fonts to look great across all browsers and operating systems. The designer of the Merriweather font - Ebin Sorkin - is doing a lot of reworking and tweaking to address the hinting issues and will be releasing an update soon.
I do not have a list of fonts that are suitable for onscreen viewing, I suppose the best thing to do is to view the fonts that you’re interested in using on both Mac and PC machines to see how they render.
Just too many variables with with onscreen rendering to have perfect typography on every platform.
I don’t think we can be as precious about this kind of fidelity for some time yet. Yes, we may want it, but right now we probably aren’t going to get it.
When you say to use an Apple and PC to test view fonts, does that include MS windows on a Mac (I use parallels) or will that ‘cheat’ the results (Render as a mac). Another way put, will the virtual machine render truly as a PC?
Thanks
Frank H.
On Aug 8, 2011, at 7:30 AM, Helveticus wrote:
Mark sorry this was the article I meant to post - http://samiam.org/blog/20110719.html In my experience it is really hard to get fonts to look great across all browsers and operating systems. The designer of the Merriweather font - Ebin Sorkin - is doing a lot of reworking and tweaking to address the hinting issues and will be releasing an update soon.
I do not have a list of fonts that are suitable for onscreen viewing, I suppose the best thing to do is to view the fonts that you’re interested in using on both Mac and PC machines to see how they render.
Just too many variables with with onscreen rendering to have perfect typography on every platform.
I don’t think we can be as precious about this kind of fidelity for some time yet. Yes, we may want it, but right now we probably aren’t going to get it.
I use emulation for this, and the way I look at it is you see things
as a really nice PC would see them. It’s important to realize that
most PCs are commodity devices, built on a budget, and the choice of
screen technology and graphics card can really tell. So definitely use
emulation, but don’t count on things looking as nice elsewhere as they
may on your Mac running Windows. The typography engine stuff will
definitely be true – you will see Microsoft Typography in all its
oxymoronic glory – but you will see it through a screen that only the
top 1% of “WinTel” manufacturers would ever think to use.
Walter
On Aug 8, 2011, at 12:36 PM, Frank H wrote:
When you say to use an Apple and PC to test view fonts, does that
include MS windows on a Mac (I use parallels) or will that ‘cheat’
the results (Render as a mac). Another way put, will the virtual
machine render truly as a PC?
Thanks
When you say to use an Apple and PC to test view fonts, does that include MS windows on a Mac (I use parallels) or will that ‘cheat’ the results (Render as a mac). Another way put, will the virtual machine render truly as a PC? Thanks
Frank, I have a separate PC that I bought cheap at a big box office supply store with a crappy uncalibrated LCD display - for the true lowest common denominator experience.
When you say to use an Apple and PC to test view fonts, does that include MS windows on a Mac (I use parallels) or will that ‘cheat’ the results (Render as a mac). Another way put, will the virtual machine render truly as a PC? Thanks
Frank, I have a separate PC that I bought cheap at a big box office supply store with a crappy uncalibrated LCD display - for the true lowest common denominator experience.
Have to say I agree with pretty much all of the above.
I design on the Mac and when I’m beginning to reach the point where I’m feeling pretty pleased and a little smug – my partner views it on the PC. This dose of reality generally puts me right back in my place and as often as not, back to the ‘drawing board’.
This disparity between platforms recently reached the point in our office, where my partner could no longer stomach the ongoing disappointment of her PC – and so went out and bought a Mac.
She now runs emulation software and has since discovered a whole new range of frustrations…
I think the touchstone of a cheap, standalone Windows machine is the best and simplest method for checking a worst case scenario – and the one in which 90% (at least) of business orientated websites are likely to be operating in.
WOW. That’s a scary article. Basically saying: do not use web fonts.
I’ve done a bit more research. FontFont say this “Great care was taken to optimize Web FontFonts for display on nearly any screen, whether that screen is connected to a Mac or driven by Windows with ClearType switched on.”
Your article suggests that many users on older Windows will not have ClearType. Therefore we should steer clear of web fonts.
However, if the user doesn’t have ClearType doesn’t this mean that any typeface will look awful (even if they have the font on their PC, like Georgia for example)?
Or will web safe fonts look OK even without ClearType?
Maybe just saying, cheap PCs look awful. Which their owners know full
well (or don’t), but which they are certainly used to.
I used to sweat every detail of what IE5 or 6 would see, and I gave up
over a year ago. I never show graphical layouts to my clients any
more, only HTML/CSS. When someone looks at one such with their
crippled browser, they see a limited subset of the full design, but
they never know any better.
One day later they get an iPad and call me up to say, “Hey, thanks for
doing the mobile version!” Meaning, of course, that they suddenly
realized that there were rounded corners, soft shadows, and
translucent colors everywhere.
Walter
On Aug 10, 2011, at 4:37 AM, Mark wrote:
WOW. That’s a scary article. Basically saying: do not use web fonts.
Well said Walter. Just last week I had a client notice the nice rounded buttons and gradient backgrounds when he got a new iPad.
Make peace with the fact that designing for browsers is not designing for print. Keep on doing excellent work and know that perfection can not be achieved when dealing with multiple versions of operating systems and browsers for people who do not care or know any better.
Q. I presume web fonts will look awful for PC users without ClearType switched on (when used for body copy)?
A. Most likely yes. Most fonts are not hinted for “Standard” rendering on Windows XP.
Q. If this is the case what percentage of PCs don’t have ClearType?
A. I don’t have an exact figure for you. However, ClearType (and now DirectWrite in IE9) is enabled by default on all Vista and Windows 7 machines. As well as all XP machines that have installed IE8 which automatically sets the system default to ClearType. IE7 has ClearType enabled by default as well.
So the danger zone here is an XP machine running Firefox or Chrome with ClearType turned off. We provide browser samples for this scenario. Our XP samples are set the default so only IE7 should have ClearType enabled.
---- Looking at my Google Analytics, over the last year, 19% of my visitors are using Windows XP. I don’t know what percentage of these are using Firefox and Chrome. I’m guessing half. So for 10% of my visitors the body copy set in a web font would be almost unreadable.
Q. But then, will system fonts (say Georgia) look awful for PC users without ClearType switched on (when used for body copy)? i.e. if all fonts look awful, this shouldn’t stop me using web fonts?
A. In my opinion they look awful but they’re readable. Even standard system fonts like Georgia don’t look fantastic under these circumstances. This is still something worth considering and unfortunately, there’s not a super simple answer. I would say our browser samples are a good place to start.
---- I don’t think this answer clarifies the situation. Will a system font (web safe font) be more legible than a similar web font?