Choosing Fonts
In The Principles of Beautiful Web Design, the author states that "that there are no bad fonts, just inappropriate ones". Using one or multiple fonts that suit your website's requirements in terms of legibility and visual appeal are key to underpinning the nature of your content.Your Target Audience
The first thing to consider is your website audience. Who are you trying to reach out to? Your choice of typeface will depend heavily on the mood or theme you are trying to portray. Is it casual/serious? Are you the owner or a a new trendy Italian restaurant or an accountancy firm? Does your audience comprise of trendy 20-somethings or an older generation who are looking for your professional services? Defining your identity plays an important part in the typefaces you select for your website.Next is the body text of your website's content, usually because there is a lot of it and so choosing a font which is clear and legible would assist readers. Make sure you choose a font which has plenty of letter-spacing, that is the white space surrounding your font. A typeface in which text is bunched up too tightly can be a strain on the reader. Line-spacing or leading is critical here too. You'll see that each line of text on my blog is given a height of 1.7 times the height of the letters, so that it is easier for your eye to follow the text.
Types of Typeface
Fonts are collected together in groups which are defined by stylistic features and the way the letters of each font are shaped.Serif fonts
These fonts are characterised by the small strokes, called serifs, emanating from the base and stems of the letters. These allow for increased legibility for large blocks of text as the serifs at the bottom of each letter create a baseline for the eye to follow. Times New Roman is a popular traditional example of this type though modern serifs often have a blockier appearance.Sans-serif fonts
Sans is from the French for without and basically describes fonts with straight edges. Arial or Helvetica are the best known examples.Script or Handwritten fonts
For a more stylised and unique look, script fonts are great but use these with caution as their overly italicised or handwritten appearance can compromise legibility.Fixed Width or Monospaced fonts
Reminiscent of the letters struck out on an old typewriter, monospaced fonts such as Courier New are those with letters which reside in equally spaced blocks of the same width. They are still used today by programmers and accountants who rely on the text in code or data to be arranged in uniform columns as well as rows.Style Variants
Typefaces often, but not always have variants which are grouped into font families. These are different effects applied to the type to add emphasis. These play an important part in choosing fonts as the bold or italicised versions of the same font family can look quite different, and yet sit together nicely with the regular version, so that it may not be necessary to choose more than one font for different aspects of your design such as titles and headings.Regular
Bold
Italic
Condensed
Black
How to pair fonts
Choosing which fonts compliment each other can be tricky. But here is some advice for combining fonts:Choose your body font first
Select one font for the body text which satisfies the requirements of your project. This will root your content and allow you to select other fonts which can compliment (or contrast) the main text on your website.
Use two but no more than four
If you have a wide selection of contenders for your design try to narrow it down bearing in mind your target audience. Also, adding extra fonts to your website can increase the page loading time if you have chosen to use a typeface from a web font service, as that font must be downloaded and rendered on your visitor's device.
Be consistent
Establish the role of your fonts in your content design. Use the same fonts and styles across your body text, titles, headings, sub-headings, quotes, lists and navigation. This will help to unify your design.
Typography tools
Here are some great resources to help choose and combine fonts for your next web design project:- Combining Fonts - Hoefler & Co.
www.typography.com/techniques - Upping Your Type Game - Jessica Hische
www.jessicahische.is/talkingtype - Typecast
www.typecast.com - Google Fonts
www.google.com/fonts
No comments:
Post a Comment