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
bodysection of your stylesheet. - Choose a consistent
line-heightfor 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-
bodyfont-sizes inem’s. - For any elements that use a larger or smaller
font-size, calculate theline-heightand an equalmargin-bottomby using(base line height in pixels / current font size in pixels). This will give you the correspondingline-heightinem’s.
Or, let the Baseline Rhythm Calculator do this for you.
Elements that can stomp on your rhythm:
codeandpreelements often use a different font with a largerline-height. Set theline-heightto90%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
fitImageToBaselinefunction in this site’s javascript. submitbuttons in forms can also throw off the rhythm.
Free Samples
What People Are Saying About PeepCode
“PeepCode is awesome!” Tim O'Reilly, O'Reilly Media
“I suspect there are a lot of smart DF readers out there who know nothing about the Unix-y aspects of Mac OS X, would like to, but never found a good way to get started. This screencast is it.” John Gruber, Daring Fireball
“These things are fantastic and the price is a steal. I strongly urge you to support this effort and buy the episodes. What a terrific way to learn!” Scott Barron, Rails Core Committer
“I recently watched Screencasting with Final Cut Pro and it was a real life-saver - fantastic screencast!” Mark Lynn
“All the PeepCode screencasts are nothing short of awesome. Reading is one thing, but learning from [your screencasts] is enabling me to learn new things and advance like never before.” Todd Boteler
Have a Coupon?
Login or signup and enter the code on your account page. If it is still valid you will be able to browse the list of products and redeem an episode.