8 Rules for Creating Effective Typography

April 1st, 2010    51 Comments

Today we’re going to discuss something that is both a hot trend and timeless art: typography. The basic rules outlined below will help you become more aware of how you structure and use typography in your designs. Being conscious of these rules can improve nearly everything you create that contains a headline or major typographic element. Let’s get started!

Read More

How to Use TypeKit on Your Site: Step-by-Step

October 14th, 2009    14 Comments

Several options have cropped up recently for adding custom fonts to your website by utilizing the @font-face selector. TypeKit is an exciting new player in this game because it stands out in two key areas: ease of use and richness of fonts available. This tutorial will take you through several small, super simple steps to get TypeKit up and running on your site. You won’t find any advanced techniques or scripting here, so even if you’re a novice web designer this should be a cinch!

Read More

Introducing Typekit

May 30th, 2009    4 Comments

Font support on the web has long been a topic of debate. Recent years have seen the emergence of various techniques for embedding fonts through flash, a method known as Cufon, or various plays on the new @font-face CSS properties emerging slowly through CSS3.

The main limiting factor to date is that of font licensing. Understandably, foundries are reluctant to allow web designers to publicly host their font files for anyone to download. A few typefaces have been licensed for use online, but designers are severely limited in choice.

This week saw the announcement of a breakthrough system – Typekit.

Read More

Best of 2008 – Typography

December 22nd, 2008    5 Comments

Typography is beginning to come to the fore as one of the most crucial elements of web design as people start to understand its importance. There’s no doubt that if you perfect the size, style and position of type on your page, the rest of the design will flow much easier.

In part one of our 2008 roundup, we saw some of the most useful graphic design tutorials of the year. This second section will walk you through a selection of the best typography related resources and articles of 2008 – tutorials, downloads, fonts, and everything you need to perfect the use of type in your design.

Read More

Five Tips for Better Typography

July 5th, 2007    6 Comments

When designing online, people often overlook the need to careful consideration of font styles, sizes and colours. How you display and position the words on your page can have a dramatic impact on how long people stay on your site, and how much they take in.

If you follow our five simple steps below, you will see a dramatic improvement in the look and feel of your designs. You’ll benefit from readers spending a little more time browsing through your pages.

1. Use headings

Unlike a novel or a textbook, people rarely read your page word for word online. They scan through the text on the page to find what they are looking for. Using appropriate and regular headings can work wonders and really captivate your reader.

Ensure that you use h1 and h2 tags etc appropriately so that search engines can make more sense of your page and that it’s semantically correct.

2. Split up blocks of text

For similar reasons to the above, it is very important to split up blocks of text. It ensures that readers feel that they are progressing through the text and allows them to logically skip through your article to find what they came to. They are much more likely to stay, read through and locate what they needed when your text is easy to navigate and scan.

3. Line length and spacing

The length of your lines (the measure) is particularly important when designing your website to ensure legibility. A general idea is to try to keep your lines around 2-3 alphabets in length, or 52-78 characters. This isn’t always possible depending upon the layout of your website. It is often a good idea to ask people to read a page of your site in a few variations to see which one they read quickest, or find easiest to concentrate on.

Line spacing is also important (the vertical distance between lines). This can be altered in CSS, using the following rule:

p {
line-height:18px; }

Altering this can have a dramatic effect on how easy your page flows, and the legibility of text. Experiment and decide which settings look best for you!

4. “Style your punctuation”

By default, punctuation on the web is plain and a little boring. A good example of this is double quotes. By default, they are straight and vertical – not showing the reader whether they are at the beginning or end of a quote. With a little alteration, using the codes “ and ” respectively can give you curly quotes and result in text looking akin to those in this section heading.

5. Limit different fonts

A general rule we employ is not to use more than three fonts on any one page. One for headings and titles, one for subsection headings and one for the main body of text. Design Shack uses only two fonts throughout the website. Minimalism is key to keep the reader from being cluttered and confused, but used correctly different fonts can help to seperate sections and enhance the flow of the page.

Introduction to Online Fonts

June 18th, 2007    2 Comments

Often, when designing a website, the first things you consider are the colour scheme, logo and layout. All vital aspects, without a doubt, but make sure you take time to think about the fonts you are going to use along with all the elements surrounding typography. After all, your visitors are there to read the words you’ve written.

When the Internet was first conceived, there were only a couple of fonts available to use. With the introduction of CSS, designers now have much more control over which fonts are displayed and how they are laid out on the page.

Serif Fonts

Serif fonts have been around for thousands of years. Their characteristic is that they have a small flick at the edges of lines making up the letters, leading to legible and easy to scan type.

You can see above this is particularly noticeable on certain characters. Good examples of serif fonts include Times New Roman and Garamond.

Sans-Serif Fonts

Sans Serif fonts are much more recent, and are used heavily in online media. This is because they have less clutter, and are easier to read at much smaller sizes – lending themselves to use online where space is limited. On Design Shack, you can see that Serif fonts are used for headings and titles, with Sans-Serif for the main body of text.

Limitations

It is tempting when designing to feel that you are able to specify any of the fonts you have on your computer for your website. Unfortunately, this isn’t the case. Only fonts available on your visitor’s computer will work on your website, with the browser defaulting to its standard font otherwise. For this reason it is important to specify several fonts in your CSS file:

body {font-family: Verdana, Helvetica, "Lucida Grande", Arial, sans-serif; }
blockquote {font-family: Georgia, Garamond, serif; }

This ensures that you can degrade the font to your choosing if the ideal one isn’t installed on the viewers system.

Why typography is important

It is all too easy to focus on the layout, colours and pictures on your website and let careful font consideration fall to the wayside. This is a recipe for disaster! Your readers need to be able to navigate clearly through your website, and using headings, lists and fonts clearly can facilitate easy scanning of pages.

Splitting your writing up into small blocks of text also makes deciphering it’s meaning and message much easier. Take care when choosing fonts and you’ll reap the benefits. For more information, take a look at our further tutorials on Fonts & Typography.