70 .net october 2007

.net technique css

Knowledge needed Intermediate CSS and HTML

Requires A text editor

Project time 10 minutes

The world of print design still hasn’t made a substantial impression on the web. Sure, a few things are nicked now and again, but most web designers remain blissfully unaware of what their QuarkXPress- or

InDesign-loving pals are up to. Mostly, that’s fine, but there are occasions when web designers should turn to print specialists for their know-how, and one of these occasions is the use of type.

Successful typography should come naturally to print designers, but lettering 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 replacement, but we want more! Which is why we’re delving into the murky waters of the baseline grid and looking at how it can help your online type.

A baseline grid is something that forces text to adhere to the spacing in a ruled pad. Vertical rhythm is maintained down the page, which is particularly handy for 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 printing issue isn’t that relevant online, but rhythm is – text can be hard to read onscreen, so any method that can make this process easier is worth investigating.

Head to the .net CDThe ‘start-here’ folder on the CD includes the files you need to work through in this tutorial. The HTML document already links to the CSS file, and its body section has content included. The page’s structure is simple: the page content, all within a

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 both of these divs will be floated, to stack them horizontally and fashion a 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, most browsers would consider it to take up no vertical height, and the wrapper background wouldn’t be shown.

As for what’s within the columns, we’re working with text-based content, which is structured in a logical, hierarchical and semantic manner. The main column begins with a level-one heading followed by a couple of paragraphs. After this, there’s a level-two heading, then a paragraph and a blockquote, which will be fashioned into a pull-quote. Note the use of the cite element for the quote credit.

<blockquote> <p>This is where the pull-quote content goes. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p><cite>Name Surname</cite></p> </blockquote>

