Get Your Type Back in Shape with These Simple Tricks

Kyle Fiedler

Type looking a little flabby? Overweight? Want to give it a kick in the pants? Take a look at some of these tricks to really give your web type a workout.


Refine the Windows physique

Looking to make your type render a bit better for your Windows and Linux users? Try text-rendering: optimizeLegibility;. It will enable ligatures and kerning tables in the font file making the type look extra nice. It takes the text a little longer to load which could be a problem. It’s best to use it on headers, especially on those @font-face fonts, and refrain from using it on really large blocks of text.

Shed some Webkit weight

Everyone’s reversed Webkit type has a little extra weight in the hips. -webkit-font-smoothing: antialiased; will help you lose a little of that weight around the middle by using antialias rendering instead of the default subpixel rendering. It will make type just a hairline thiner when using light type on a dark background. Read-webkit-font-smoothing reloaded and check out the test page for more information.

Remove those pesky widows

Have a problem with widows? Use jQWidont to zap those problem spots away. It will remove all those pesky widows for you by inserting a non-breaking space right before the last word.

Get some rhythm in your step

Create rhythm the easy way. Try using tools like typograph and Modular Scale to create a nice flow within your type. Both use traditional type scales to calculate sizes to help with your vertical spacing.

Feel Justified

Using justified type on the web can sometimes be a disaster. Hyphenator and text-justify: newspaper; (Only in IE - WHAT?) will help make sure that you’re shaping up the word-spacing and not letting it get too big. Hyphenator adds in semantic soft hyphens for you but it could be dangerous leaving your hyphenating up to a script. text-justify: newspaper; will adjust the spacing between letters and words instead of relaying solely on word-spacing.