: What points should we take into consideration when choosing a web font? I want to deepen my knowledge in typography, more specifically, web typography. I'm looking for good information for this

@Sarah814

you need a good fallback font-stack, because you're not going to find a 100% solution on every device, in every browser.

you should be wrapping your fonts in @font -face, with every format covered, giving you maximum browser coverage of the desired font. font squirrel will create the @font -face syntax and convert your files for you.

google fonts and typekit are good at a few things, but there's also some overhead with them: you aren't in control 100%, you have to make extra http requests for their services, their services are not optimized, and you are dependent on them. third party solutions are not avoidable, but should be avoided at all costs; in my case, i avoid font third party solutions altogether by following the rules i laid out above.

what you truly want is an open type font, because css3 enables browser to utilize fonts in their entirety, basically letting you unlock open type features that we don't see one the web today, like small-caps, ligatures, etc. if the font you want to use isn't otf, you can still implement it in the methods described above with no problem; if it is otf, you can then use css3 to truly implement web typography.

there are javascript libraries, aside from font services like google fonts, that force browsers to comply; i typically shy away from them, but they certainly work. cufon is the best, but it also relies on flash so no iOS. there's also lettering.js, off the top of my head.

as for reading: you should start off with the basics, understanding @font -face and how it interacts with browsers/user-agents; understanding font formats, particularly .otf and the css3 properties that unlock otf's power. you'll want to read up on differences between browsers and .otf/css3 font features as well, if you plan on doing battle in that arena. the best place for looking these up are the individual browser spec sites for reference what each can/cannot do, but the holy grail is developer.mozilla and webplatform.org for html5/css3 references, as well as working solutions.

this list isn't definitive, however will help guide you on your way. take note of the bullet proof @font -face post by paul irish; he's run a series of posts in regards to getting cross-browser/platform @font -face syntax, and it is the "bulletproof @font -face" syntax that most web developers have in their toolkits. font squirrel implements it to its entirety when you have them roll @font -face kit for you.
www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/ http://blog.fontdeck.com/post/15777165734/opentype-1 webtypography.net/ http://www.w3.org/wiki/Typography_on_the_Web nicewebtype.com/ http://ffffallback.com/ developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings https://developer.mozilla.org/en-US/ blogs.msdn.com/b/ie/archive/2012/01/09/css-corner-using-the-whole-font.aspx read this blog, not just this post -> www.broken-links.com/2012/07/10/unlocking-opentype-features-with-css/ awesome tool -> clagnut.com/sandbox/css3/ clagnut's blog is dope too! -> clagnut.com/ http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/ opentype.info/blog/2010/08/14/better-web-typography-with-opentype-features/ and read the blog -> opentype.info/blog/ http://elliotjaystocks.com/blog/expert-subsets-for-css-in-123/
again, great blog -> elliotjaystocks.com/blog/ http://dev.w3.org/csswg/css-fonts/
open font features list www.microsoft.com/typography/otspec/featurelist.htm open type user guide (pdf) www.fontfont.com/staticcontent/downloads/FF_OT_User_Guide.pdf

i could list a lot more; if you could give me feedback here, in regards to how close this is to what you want, or how far off it is, i can respond with more appropriate content. typography on the web is almost ready and its an exciting time to be developing on the web.

Vote Up Vote Down

@Reiling762

I normally pick my web fonts based on three things: Rendering, availability and aesthetics.

Rendering

Not all fonts render the same way. While some look great in desktop, web is a completely different realm. To some degree it comes down to your audience, the OS and browsers they use. We have quite a few questions here on font rendering, to name a few:


Is there a web font that renders better than others in browsers?
Font-face loaded on Windows look really bad. Which fonts are you using that render better?


I personally like to grab a bunch of fonts I like and test them using different browsers, VMs or online services. I give each font a score for each major OS/browser and then choose between the ones with better scores.

Availability

This is not so much of an issue, but you should ask yourself: Are you hosting your own font, or using an online service such as Google Fonts of Font Squirrel? Will @font -face be available for everyone (think older versions of IE)? If not, which font will you fall to?

Aesthetics

Last but not least, you need a font that goes well with the message/service you are offering. Will you go for serif or sans-serif? What size? There are 'theories' behind font choices, but most designers will agree it's probably a matter of 'taste'.

Some related questions:


“Serifs improve fast, easy readability for long text” - myth or truth?
What are best practices for choosing and pairing fonts?
How are Serif and Sans-serif fonts different, and when should one use one over the other?

Vote Up Vote Down