Typographic web design

How to think like a typographer in HTML and CSS.

Syntax Samples

Since the book has a two-column layout, following multiple lines of complex syntax can get confusing. Where should you include a space? Where will including a space break the syntax?

The two longest bits of syntax are provided below for your copy/paste convenience.

DocType Declaration

To start an HTML document, copy and paste the syntax below into your HTML page. Note: the Doctype declaration provided is from the W3C Quality Assurance Recommended list of Doctype declarations page. I’ve made small changes to the title and body content.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>Title of the document</title>
	<meta http-equiv="content-type" 
		content="text/html;charset=utf-8" />
</head>
<body>

</body>
</html>

@font-face

When linking to web fonts using the @font-face declaration, I find it’s easiest to use the syntax provided in the @font-face kits from FontSquirrel.com.

Below is the syntax I use to link to Chopin Script in Lesson 4. I always put my fonts in a “fonts” folder, so I add a “fonts/” to the source URL.

@font-face{
    font-family:'ChopinScriptRegular';
    src:url('fonts/ChopinScript-webfont.eot');
    src:url('fonts/ChopinScript-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/ChopinScript-webfont.woff') format('woff'),
         url('fonts/ChopinScript-webfont.ttf') format('truetype'),
         url('fonts/ChopinScript-webfont.svg#ChopinScriptRegular') format('svg');
    font-weight:normal;
    font-style:normal;
	}