Tips and Tricks for Better Web Typography
Nowadays it seems typography is gaining more of a following especially with more web fonts now natively supported by most browsers. Additionally, with the latest versions of HTML and CSS, most browsers now support and implement more typographic features so it goes without saying that web designers may need a bit of a refresher when it comes to working with typesets.
In this article, we will provide tips and tricks on best practices when it comes to web typography.
Check the Font Features
Before anything else, you must first check the capabilities of the fonts you’ll be using. Basically, all fonts have been made equally but understand that Unicode encoding lets you use glyphs in addition to regular fonts while OpenType font format just supports regular font features like small caps, contextual alternatives, old-style numerals, among others. Aside from this difference, typesets are only as good as their creator. Always check the features and character set of the font you want to use. Check what the features and characters it lacks to better find a way to work around it.
Next is to understand how font fallbacks work. A font fallback or the fallback system works as soon as a character goes missing from the specified font. The fallback activates and uses the corresponding character from the next font set and will go back to the original font. Subset the font that has the character or feature that lacks from the original font you are using. Check out Ffffallback to help you find the perfect fallback fonts.
Use the Right Style and Version
When you need to show the bold and italicized versions of the typeface, don’t just italicize or bold regularly but make sure you look for the proper italic and bold versions. Every font set includes their corresponding bold and italic variants. However, it is also inevitable that the font set you choose may not have complete variants. When this occurs, make sure to make proper adjustments by formatting the CSS file. Never, as much as possible, do alterations locally.
Be mindful when copy-pasting since sometimes words in web pages with illegible character strings can show up instead of a special character especially when the text is copied from text editing software that uses a character encoding other than UTF-8. Since HTML works with UTF-8 it can and will misinterpret some copy-pasted texts and turn them into characters that show various, unique combinations of letters and signs that don’t make sense. To prevent this from happening, paste the copied text first to a simple text editor and convert it to text-only format, then from there copy-paste into the CMS.
Many characters, mostly special characters, are defined by HTML entities and it is important that you know them when designing typography for the web. Shown in the image below are some of the most common characters used.
Text Size Relationships
It’s understandable that the text needs to be resized based on where it is viewed. If the text has been defined in pixels, resizing can pose a negative effect, causing discrepancies between the sizes between the text styles used. Make sure the text sizes are defined in ‘ems’ to stick to the size of the standard body text, enabling for all text within the page to be resized as needed, and according to the relationships between the varying text sizes.
Line Breaks and Spaces
When dealing with line breaks and spaces, make sure you use the <p> or <div> tags, along with the <br> tag, correctly. In need to keep two or more words in the same space and line? A non-breaking space makes sure that the group of words will always be on the same line. If you need to cut a long word into two, however, it might be best to use a soft hyphen or discretionary hyphen. In addition to this, make sure you use your spaces correctly as well. Spaces you can use include the non-breaking space, the ‘em’ space is the wide type space and half of that is the ‘en’ space for a smaller space requirement.
Appropriate leading can be affected by the typeface, size, and case, among other factors. Generally, leading should be set 2.5 times bigger than the normal type size to ensure legibility.
Widow and Orphan
Widows refer to long words or short lines that often hang towards the end of the paragraph, while an orphan does the same thing but is found at the top of a new column. Avoid having widows and orphans at all costs. Do so by adjusting the type size, leading, letter spacing, measure, and/or word spacing.
These refer to the quotation marks that hang outside the text margin. Use hanging quotes instead of aligning the quotation mark with the left margin. This will cause the text that comes after the mark to be moved to the right and not aligned with the rest of the text. This, therefore, disrupts reading flow.
These refer to the uneven sides of a paragraph, most often the right side especially if the paragraph is not justified. And when you use justify alignment, it doesn’t really fix the issue since most of the time it can mess up with spacing. Rags are inevitable but the least you can do is to make them look organized. You need to check per line and make sure the break happens correctly (manually adjust when needed).
These basic pointers will surely create better web typography and ensure readability. If you want to disregard all worry and leave it to the experts, contact MicroCreatives today! We work on all types of design, web development, and copywriting projects.