PeepCode

Typography

The redesign of this site uses several experimental typographical features that you won’t see on many other websites.

But feel free to loot these ideas for your own site!

Fancy Ampersands

Most typefaces don’t have an interesting ampersand (& vs &), but you can specify a better one in titles. I use a technique made popular by Dan Cederholm where he wraps them in a special span that is styled with an interesting italic ampersand.

A custom Rails helper method does the automatic span wrapping on selected elements.

span.amp {
  font-family: "Palatino", serif;
  font-size: 110%;
  font-style: italic;
}

Consistent Baselines

Graphic designers know that layouts with a consistent baseline will look much better than inconsistent ones.

Even if you are not a graphic designer, this is an easy way to make your text look tidy.

Our free Baseline Rhythm Calculator can be used to generate a basic stylesheet with the proper calculations.

Click see the link under “Fun and Games” for an example used to debug this site.

If you want to calculate it yourself, the steps are straightforward:

• Choose a base font size (12px for this site). Declare this in the body section of your stylesheet.
• Choose a consistent line-height for all the text on the page (18px for this site). Using 1.5× the base font size is a good value to start with: 12/18, 14/21, etc.
• Specify all non-body font-sizes in em’s.
• For any elements that use a larger or smaller font-size, calculate the line-height and an equal margin-bottom by using (base line height in pixels / current font size in pixels). This will give you the corresponding line-height in em’s.

Or, let the Baseline Rhythm Calculator do this for you.

Elements that can stomp on your rhythm:

• code and pre elements often use a different font with a larger line-height. Set the line-height to 90% in order to keep the rhythm steady.
• Images. We use the unobtrusive_javascript plugin and our Baseline Rhythm Calculator to replace relevant images with a properly sized div that uses the image as a centered background. See the fitImageToBaseline function in this site’s javascript.
• submit buttons in forms can also throw off the rhythm.