elements
principles
Loading
Just double click on any word in the text that you would like explained.
There are five basic types of fonts: serif, sans serif, cursive, fancy and monospace. Serif and sans serif fonts are used to present bodies of text. If you want to communicate qualities such as warm, personal, artistic, stately, traditional, conservative or intellectual then use serif fonts on your website. If you want to communicate qualities such as technical, cool, clean, crisp, youthful, modern or uncluttered then use sans-serif fonts on your website.
The next step is to find common fonts. Different computer have different operating systems and thus different fonts. Some of the fonts can look better on PC's, like Arial and some look better on Mac's, like Helvetica. There is though one sans-serif font (introduced 1996) that looks good on both PC's and Mac's and it's Verdana.
Text Sizing
The most common font size for main text is 12px but it's usually to large for websites. The size attribute varies also depending on font-family and if the font is serif or sans-serif.
Suggestions for different text elements;
Text: 10px or 12px
Main Headings: 14px, 16px or 18px
Sub-Headings: 12px or 14px
Captions: 8px, 9px or 10px
If you design for people with visual impairments or elderly avoid text size smaller than 10px.
Text Styles
There are seven different attributes you can use to enhance your text and help you better get through with your message. Those attributes are:
Plain - used for main body text, preferably on light colour backgrounds, and large headings.
Bold - used for emphasis in headings, sub-headings, key words, small blocks of texts and text menus. Don't overuse this attribute.
Italic - just as bold, this attribute is suitable for emphasis in key words, quotes, photo credits, captions and titles. Italic can be difficult to read if overused.
Capital Letters - apply basic grammar rules when using capital letters. You can use either capital or lower case first letter in your headings.
CAPS - used only for very short words.
Underline - should be avoided on websites due to the risk of being confused with links.
Colours - used to attract attention or to emphasise a word or group of words. Don't overuse as the website can become cluttered.
The next step is to find common fonts. Different computer have different operating systems and thus different fonts. Some of the fonts can look better on PC's, like Arial and some look better on Mac's, like Helvetica. There is though one sans-serif font (introduced 1996) that looks good on both PC's and Mac's and it's Verdana.
Text Sizing
The most common font size for main text is 12px but it's usually to large for websites. The size attribute varies also depending on font-family and if the font is serif or sans-serif.
Suggestions for different text elements;
Text: 10px or 12px
Main Headings: 14px, 16px or 18px
Sub-Headings: 12px or 14px
Captions: 8px, 9px or 10px
If you design for people with visual impairments or elderly avoid text size smaller than 10px.
Text Styles
There are seven different attributes you can use to enhance your text and help you better get through with your message. Those attributes are:
Plain - used for main body text, preferably on light colour backgrounds, and large headings.
Bold - used for emphasis in headings, sub-headings, key words, small blocks of texts and text menus. Don't overuse this attribute.
Italic - just as bold, this attribute is suitable for emphasis in key words, quotes, photo credits, captions and titles. Italic can be difficult to read if overused.
Capital Letters - apply basic grammar rules when using capital letters. You can use either capital or lower case first letter in your headings.
CAPS - used only for very short words.
Underline - should be avoided on websites due to the risk of being confused with links.
Colours - used to attract attention or to emphasise a word or group of words. Don't overuse as the website can become cluttered.
top
Value refers to the lightness or darkness of a colour. Value provides the maximum contrast available and is useful for controlling visibility and attention. The perception of the coloured bars below is different depending on the background colour (white at the top or black at the bottom).
And now compare the contrast of colours on green and red backgrounds. The strongest contrast available is between black and white.
Visibility of the same or similar value colours can be a rather tricky issue. When the shapes are simple and large, like the bars the red on green and green on red contrast seems adequate. When the images are more complex and demanding the situation changes. Just have a look at the different text colours on the green background. The red on green is certainly not advisable.
Just check how readable the different colours are on the green background
When talking about fonts it seems natural to mention text width, often called the "scan length". How many words should be displayed on one line. Most people can comfortably read about 7 to 11 words on a line. Longer than that, and the text is hard to read, shorter than that and it's disjointed and distracting. Use it just as the rule of thumb.
© 2008-2011 Creativement Ltd