Getting the most out of your web-type
I want to talk about Monokrom & Webtype's promotional site. Specifically I'm going to explain some of the super simple css I used to keep type looking crisp and consistent between browsers.
You might already know that web font developers hint their letters at different sizes to maintain a consistent appearance. If not Monokrom has a good example explaining it with their font Aften. What I want to talk about is what we can do as developers to help those fonts out.
Here it is. Just adjust for your browsers or add prefixfree.
body{ /* Crisp sharp text */ font-smoothing: subpixel-antialiased; /* Turn on kerning and ligatures */ text-rendering: optimizeLegibility; /* Sometimes I choose this instead because bright colors seem thicker with optimizeLegibility*/ text-rendering: geometricPrecision; }
Also keep in mind that Opentype small caps aren't supported in Safari yet. I recommend giving them an italic fallback – so that there is still hierarchy.
.text{ font-feature-settings: "smcp" 1; } /* For Webkit */ @media screen and (-webkit-min-device-pixel-ratio:0){ .text{ font-style: italic; } }
Line heights/vertical metrics are also inconsistent for PC, so it is wise to keep a javascript solution ready. Some developers will argue that this isn't the safe way to do this since you can trick the DOM... but if someone is trying to hack my site I'm perfectly content with denying them consistent vertical rhythm. You will have to customize this to your own type of course.
<script> if (navigator.appVersion.indexOf("Win")!=-1) { /* For Chrome on Windows */ if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1){ $('.TypeThatNeedsAdjusting').css('margin-top','-1em'); }; /* For Firefox on Windows */ if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1){ $('.TypeThatNeedsAdjusting').css('margin-top','-1.5em'); }; /* For IE on Windows */ var ieversion = new Number(RegExp.$1); if (ieversion>=8){ $('.TypeThatNeedsAdjusting').css('margin-top','-0.5em'); }; if (ieversion>=7){ $('.TypeThatNeedsAdjusting').css('margin-top','-0.6em'); }; if (ieversion>=6){ $('.TypeThatNeedsAdjusting').css('margin-top','-0.3em'); }; if (ieversion>=5){ $('.TypeThatNeedsAdjusting').css('margin-top','-0.7em'); }; } </script>
After this you should be good to go. Have fun and play with Opentype features, they're awesome!
.example-features{ /* Common Ligatures */ font-feature-settings: "liga"; /* Discretionary Ligatures */ font-feature-settings: "dlig"; /* Small Caps */ font-feature-settings: "smcp"; /* Lining Numerals */ font-feature-settings: "lnum"; /* Oldstyle Numerals */ font-feature-settings: "onum"; /* Swash Alternatives */ font-feature-settings: "swsh"; /* Stylistic Sets from 1 - 20*/ font-feature-settings: "ss01"; font-feature-settings: "ss02"; font-feature-settings: "ss03"; }