Typography in a web template

What is Typography? Why is it so important?

Typography in HTML is the structure of your text content in web pages.

Using a good graphic layout in your website or web template without paying attention to typography, could produce negative experience for your website’s users.

If you want to have a success, you must give interesting informations to your users. In this case, typography can help you to improve readability of your content.

To understand better the importance of typography, you can compare a simple text file with a Microsoft Word Document that uses well formatted text: “titles, subtitles, paragraphs, text alignment, bolds, italics, coloured text, highlighted text”.

Comparing these kinds of documents, you can understand that well formatted documents can drive you through the content and improve your experience.

I don’t want annoying you with other reasons of why typography is important in your website or web template. It is just a blog post, not a typographic manual!

Commons Fonts used in HTML pages

The most useful fonts that ship with Macintosh and Windows are: Times New Roman, Georgia, Verdana, Geneva, Arial, Helvetica, Trebuchet, Sans-Serif and others.

The first properties to add in your CSS document to stylish your HTML content are: “font-family, font-size, line-height, color”.

With “font-family” property, you can set defaults fonts to use in your document.
Using “font-size”, you can set default size of the fonts selected in “font-family” and you can specify values using: px, pt, em.
“line height” property is used to specify the space between every line of text using “%” percentage value.
With “color” property you can set the color of your text using an RGB value.

See the sample CSS code below that applies typographyc properties for page body:

body {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   line-height: 140%;
   color: #000000;
}

Typographic Tags in HTML pages

As a Microsoft Word Document, in html pages you can add titles and subtitles (heading tags) simply using H1, H2, H3, H4, H5, H6 tags.

You can add paragraphs using “P” tag, ordered lists using “OL”, unordered lists using “UL”, list item using “LI”, text indentations using “Blockquote”, preformatted text or code using “PRE” or “CODE”.

Every of these elements can be formatted using CSS Styles. Below, you can see a sample HTML content and CSS properties assigned for every elements used in HTML.

HTML sample code:

Title of HTML page
Subtitle

Content inside a paragraph.
Ordered List

Item List 1
Item List 2
Item List 3

Unordered List

Item List 1
Item List 2
Item List 3

CSS sample code:

body {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   line-height: 140%;
   color: #000000;
}

p {
   margin-top: 10px;
   margin-bottom: 8px;
}

h1, h2, h3 {
   font-weight: bold;
   margin-top: 8px;
   margin-bottom: 6px;
}

h1 {
   font-size: 18px;
}

h2 {
   font-size: 16px;
}

h3 {
   font-size: 14px;
}

ul, ol {
   margin-left: 20px;
}

li {
   list-style-type: disc;
}

pre {
   font-size: 11px;
   margin-left: 20px;
   color: #666666;
}

Final Considerations

In this blog post I have attached some samples to show how to use HTML tags and CSS for Typography, assuming that you have just confidence using CSS and HTML.

You can copy and paste samples in your web pages. My only suggestion is to use separate CSS files for layout and typography, so you can manage easily your CSS properties.

Feel free to comment this post, I will reply you as soon as possible.