1. .net technique css
C
CSS better l CD
Your essentia uire
’ll req
All the files you
for this tutori
found on this
al can be
issue’s CD.
web typography
This issue, Craig Grannell demonstrates how to take a leaf out of print typography’s
l
handbook in order to transform your type using a baseline grid
Knowledge needed Intermediate CSS and HTML wrapper div, is split between two divs – one for the main content (which has an id
value of mainContent) and a sidebar (which has an id value of sidebar). Because
Requires A text editor both of these divs will be floated, to stack them horizontally and fashion a
Project time 10 minutes two-column page, the clearFix clearing technique will be used to ensure that the
background of the wrapper is displayed behind the content within (hence the
clearFix class value for the wrapper div). If the floated content wasn’t cleared,
The world of print design still hasn’t made a substantial impression on most browsers would consider it to take up no vertical height, and the wrapper
the web. Sure, a few things are nicked now and again, but most web background wouldn’t be shown.
designers remain blissfully unaware of what their QuarkXPress- or As for what’s within the columns, we’re working with text-based content, which
InDesign-loving pals are up to. Mostly, that’s fine, but there are occasions when is structured in a logical, hierarchical and semantic manner. The main column
web designers should turn to print specialists for their know-how, and one of begins with a level-one heading followed by a couple of paragraphs. After this,
these occasions is the use of type. there’s a level-two heading, then a paragraph and a blockquote, which will be
Successful typography should come naturally to print designers, but lettering fashioned into a pull-quote. Note the use of the cite element for the quote credit.
is lagging behind on the web. Things are getting better, with web designers
understanding CSS and getting to grips with handy tricks such as Flash image <blockquote>
replacement, but we want more! Which is why we’re delving into the murky <p>This is where the pull-quote content goes. Lorem ipsum dolor sit amet,
waters of the baseline grid and looking at how it can help your online type. consectetuer adipiscing elit.</p>
A baseline grid is something that forces text to adhere to the spacing in a ruled <p><cite>Name Surname</cite></p>
pad. Vertical rhythm is maintained down the page, which is particularly handy for </blockquote>
books because the words on one page won’t be visible in the gaps between the
lines overleaf. However, it also results in great spacing that’s easy on the eye. The The remainder of this section contains some paragraphs and level-three headings.
printing issue isn’t that relevant online, but rhythm is – text can be hard to read For the sidebar, there’s a single level-two heading (the largest one available for this
onscreen, so any method that can make this process easier is worth investigating. area of the page, because it’s generally recommended that you stick to a single
level-one heading per page, otherwise search engines get all grumpy) and a
Head to the .net CD couple of paragraphs.
The ‘start-here’ folder on the CD includes the files you need to work through in In the style sheet, the first three existing rules are *, html and body. The first
this tutorial. The HTML document already links to the CSS file, and its body section zeros all margins and padding, while the other rules set the default font-size to
has content included. The page’s structure is simple: the page content, all within a 62.5%, meaning that, in a default browser set-up, fonts can be sized in ems using
values a tenth of the target pixel size. The body rule also sets a default font stack
(using variants of the Lucida family, falling back to Arial, Helvetica and sans-serif),
along with providing some body padding.
The next four rules deal with styling the page’s structure. The wrapper div is
assigned a fixed width and a vertically tiling background image (which is a single-
pixel GIF), and is centred using margin values of 0 auto. The mainContent and
sidebar divs are floated left and given fixed widths; a margin-right value is applied
to #mainContent, setting space between the columns. Finally, the clearFix rule
clears the floated content, so that the background on the wrapper is shown.
Style the headings
Before you begin to style the headings, the baseline grid’s line-height must be
decided. For the main content area, this example will use a target of 20 pixels,
which will create an open leading for typically sized web copy. Remember that
font-size settings will be in ems, using values a tenth of the target pixel size. This
makes the effective line-height for the page 2em. All element-specific line-height
and margin values must adhere to this value (or multiples thereof, though zero
is an option for removing margins) in order for the grid to not be broken.
To get the relevant line-height and margin values, take the baseline grid value
(2em) and divide it by the font-size settings. Witness the following code block:
h1 {
Sumptuous spacing All the faffing about involved in figuring out line-height and margin
values is worth it when you see the complete page in all its rhythmic glory
font-size: 2.0em;
70 .net october 2007
NET168.tut_css 70 28/8/07 17:02:53

2. .net technique css
Use background images
to keep your grids neat
White squares are the key to rhythmical text
When working with fairly complex numbers for line-height and margin
values, it’s easy to make mistakes, unless, of course, you’re a sentient
calculator, in which case you have problems of your own! When creating a
page with a very strict vertical rhythm, having a break in the rhythm would be
rather like New Order’s Blue Monday suddenly turning into a waltz for a few
seconds: bizarre, jolting and painfully ugly.
To help ensure that rhythm is being maintained, create background images
that comprise a white square the height of your baseline grid, with a single-
Have you got rhythm? Using tiled background images with single-pixel lines for the pixel line at the bottom. These can then be tiled behind the content areas,
baseline grid can help you sanity check your various values, maintaining vertical rhythm resulting in a background akin to ruled paper. If your content happily lines up
all the way down the page, you can jump for joy. If not, you can hop to Argos
line-height: 1em; and buy a new calculator.
margin-bottom: 1em; Note that when using such backgrounds, it helps if you don’t add further
} complications in terms of margins and padding. Therefore, in the ‘completed-
h2 { project-lined’ folder on the CD, you’ll see that the padding-top value for
font-size: 1.5em; #sidebar is commented out, making sure the sidebar text sits neatly over the
line-height: 1.3333333em; grid while it’s being worked on.
margin-top: 1.3333333em;
margin-bottom: 1.3333333em;
} the line-height is adjusted (2.0/1.3 = 1.5384615em). Finally, the cite element
h3 { is styled, its content being aligned right and emboldened.
font-size: 1.3em;
line-height: 1.5384615em; blockquote {
margin-top: 1.5384615em; padding: 2em 0;
} margin-bottom: 2em;
background-color: #eeeeee;
Here, the level-one heading has a font-size value of 2.0em. The line-height and border-left: 2em solid #cccccc;
margin-bottom settings are defined as 1em, meaning they each take up exactly padding-left: 2em;
one row of the baseline grid. But when the font-size is different to the baseline padding-right: 2em;
grid’s line-height setting, things are more complex. For the level-two heading }
(font-size 1.5em) to adhere to the grid, its line-height and margin values must blockquote p {
be set to 2.0/1.5 or 1.3333333em (or a multiple thereof, or zero for margins that margin-bottom: 0;
aren’t required). Similarly, the values for h3, font-size 1.3em, are derived from font-size: 1.3em;
2.0/1.3, which is 1.5384615em. line-height: 1.5384615em;
Note that as long as the overall height taken up by an element and its margins }
is within the rhythmic boundaries of the baseline grid, you can tinker with the cite {
settings. For the level-two heading, the equal margin-top and margin-bottom font-weight: bold;
settings place it directly between previous and subsequent content, not making it font-style: normal;
visually obvious which content the heading belongs to. By moving half of the display: block;
margin-bottom value to the margin-top value, the heading is repositioned – text-align: right;
moved downwards slightly – but the overall page rhythm is maintained. }
h2 { Styling the sidebar
font-size: 1.5em; While some people suggest that vertical rhythm should be maintained across an
line-height: 1.3333333em; entire page, many argue that sidebars should maintain their own unique vertical
margin-top: 2em; rhythm, helping distinguish the text within from that elsewhere on the page. (To
margin-bottom: 0.6666666em; ensure that this combination of vertical rhythms isn’t disruptive and doesn’t clash,
} the wrapper div has a single-pixel separator, added earlier.)
To override the settings created previously, a reset rule is added,
Paragraphs and pull-quotes #sidebar *, which affects all elements within the sidebar div. (For more
For the p rule, which styles the paragraphs, use the same system as with the
headings. Set the font-size to 1.2em and the line-height and margin-bottom values
to 2.0/1.2, which is 1.6666666em. Expert tip Consider your fonts
Styling the pull-quotes requires some lateral thinking. For the blockquote
element, the page’s default font-size is inherited, and so its effective font-size value If you’re a fan of esoteric fonts, the web’s limitations must grate. Sure, you
is 1.0em. By adding 2em of padding top and bottom and a margin-bottom value can render type as an image or use a Flash-based replacement technique,
of 2em, the spacing around the blockquote and within it maintains the vertical but that’s only feasible for small areas. However, don’t plump for the
rhythm of the page. Other property/value pairs add some decoration to make obvious; Arial, Verdana and Georgia may rule the roost, but Lucida is
the quote stand out from other content. common across all platforms, Geneva (Mac) and Tahoma (Windows) are a
The second rule in the following code block adds further distinction for the passable pair, and the lovely Palatino Linotype – a Windows serif – has Mac
pull-quote text, removing the default margin-bottom setting for paragraphs within equivalents: Palatino (with Classic or iWork) and Book Antiqua (with Office).
the blockquote element, and increasing the font-size. Because of the latter setting,
.net october 2007 71 next>
NET168.tut_css 71 28/8/07 17:02:55

