mindgarden

I’m very happy that we were able to launch the preview for the new version of Google web fonts yesterday. You can go and check it out here: http://www.google.com/webfonts/v2

This has been the effort of a very small but very amazing team and we’ve been working hard all year to bring you the new UI.

I hope you enjoy the new Google web fonts and I hope to be able to tell a little more about the design process at some point. Stay tuned for the full launch soon..

Check out yesterday’s Google Web Fonts presentation from Google IO:

One aspect of web typography that slightly borders on magic to everyone who is not a font designer are font metrics.

Typekit’s Tim Brown has published an excellent piece on vertical font metrics on the typekit blog. In it he explains:

Font files provide structure for glyphs by establishing the invisible bounds that will govern them. A font’s em square and baseline determine its relative size and placement when typeset. Vertical metrics influence the height of ascenders and depth of descenders.

and also why this can be a challenge for web designers:

Even when fonts’ em squares are sized to the specification of our CSS, the positioning of fonts’ baselines, the size of letterforms relative to their em squares, and fonts’ vertical metrics will vary from typeface to typeface. So the size and spacing of text we see in web browsers will also vary

To paraphrase in short: the appearance of text can vary depending on the font you use.

Addressing these issues with vertical metrics Raph Levien from the Google web fonts team has posted some recommendations on the topic. As this discourse is taking place very much in the context of font design which can be a bit obscure to the us regular web designers, I want to extract the advice to web designers found in it and re-emphasize it here:

Always specify an explicit line-height CSS property (for example, 1.2), rather than relying on “line-height: normal”. The latter cannot be made to be completely consistent across all browsers, and is also likely to change as the vertical space budget is increased to extend fonts into more international scripts.

By not setting your line-height your simply setting it to normal you leave it to the browser to calculate the leading of the text on your page. Which can vary across browsers and operating systems. By setting your line-height you reduce the risk of any clipping of text taking place.

If you are a bit rusty in these finer details in typography there is an excellent set of slides by Russ Weakley on slideshare that lets you refresh your memory: