Navigating fonts and your website
It is so important to be intentional when choosing fonts for your brand and especially your website. The fonts you choose can affect readability, influence tone, and reflect professionalism. They will influence how your ideas, message and information is communicated. Read on to learn more about navigating fonts and your website.
What is a font?
A font is the combination of typeface, size, weight, slope, and style to make up a printable or displayable set of characters. Font characters include letters, numbers, symbols, and punctuation marks.
The five distinctive font varieties
Serif:
A serif is the small extra stroke found at the end of the main vertical and horizontal strokes of some letters. Some serifs are subtle and others are pronounced and obvious. In some cases, serifs aid in the readability of a typeface.
Sans serif:
A sans serif is one that does not have the small projecting features called "serifs" at the end of strokes. The term comes from the French word sans, meaning "without". Sans-serif fonts tend to have less line width variation than serif fonts.
Script:
Script typefaces are based upon the varied and often fluid stroke created by handwriting. They are generally used for display or trade printing, rather than for extended body text
Monospaced:
A monospaced font, also called a fixed-pitch, fixed-width, or non-proportional font, is a font whose letters and characters each occupy the same amount of horizontal space. This contrasts with variable-width fonts, where the letters and spacings have different widths.
Display:
A display typeface is a typeface that is intended for use at large sizes for headings, rather than for extended passages of body text. Display typefaces will often have more eccentric and variable designs than the simple, relatively restrained typefaces generally used for body text.
What is a font style or font family
A font style/family is a set of fonts that have a common design. Fonts within a family differ from each other in style such as the weight; light, normal, bold, semi-bold, etc. and the slant; roman or upright, italic and oblique.
How and where fonts are used on your website
The fonts you use on your website communicate your message. They are used in various ways across your website to seperate and highlight your content. Ideally you’ll have 1-3 fonts and styles to differentiate between the following content:
site navigation
main headings, sub headings
paragraphs
buttons
product titles, descriptions
footer text
What to consider when selecting fonts for your website
Where they will be used
Versatility in a font is important. If the font you choose only has one style, it can be a good idea to choose a secondary font. Headings can be a bit more decorative where are your paragraph text should be relatively simple, plain and very easy to read, ideally a sans serif font
Readability
Websites are viewed on multiple platforms, devices and at varying sizes. While you can’t control every aspect, you should make sure your font is easy to read on various screens, sizes, on background colours, over photos or graphics.
Licensing;
Some fonts require a specific web license while some are free to use across web, print etc. You’ll need to check if you have the correct license for your fonts and their usage. When purchasing or downloading a font, the font license is generally outlined in the terms or included in the downloaded file folder.
Where to find web fonts online
