In his Richard Rutter presentation at An Event Apart in Minneapolis MN, Richard Rutter walked through a preview of the detailed typographic control CSS3 will offer in the future. Here's my notes from his talk:
- Everyone working on the Web is a typographer whether you know it or not.
- CSS has a hard time mapping font weight to actual type on your computer. Different browsers use different fonts for the same font-weight declarations. Fonts can have different names/weights on your machine so even if the appropriate weight is specified it may not appear correctly.
- CSS 2 introduced font-stretch but is was dropped in CSS 2.1 and is now back in CSS 3. It matched roughly to condensed and expanded font family styles.
- Font-stretch has different implementations across different browsers and platforms some select base on width, others on weight. So there is really only one way to get condensed, expanded, superlight and extra bold fonts working in Web browsers: linking with @font-face.
- But you have to ensure you've created the right font file formats for each browser. That includes: Embedded OpenType (EOT), WOFF, TrueType (ttf), and SVG
CSS3 fonts module
- Open type features are now available in the CSS3 fonts module. This provides a lot of control over many little details in Web fonts.
- Ligatures are special characters that form automatically form combinations of other letters. They are intended to improve legibility. Core Web fonts don't need them as they are designed to be legible online.
- text-rendering: optimizeLegibility; will turn on font ligatures automatically.
- You can turn common ligatures on and off using font-variant-ligatures: common-ligatures;
- Additional ornamental ligatures are also available but should be use with caution as they are not intended to strictly improve reading. Use font-variant-ligatures: common-ligatures additional- ligatures;
- You can embellish fonts by turning font-variant-alternatives on for letter forms on like swashes and styles using: font-variant-alternates: stylistic(1); or font-variant-alternates: swash(1);
- Values for font-variant-alternates are mapped to OpenType features and include: stylistic(n) contextual no-contextual historical-forms, etc.
- font-variant-numeric: oldstyle-nums; allows you to use lining and old style numbers in font faces. You can even modify how fractions are represented using: font-variant-numeric: diagonal-fractions slashed zero;
- Small cap variants can be triggered using font-variant-caps: small-caps;
- Tighter control of font kerning comes form the font-kerning property.
- None of these properties work yet with these CSS styles. But font-feature-settings allows you to control these features now. The syntax is not as nice but it works. See the CSS OpenType Font Feature demo.
Hyphens
- Hyphens are the elephant in the room. The two things that don’t have hyphenation: children’s books and the Web.
- hyphens: auto; But you still need vendor pre-fixes. -webkit-hyphens : auto; -moz-hyphens : auto; hyphens : auto; This works only on Safari 5.1 on Lion. Is being worked on for Firefox 6.
- There are additional details that can be controlled with hyphens which are being specced out but can't be used just yet.
- hyphenate-limit-zone: allows you to control the minimum size of the gap at the end of a line before it get's hyphenated.
- hyphenate-limit-last: can set whether or not the last line gets hyphenated.
- hyphenate-resource: allows you to manage international variations for hyphenating
- CSS3 typography has some things you can use now, a lot you can't yet.