Where developers come to connect, share, build and be inspired.

76

Type Tips & Tricks (formerly Smooth Web Type)

5401 views

I use these on most of my sites to ensure the type is appropriately kerned, smoothened and doesn't bold funny when going through a transition or opacity change (you can see an example of such weirdness by hovering over the links right here on Coderwall). Most of them are CSS3 and many are Webkit-only, so I can't completely recommend them for your site or application, but try them out for fun.

1. Subpixel-Antialiasing (and Antialiasing too)

-webkit-font-smoothing: subpixel-antialiased;
font-smoothing: subpixel-antialiased;

Smooths out rough edges but causes type to look thicker. If you're working with type that is weighted to begin with, you may prefer to go the plain antialiased; route. Note that if you're working with subpixel-antialiasing and have animations, opacity changes or anything else that uses the browser's hardware acceleration, it will switch to antialiasing; during the transition. You can either set that element to antialiased; to begin with or utilize the translate3d method (#4 below) .

2. Optimize Legibility (Kerning)

text-rendering: optimizeLegibility;

Better aligns each character against its siblings. For additional letter-spacing tweaking, you'll get the most precision out of using ex instead of em's or worse - fractional pixels (which are hit-and-miss as far as support). -0.08ex to -0.045ex are some examples straight from my CSS so you can see how delicate it is (or how OCD I am).

3. Transparent Text-Shadow

text-shadow: 0 0 0 rgba(0,0,0,0);

This isn't super necessary, and you might find it more useful to add to ::selection, but it ensures that the text doesn't get a shadow when highlighted. Don't use it outside of ::selection if you use any shadows elsewhere.

4. Stop Aliasing Changes during CSS3 Animations, Opacity Changes & Transitions ()

-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);

Applied to an element that animates or otherwise transitions, this will override the browser's natural tendency to use its hardware acceleration's antialiasing setting. Unfortunately it has a side-effect of thinning out all text on a page even if it's buried deep in the DOM, so you may need to adjust the weight of your type or switch entirely to [-webkit-]font-smoothing: antialiased;.

5. Better Antialiasing on Rotated Elements (Try Both, Pick One)

-webkit-backface-visibility:hidden;
-webkit-transform-style: preserve-3d;

So this isn't for type, but if you're going to be messing around with transitions, you may end up needing it. I've only tested them on a simple rotated object, but both of them seem to achieve the same effect of better smoothing the rough edges. Like the above properties, applying these to an element produced thinned out all text on the page when I used them.

6. Additional Suggestions (aka Windows ClearType'd)

If you know the element is going to be on a solid background, you can further refine the way it looks by adding one or two text-shadows that are slightly lighter than the text color itself.

7. General Advice

Sometimes, despite putting these properties within html {} or body {}, it won't affect certain texts (admittedly I've not been paying attention to commonality between elements when this happens). Instead of having to paste it all over again, I'd suggest using your favorite pre-processor (Stylus/SCSS/LESS) to create a mixin so you can just call it when you need to.

If you're not using a pre-processor, please try one out! I highly recommend Stylus (with Nib), Sass (with Compass or Bourbon), or LESS (not sure what type of mixin sets are available here as a package, I always just used elements.less for generic stuff, but just like LESS itself, it is not nearly as powerful as the aforementioned pre-processors and their respective frameworks). You can write in any of these formats using LiveReload ($10) or CodeKit ($25), which will spit out the plain .css file. These apps also boast being able to compile HAML and Jade (for HTML), CoffeeScript (for JS), Slim (for Ruby) as well.

Comments

Add a comment