The remainder of this section contains some paragraphs and level-three headings. For the sidebar, there’s a single level-two heading (the largest one available for this 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 couple of paragraphs.

In the style sheet, the first three existing rules are *, html and body. The first zeros all margins and padding, while the other rules set the default font-size to 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 headingsBefore 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 { font-size: 2.0em;

CSSC better web typographyThis issue, Craig Grannell demonstrates how to take a leaf out of print typography’slhandbook in order to transform your type using a baseline grid

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

Your essential CD

All the files you’ll require

for this tutorial can be

found on this issue’s CD.

NET168.tut_css 70NET168.tut_css 70 28/8/07 17:02:5328/8/07 17:02:53

the line-height is adjusted (2.0/1.3 = 1.5384615em). Finally, the cite element is styled, its content being aligned right and emboldened.

blockquote { padding: 2em 0; margin-bottom: 2em; background-color: #eeeeee; border-left: 2em solid #cccccc; padding-left: 2em; padding-right: 2em; } blockquote p { margin-bottom: 0; font-size: 1.3em; line-height: 1.5384615em; } cite { font-weight: bold; font-style: normal; display: block; text-align: right; }

Styling the sidebarWhile some people suggest that vertical rhythm should be maintained across an entire page, many argue that sidebars should maintain their own unique vertical rhythm, helping distinguish the text within from that elsewhere on the page. (To 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, #sidebar *, which affects all elements within the sidebar div. (For more

line-height: 1em; margin-bottom: 1em; } h2 { font-size: 1.5em; line-height: 1.3333333em; margin-top: 1.3333333em; margin-bottom: 1.3333333em; } h3 { font-size: 1.3em; line-height: 1.5384615em; margin-top: 1.5384615em; }

Here, the level-one heading has a font-size value of 2.0em. The line-height and margin-bottom settings are defined as 1em, meaning they each take up exactly one row of the baseline grid. But when the font-size is different to the baseline 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 be set to 2.0/1.5 or 1.3333333em (or a multiple thereof, or zero for margins that aren’t required). Similarly, the values for h3, font-size 1.3em, are derived from 2.0/1.3, which is 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 settings. For the level-two heading, the equal margin-top and margin-bottom settings place it directly between previous and subsequent content, not making it visually obvious which content the heading belongs to. By moving half of the margin-bottom value to the margin-top value, the heading is repositioned – moved downwards slightly – but the overall page rhythm is maintained.

h2 { font-size: 1.5em; line-height: 1.3333333em; margin-top: 2em; margin-bottom: 0.6666666em; }

Paragraphs and pull-quotesFor 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.

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 is 1.0em. By adding 2em of padding top and bottom and a margin-bottom value of 2em, the spacing around the blockquote and within it maintains the vertical rhythm of the page. Other property/value pairs add some decoration to make the quote stand out from other content.

The second rule in the following code block adds further distinction for the pull-quote text, removing the default margin-bottom setting for paragraphs within the blockquote element, and increasing the font-size. Because of the latter setting,

.net october 2007 71 next>

.net technique css

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-pixel line at the bottom. These can then be tiled behind the content areas, 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 and buy a new calculator.

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-project-lined’ folder on the CD, you’ll see that the padding-top value for #sidebar is commented out, making sure the sidebar text sits neatly over the grid while it’s being worked on.

Use background images to keep your grids neatWhite squares are the key to rhythmical text

Have you got rhythm? Using tiled background images with single-pixel lines for the baseline grid can help you sanity check your various values, maintaining vertical rhythm

Expert tip Consider your fonts

If you’re a fan of esoteric fonts, the web’s limitations must grate. Sure, you can render type as an image or use a Flash-based replacement technique, but that’s only feasible for small areas. However, don’t plump for the obvious; Arial, Verdana and Georgia may rule the roost, but Lucida is common across all platforms, Geneva (Mac) and Tahoma (Windows) are a passable pair, and the lovely Palatino Linotype – a Windows serif – has Mac equivalents: Palatino (with Classic or iWork) and Book Antiqua (with Office).

NET168.tut_css 71NET168.tut_css 71 28/8/07 17:02:5528/8/07 17:02:55

.net technique css

Resources Find out more online

The myth of web-safe fontsThis article offers interesting insight into fall-back fonts, with helpful recommendations about which fonts are similar enough to be used in a stack. Find out why using Verdana carelessly is a big mistake.www.safalra.com/hypertext/html/web-typography/web-safe-fonts-myth

Five steps to better typographyMark Boulton’s series on typography is well worth a look. In five extremely concise articles, he talks about important areas of type that are just as important to web designers as print designers.www.markboulton.co.uk/journal/comments/five_simple_steps_to_better_typography

<prev 72 .net october 2007

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.)

#sidebar h2 { font-size: 1.4em; line-height: 1.2857142em; margin-top: 1.9285713em; margin-bottom: 0.6428571em; } #sidebar p { font-size: 1.1em; line-height: 1.6363636em; margin-bottom: 1.6363636em; }

The sidebar heading should line up with the first line of text in the mainContent 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 figuring out the equivalent value in ems, using a similar process to that shown elsewhere. The accurate figure is 1.3846153em, but sometimes you have to go by eye when it comes to typography, and 1.3em is more pleasing.

Add overrides for IETest 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

placement under the blockquote element, cutting it off at its left. The former issue can be dealt with by adding padding to the top of the sidebar div, while the latter appears to be a hasLayout issue, which can be overridden by setting zoom to 1 on 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:

<!--[if IE]> <link rel=”stylesheet” type=”text/css” href=”ie-hacks.css” media=”screen” /> <![endif]--> <!--[if lte IE 6]> <link rel=”stylesheet” type=”text/css” href=”ie-6lte-hacks.css” media=”screen” /> <![endif]-->

Now create and save the two CSS documents linked to via the href rules in the previous code block. For ‘ie-hacks.css’, add the following rule to deal with the sidebar content positioning:

#sidebar { padding-top: 4em; }

For ‘ie-6lte-hacks.css’, set the zoom value to 1 for the blockquote element:

blockquote { 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.

About the author Name Craig Grannell Site www.snubcommunications.com Areas of expertise Information architecture, site concepts, graphics, interface and front-end design Clients Swim~, Rebellion, IDG Who’s faster: Speedy Gonzales or Road Runner? Speedy Gonzales!

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

The sidebar heading should line up with the fi rst line of text in the mainContent div

NET168.tut_css 72NET168.tut_css 72 28/8/07 17:02:5628/8/07 17:02:56