One of the most critical aspects of any web design is typography, which has a measurably significant effect on brand and experience.
So fundamental is it that making wholesale changes to your typography — opting for a new font, changing the measure, increasing leading — is complex and fraught with potential time-sinks.
But you can make some basic adjustments to your typography that will not disrupt your grid and can be done in 30 minutes or less. Here are 5 of the easiest ones.
Increase Color Contrast
It’s typical for designers to see text as a block inside a visual design when setting out text. The relationship between a designer and text is somewhat different from that of a user; a designer places text as a shape but a user reads it line by line. As a result, designers appear to underestimate the amount of contrast a text needed
The light grey text is stunning aesthetically, but useless functionally. Text is intended to be read and must comply with desktop WCAG AA standards and mobile WCAG AAA standards, or with several ambient light sources in any case. The bigger the text, the more leeway you’ve got.
Loosen Up Non-Word Spacing
Our brain doesn’t spell out words letter by letter as we read; it understands word shapes and even the shapes of word groups.
The bulk of micro-typography is concerned with not interrupting the shapes of certain words. There are times, however, when you want to prevent the creation of words and allow individual characters.
On any text intended to be read as a set of characters, such as serial numbers, tracking codes, and tabular details, loosen the letter spacing.
Tighten Heading Spacing
Most of typefaces are designed to be used as body text. It was spaced for this purpose when the font was made. Headings tend to be short and are surrounded by more white space, especially above and below, as opposed to body text. The negative space in the word shapes is visually flooded by extra white space and pushes letters apart.
Tighten the letter-spacing and word-spacing of headings by 1-5 percent to compensate.
Mark Paragraphs Once
Text paragraphs need a visual indication that they have started. There are three ways this is generally conveyed: following a heading, indenting the first line, or with a vertical space before the paragraph.
One of these indicators should be included in each paragraph, and one only. For most pages, the best option is a combination of following a heading and vertical spacing because of the design of web content and the advantages headings provide for easily scan-reading content.
Use the Correct Quotes
Apostrophes, single, and double-quotes are specific characters. Most fonts provide a glyph for them that is distinct from the quick single or double-quote key on your keyboard.
These quote marks are most commonly referred to as “smart” quotes because word-processing apps usually have the option to be “smart” about which glyphs they use.