3. .net technique css
complex sites, it may instead be necessary to use a grouped selector,
overriding each element in turn – such as #sidebar h1, #sidebar h2,
#sidebar h3 and so on.) Here, the font-size is returned to 62.5%, the line-height
returned to 1em, and the margins removed.
#sidebar * {
font-size: 62.5%;
line-height: 1em;
margin-top: 0;
margin-bottom: 0;
}
For this example, the sidebar’s vertical rhythm will be 18px. Values are defined in a
similar way to those earlier in the walkthrough. For the level-two heading, a font-
size of 1.4em is assigned. This makes its required line-height and margin values
1.8/1.4, which is 1.2857142em. As per the level-two heading in the mainContent
div, half of the margin-bottom value is assigned to the margin-top value, resulting
in the values seen in the following code block. The values for the sidebar
paragraphs are dealt with in the same way: the font-size setting of 1.1em makes
the required line-height and margin values 1.8/1.1, which is 1.6363636em. (Again,
zero is an acceptable value if a margin isn’t required, hence no margin-top value.)
Tidying up IE6’s mess By default, IE6 screws up the sidebar’s top margin and incorrectly
places content below the pull-quote. Both problems are simple to fix via conditional comments
#sidebar h2 {
font-size: 1.4em; placement under the blockquote element, cutting it off at its left. The former issue
line-height: 1.2857142em; can be dealt with by adding padding to the top of the sidebar div, while the latter
margin-top: 1.9285713em; appears to be a hasLayout issue, which can be overridden by setting zoom to 1 on
margin-bottom: 0.6428571em; the offending element. Fixes should be applied using conditional comments, so
} add this code to the head section of the web page, after the existing style element:
#sidebar p {
font-size: 1.1em; <!--[if IE]>
line-height: 1.6363636em; <link rel=”stylesheet” type=”text/css” href=”ie-hacks.css” media=”screen” />
margin-bottom: 1.6363636em; <![endif]-->
} <!--[if lte IE 6]>
<link rel=”stylesheet” type=”text/css” href=”ie-6lte-hacks.css” media=”screen” />
The sidebar heading should line up with the first line of text in the mainContent <![endif]-->
div to make it more visually pleasing. This can be done by adding a padding-top
value to the #sidebar rule, working out how many pixels are required, and then Now create and save the two CSS documents linked to via the href rules in the
figuring out the equivalent value in ems, using a similar process to that shown previous code block. For ‘ie-hacks.css’, add the following rule to deal with the
elsewhere. The accurate figure is 1.3846153em, but sometimes you have to go sidebar content positioning:
by eye when it comes to typography, and 1.3em is more pleasing.
#sidebar {
Add overrides for IE padding-top: 4em;
Test the web page and all should be well in Firefox, Opera and Safari. Internet }
Explorer doesn’t entirely play ball, however: IE in general doesn’t correctly apply
the margin at the top of the sidebar, and IE6 (and earlier) screws up the content For ‘ie-6lte-hacks.css’, set the zoom value to 1 for the blockquote element:
blockquote {
Resources Find out more online
zoom: 1;
}
Upon doing this, your final page will work as intended in all major browsers.
You’ve now mastered the basic art of clean, easy-to-read online type.
The sidebar heading should line
up with the first line of text in
The myth of web-safe fonts
This article offers interesting insight
Five steps to better typography
Mark Boulton’s series on typography
the mainContent div
into fall-back fonts, with helpful is well worth a look. In five
recommendations about which fonts extremely concise articles, he talks
are similar enough to be used in a about important areas of type
About the author
stack. Find out why using Verdana that are just as important to web Name Craig Grannell
carelessly is a big mistake. designers as print designers. Site www.snubcommunications.com
www.safalra.com/hypertext/ www.markboulton.co.uk/journal/ Areas of expertise Information architecture, site concepts,
html/web-typography/web comments/five_simple_steps_to_ graphics, interface and front-end design
-safe-fonts-myth better_typography Clients Swim~, Rebellion, IDG
Who’s faster: Speedy Gonzales or Road Runner? Speedy Gonzales!
<prev 72 .net october 2007
NET168.tut_css 72 28/8/07 17:02:56