8 Easy Ways to Improve Your Website Typography in Under 30 Minutes
Typography is among the most crucial aspects of any website with a massive impact on the brand’s image and user experience.
It’s so fundamental that making significant modifications to your typography choosing a new font, altering the measure, and increasing leading are complicated and carries possible time sinks.
However, there are a few simple modifications you can modify your typography that doesn’t cause any damage to your grid. They are achievable in just 30 hours or so. Here are eight easy ways to do it.
1. Improve the Contrast in the Color
When writing text, it’s typical that designers view a text as a piece of an image. A designer’s relationship to text is different from that of a user. the designer arranges text in shapes, while a user can read it line-by-line. Therefore, designers tend to underestimate the amount of contrast that text needs.
Light grey text looks stunning, but is not functionally sound. Text is intended to be read and has to comply with WCAG AA standards on desktop and WCAG AAA standards on mobile -and in any environment with a variety of lighting sources. The more extensive the text larger, the more flexibility you’re given.
Text should be tested thoroughly for contrast. However, as a base, the text size of 18px on white background shouldn’t be more than #595959.
2. Tighten Heading Spacing
Most fonts are created to be used as body text, which is massive blocks of text that span multiple lines—the moment the typeface was designed, it was spaced to allow for this usage.
As opposed to text, the headings are typically more minor and covered in white space, particularly above and below. The extra whitespace visually fills up the negative space of words and forces letters to be separated.
To compensate, increase headings’ word spacing and letter spacing by about 5%.
3. Loosen Non-Word Spacing
Reading, your brain can’t write out words letter by letter, but it recognizes words’ shapes and word group shapes.
A majority of micro-typography is focused on making sure that the word shapes are not altered. But there are instances when you’re required to block words from coming into existence and allow individual characters to be used.
Let the letter spacing be loose on any text that is intended to be read as a sequence of characters, like number serials, tracker codes, and tabular information.
4. Make use of System Fonts to input
Privacy is a significant concern for people who use your site. Whatever you can do as a designer to ensure that their personal information is secure will improve your website’s UX.
Design your HTML inputs to use system fonts, the default fonts set by the OS the user uses to access the website. This allows for a clear distinction between the brand’s data in the fonts used by the brand and the user’s information in the user’s fonts.
Utilizing system fonts by this method allows users to feel a sense of ownership of their data, creates confidence, and boosts conversion
5. Mark Paragraphs Once
Paragraphs of text require to be visually notified of when they’ve started. This can be conveyed in three ways by following a heading with vertical space in front of that paragraph. Or by indenting one line.
Every paragraph should utilize the following indicators and be the only one. Because of the nature of web-based content and the advantages headings bring to quick scan-reading for most sites, the most effective option is a mix of using the title with vertical spacing.
6. Make sure you use authentic styles.
Due to various reasons, from the variety of fonts available to the need for aggressive optimization, the web is prone to create fake styles with CSS. Italics can be made to appear by using obliques that have the use of skews or bold weights. They can also be faked by using the default fonts in browsers and small caps. Small caps can be faked by setting the text to uppercase and decreasing the font’s size.
These tricks cause more damage than they benefit, resulting in distortions in word shapes that disrupt the movement of the text.
Don’t try to replicate these if you cannot use genuine bold, bold, or italic small caps. Find other ways to create an accent, like changing hues
7. Make sure you use the correct quotes
Apostrophes, singles, and double quotes are distinct characters. Most fonts have a glyph for them, which is different from the single or double quote keys you use on the keyboard.
They are often called “smart” quotes because word processing applications typically can become “smart” regarding which symbols they employ.
Utilizing the correct quotation marks is one of the easiest methods of delivering a sophisticated text.
8. Hyphenate Text Properly
Hyphenation is the process of breaking words into two lines. It permits a less pronounced right-to-left text and is crucial for mobile devices, in which the width of the page is comparatively tiny compared to the desktop.
The web is not excellent support for correct hyphenation. However, it is slowly improving and is an incremental improvement.
CSS lets you make hyphenation non-existent (no hyphens), or the browser inserts hyphens automatically (the browser inserts hyphens automatically) and manually (in which you can specify where the hyphens should appear with a soft hyphen symbol).
In typography, a hyphen can be used in any word of more than five characters and must have a minimum of two natures before and at least three characters after the hyphen.
It is not advisable to hyphenate three lines of text in succession But addressing this will require JavaScript. You can reduce this issue by increasing the size of your measurement.
