---
title: Get Your Type Back in Shape with These Simple Tricks
teaser:
tags: design,typography
author: Kyle Fiedler
published_on: 2011-03-21
---

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.

![''](http://images.thoughtbot.com/ui/richard-simmons.jpg)

### Refine the Windows physique

Looking to make your type render a bit better for your Windows and Linux users?
Try [`text-rendering:
optimizeLegibility;`](https://developer.mozilla.org/en/CSS/text-rendering). It
will enable [ligatures](http://en.wikipedia.org/wiki/Typographic_ligature) and
[kerning](http://en.wikipedia.org/wiki/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](http://en.wikipedia.org/wiki/@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;`](http://maxvoltar.com/archive/-webkit-font-smoothing) will help
you lose a little of that weight around the middle by using
[antialias](http://en.wikipedia.org/wiki/Anti-aliasing) rendering instead of the
default [subpixel rendering](http://en.wikipedia.org/wiki/Subpixel_rendering).
It will make type just a hairline thiner when using light type on a dark
background. Read[-webkit-font-smoothing
reloaded](http://christophzillgens.com/en/articles/-webkit-font-smoothing-reloaded)
and check out the [test
page](http://files.christophzillgens.com/webkit-font-smoothing.html) for more
information.

### Remove those pesky widows

Have a problem with [widows](http://en.wikipedia.org/wiki/Widows_and_orphans)?
Use
[jQWidont](http://davecardwell.co.uk/javascript/jquery/plugins/jquery-widont/)
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](http://lamb.cc/typograph/) and [Modular
Scale](http://modularscale.com/) 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](http://en.wikipedia.org/wiki/Justification_(typesetting)) type
on the web can sometimes be a disaster.
[Hyphenator](http://code.google.com/p/hyphenator/) and [`text-justify:
newspaper;`](http://www.blooberry.com/indexdot/css/properties/intl/textjustify.htm)
(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.