Overview
Typography is essential in the planning of a website. It has several key elements that would make or break a website’s credibility and usage.
The key elements are:
- Branding,
- Readability
- Personality
- Number of fonts
- Spacing of paragraphs
- Loading time
- Font size
- White space
- Color of fonts
1. Branding
Branding is the assimilation of four main elements. Identity, meaning, response, and relationships.
Identity is the consistency of all elements and details on the site and other media. This includes style, design, colors, and images.
Meaning is the reason you created the site. Keep the voice consistent with the message you are trying to deliver.
Response is the judgment the reader feels when they interact with your site. This could mainly be design based instead of being based on the content of the written words.
And finally, relationships are based on the loyalty of the customer or viewer to actively choose your brand and site over other brands and sites. How you choose to reward or punish your customers based on their loyalty will not likely make or break your site’s relationship to the reader but can build up over time to make a lasting impression.
2. Readability
Readability is the ability to understand and read the words on the screen quickly. A hard to read font can leave the reader annoyed and they may give up and look elsewhere. Readability is based on three main aspects: font width, character shape, and white space.
The font’s width can be either the weight of the letters or the size of the letters; this can change how quickly the reader can skim over the letters and will determine the speed they can read the paragraph. Thin letters are faster to read but could be too thin to read. Wide letters are good if you want your reader to slow down, but if they are too slow, they might stop reading instead. A good balance is key to choosing a good font width.
The character’s shape can fall into three categories: serif, sans serif, and graphic letters. Serif fonts have a sophisticated feel to them and can make the tone more serious and thus will be taken more seriously. Sans serif fonts are better in certain web situations when you may want to soften the tone away from chunky seriousness. Finally, graphic letters should be avoided. These include wingdings, artistic letters, etc. that are near impossible to read. A reader is not going to copy and paste text into a document just to translate what you are saying. And if they need to, then you failed. You are writing a website, not a secret inscribed code.
The white space between letters affects the readability of the sentence. If it is too narrow, it may become unreadable. White space may also be within the letter itself, for example, this font has overLapping Letters which give very little white space and thus is harder to read.
3. Personality
Each typeface has a different personality.
The four main personality types are: Serif [traditional and reliable], Sans Serif [modernism, strength, and style], Handwritten [elegance, creativity, and expensive], Display [unique and intended for use as headings; stand out].
The personality should complement the brand and the colors. What personality the brand should be reflected in the typeface because this is the major in setting the tone. According to Lucy Carney, “Online users are quick to judge – it only takes 0.5 seconds to form an opinion of a website, and 94% of that judgement is design-related.”
4. Number of fonts
Always limit your site and brand to two fonts. Three can be applicable for quotations and block quotes, but two is the rule. If there are too many fonts it will distract the reader and will make the site sound unprofessional or unreliable. There are many preset font combinations that have been researched to determine their effectiveness like on this site.
5. Spacing of paragraphs
The amount of spacing can play a vital role in how easy it is to read long paragraphs. Having too little spacing or too much will make it harder for the reader to read the longer passages. It is recommended that you use a spacing of 1.5. Double spaced or single spaced is considered not optimal and can strain the reader’s attention.
6. Loading time
Free fonts that are already loaded onto the computer will make the page load faster. Using fonts that are purchased or didn’t come with the computer’s system will make the loading time longer and could even crash computers. You can look up what fonts are commonly free here.
7. Font size
The size of the font on the screen should not vary from paragraph to paragraph or on different web pages. It is best to stick with a range of two to four sizes. Shrinking the font to fit the screen is important, especially for when it’s viewed on a mobile device. According to the above site, the sizes should be limited to: 8, 16, 24, 32, 48, 64, 95. I personally would avoid the smallest and the two largest.
8. White space
White space is not your enemy. It is necessary to have an ample amount of space, this will draw attention to the topics you want to talk about without overburdening your reader. Keeping margins existing and large enough will keep the screen from possibly cutting off content. The white space also gives a segmented feel, chunking all relevant information together. The chunking will tie proximity to relativity.
9. Color
For color, make sure to pick a color scheme that has a sufficient contrast so the letters will be easy to read. This site is a good tool to determine if the color contrast needs to be changed. Also, do not base actions the reader needs to perform or vital information on red/green colors. It is the most common color blindness and should be avoided or supplemented with icons or distinct images. Avoid using blinking text, as it can cause seizures in epileptic persons.
Chihiro G
4 Dec 2022As per Prof. Palmer’s instructions,
no one is REQUIRED to comment on this post.
I know it is late, so no one’s grade will drop if you don’t comment. I posted this in case anyone would find this information useful.