“First impressions are lasting impressions. Whether you realize it or not, your typography helps to create an experience for users before they’ve even read a word or clicked a button. Typography has the potential to go beyond merely telling a story — it shows the user who is behind the website and what you’re about. The treatment of type creates an atmosphere and elicits a response much the same way as tone of voice does.” 1
As part of establishing the look and feel of a website, a designer must consider typographic choices for that site. For example, you may design or create:
- A logo and identity
- Headline and subheads
- Navigational typography
- Body text typography all created in html and your css style sheet.
Though there are similarities in typography issues across all media, there are also a few web-specific typographic considerations that a web designer faces. These issues include:
- Usability on the web
- HTML and CSS
- Web fonts
Basics: The Anatomy of Type
Letters and letter form could appear very simple as you first look at the alphabet, but they have many different parts: arms, legs eyes, spines and a few other items such as tails and stems. Take a look at the Font Shop’s glossary.
Type anatomy as image
Thinking with Type
Font
A collection of all the characters of a typeface in one size and one style is called a font. This includes caps and lowercase, numerals, punctuation marks, and any special characters contained in the typeface, such as symbols or ligatures.ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
123456789
Typeface
The basic category of type design is the typeface: the specific letterform design of an alphabet, including the serif shape, x-height, length of ascenders and descenders, variation of stroke weight, and any other characteristics that differentiate it from any other design.Typefaces have a specific name such as Helvetica, Verdana, Futura, Times, etc., and there may be several interpretations with slightly different names: Helvetica, Helvetica New. The term typeface originated from movable type, blocks of wood or metal containing a relief image of a character on one surface, called the face.
Type Styles:
- Regular/Roman
- Italic
- Bold
The Type Family
A type family is a group of typefaces bound by similar characteristics. Members of a family resemble one another, but also have their own unique traits. Take a look at Fonts.com.Fonts.com now offers web fonts, that are downloadable so that you can use them in your layout. There is a cost for a professional membership. You can also get free fonts from Google Fonts.
Typography on the Web
You now have more than a handful of fonts to use on the web, whereas a few years ago designers were limited to the list of fonts below. HTML fonts are those fonts that all machines have in the system as a default.
HTML text includes:
- All paragraph content
- Navigation
- Headers and subheads
The code in a css style sheet looks like this:
.alphabet {font-family: Verdana, Geneva, sans-serif;
font-size: 60px;
line-height: 50px;
color: #333;
}
Web “Safe” Fonts
Google FontsTypeKit
@Font-Face
Choosing Typefaces for Legibility
On the web, large portions of copy such as body text is typically easier to read in a Sans Serif, whereas in print, a Serif tends to be more legible.Type Size
Determined by your design and the relationship of all type elements together, including white space.
Letter Spacing
Applied through CSS, and only available on some browsers.
Word Spacing
Applied through CSS, and only available on some browsers.
Line Length
The perfect line length ranges between 40 and 55 characters per line, or in other words, a content column that varies between 250-350 pixels wide (it depends on font size and type).
Weight
Most typefaces contain bold and bold italic typestyles which are much heavier in stroke weight than the Roman. Many typefaces offer a broader range of weights in addition to Roman, including light and medium (or book) and in addition to bold, including semibold (or demibold), extrabold (or heavy), and black.
Width
Some typefaces include styles with character widths which are narrower than Roman, which are condensed and wider, called Extended.
Italics
Not easy to read on the screen unless they have some size to them. Often, designers use italics for a quote that is fairly large on the screen.
CAPS vs lower case
Capitals are good as headers and subheads, but it is best to use sentence case (combination of upper and lower case) for paragraph text.
Bold vs Regular
Same as with caps, bold is good for headers and subheads as well as menu items. You can also use a bold weight to highlight important information in the body copy, but it’s best to use a regular weight font for the majority of content.
Tips for Professional-looking Type:
- Do not use too many fonts on one page. My rule of thumb is no more than 2-3 different fonts.
- Do not use centered, right or full-justified text, as it tends to look messy and unfinished.
- Give your text room to breathe; type on the web is very different from printed type and therefore needs more leading and usually more kerning.
- Do not use bold text for paragraph text.
- Never use all capitalized text for paragraphs. However, you can use caps in the initial paragraph or sentence to aid in your typographical treatment and break it up if there is a lot of copy.
- Use plenty of header (or headlines) and subheads
- Use columns to divide your page
- Don't use huge text
- Do not underline text for anything but a link
- If you must use graphic text, learn correct typography.
“It’s not just about what you say, but how you say it, right? Depending on your purpose, we could try to experiment more and get creative with our typography. We can be bold and daring with strong, large letters, or get quirky and unique with handwritten type. We should keep in mind that type should always be legible, because there’s no point in showing off type that no one can read. Type can do so much for a design if it sets rhythm and creates an atmosphere.” 2
