Better typography with CSS
IN COMPARISON TO PRINT DESIGN, THE WEB IS SEVERELY CRIPPLED TYPOGRAPHICALLY
IN COMPARISON TO PRINT DESIGN, THE WEB IS SEVERELY CRIPPLED TYPOGRAPHICALLY. BUT IT DOESN’T HAVE TO BE THIS WAY, OH NO…
Click here to download all the source files for this tutorial http://www.webdesignermag.co.uk/?page_id=85
IT’S A COMMON frustration for print designers moving to designing for the web that the typographic controls appear so limited. There’s a tiny selection of web-safe fonts – until recently, no font smoothing or anti-aliasing – and you can forget about manual kerning. Many designers resign themselves to using Arial, or Helvetica if they’re lucky, and setting the leading (the line height) and leave it at that. While it’s true that you can’t control the rendering of your typography in the same way as when designing for print, there is plenty of opportunity to make your typography more beautiful. In this tutorial, we’re going to look at some simple techniques you can apply to any bit of copy to dramatically improve the visual appeal and readability. We’ll start with some text marked up semantically, and won’t touch the XHTML at all in this exercise; everything will be achieved with CSS. We’ve also provided two style sheets. The first one is the starting point, a shell for your code.
01 Begin the typographical journey
Locate the HTML file ‘start.html’ on the Web Designer disc, and load it up in your favourite web editor. We’re using Dreamweaver here, but you could just as easily use a standard text editor. Open the CSS file called ‘blank.css’. You’ll be working on the CSS file only, but take a quick look at the HTML to get acquainted with the markup we’re using here. The HTML we’ve provided is an extract from The Time Machine by H. G. Wells. We’ve got a main heading, the book title, the author as a second-level heading, the chapter as an H3 and then a series of paragraphs. There’s also an image, a pull quote marked up as a <blockquote> and a footer with copyright information.
02 Preview in your browser
Open the start.html page up in your web browser to get a feel for how it looks with the styling already present. We’ve styled the container and page background to create a simple printed-page effect. We also set the footer and decided upon Georgia as the font of choice for this document.
03 Deal with the basics
It is always good to get the basics out the way, so first of all, add the following code into your style sheet. This will set the image to float over to the right, and additionally gives it both a border and a margin. The paragraphs are set to have a nice, wide margin left and right (which helps readability by limiting the line length), are justified and given a line height of 1.4em, which is 140 per cent of the font size. This creates a nice amount of white space between the lines of text, helping the reader to quickly and easily find the beginning of the next line when they reach the end of the one they were just reading.
border: 1px solid #83201a;