Typography is one of the most important elements of any website and has a considerable impact on branding and experience.
So fundamental is it, that making complete changes to your typography (opting for a new font, changing the size, increasing the line spacing) is complex and fraught with potential time sinks.
But there are some simple changes you can make to your typography that won’t break your grid and can be accomplished in 30 minutes or less. Here are eight of the easiest.
-
Increase color contrast
When designing text, it is common for designers to view text as a block within a visual design. A designer’s relationship to text is very different from that of a user; a designer places text as a form, a user reads it line by line. As a result, designers tend to underestimate the amount of contrast that text requires.
The light gray text is aesthetically beautiful but functionally useless. Text is intended to be read and must comply with WCAG AA standards on desktop computers and WCAG AAA standards on mobile devices, or in any situation with many ambient light sources. The larger the text, the more leeway you have.
Text should be tested thoroughly for contrast, but as a starting point, 18px text on a white background should never be lighter than #595959.
-
Tighten the space between titles
The vast majority of typefaces are designed to be used as body text: large blocks of continuous text, several lines long. When the fountain was made, it was spread for this use.
Unlike continuous text, headings tend to be short and surrounded by more white space, especially at the top and bottom. Additional white space visually floods the negative space in word forms and separates letters.
To compensate, you can reduce the letter spacing and word spacing of headings by 1% to 5%.
-
Loosen the space between words
When we read, our brain does not spell words letter by letter; it recognizes shapes of words and even shapes of groups of words.
Most typefaces take care not to interrupt these word forms. However, there are times when you want to prevent words from being formed and allow individual characters.
Loosens the space between letters in any text intended to be read as a series of characters, such as serial numbers, tracking codes and tabular data.
-
Uses system fonts for inputs
Privacy is a big issue for users. Anything you can do as a designer to reassure users that their data is safe will increase the positive UX of your site.
Design your HTML entries to use system fonts: the default fonts set by the operating system with which your user accesses the site. This creates a clear delineation between brand data in brand feeds and user data in user feeds.
Using system sources in this way encourages the user to feel ownership of their data, builds trust and increases conversions.
-
Mark paragraphs once
Paragraphs of text need a visual indication that they have begun. There are three ways this is normally conveyed: following a heading, with a vertical space before the paragraph, or by indenting the first line.
Each paragraph should use one and only one of these indicators. Due to the nature of web content and the benefits of headers for quickly scanning readable content, for most sites, a combination of following a header and vertical spacing is the best option.
-
Use genuine styles
For a variety of reasons ranging from font availability to aggressive optimization, it is common for sites to fake alternative styles using CSS. Italics can be spoofed as oblique with a slant, bold can be spoofed using browser defaults, and small caps can be spoofed by setting the text to uppercase and reducing the font size.
These tricks do more harm than good, creating distorted word forms that disrupt the natural flow of the text.
If you can’t use genuine italics, bold and lowercase, don’t fake them. Find alternative ways to create emphasis, such as changing colors.
-
Use the correct quotation marks
Apostrophes, single and double quotation marks are specific characters. Most fonts provide a glyph for them that is different from the single or double quotation mark hot key on your keyboard.
These quotation marks are commonly referred to as “smart” quotation marks because word processing applications generally have the option to be “smart” about the glyphs they use.
Using the correct quotation marks is one of the simplest ways to deliver refined text.
-
Divide the text correctly
Hyphenation is the division of a word into two lines. It allows for less extreme jagged text on the right, and is vital on mobile devices where the available page width is relatively small compared to desktop.
The web has surprisingly poor support for correct partitioning, but it is gradually improving and can be applied as a progressive improvement.
CSS allows you to configure hyphenation into none (no hyphens), automatic (the browser inserts automatically) and manual (where you specify where the hyphens should appear using the soft hyphen character).
Typographically, a hyphen may be inserted in any word having five characters or more; there must be at least two characters before the hyphen and at least three after the hyphen.
You should never separate three consecutive lines of text, but addressing this requires JavaScript. You can minimize this problem by increasing its size.
At Several we are experts in web design and development, so if you want to leave this job to a group of professionals, contact us. Shall we talk?