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.

About thoughtbot

We've been helping engineering teams deliver exceptional products for over 20 years. Our designers, developers, and product managers work closely with teams to solve your toughest software challenges through collaborative design and development. Learn more about us.