\nIn typography, spacing encompasses several different variables. There’s the vertical spacing between lines of text (line-height on the web), the width of a horizontal line and how many characters fit within it (measure), the spacing between letters (tracking), and special spacing between letters, such as the shortened space in “AV†(kerning).\nAs explained in the free e-book Web UI Design Best Practices<\/a> by UXPin<\/a>, there are some concrete rules to optimize your spacing:\nUnits\n<\/p> \nVertical space\n<\/p> \nHorizontal space\n<\/p> \nThe contrast between text and background colors makes a huge impact on legibility. Even if it looks fine to you, many of your users will suffer from some degree of sight handicaps, such as color blindness or simply weak eyesight.\nThe Web Content Accessibility Guidelines 2.0<\/a> are very specific about color contrast for text, putting the ideal ratio at 4.5:1<\/a>. These accessibility guidelines are reliable not only in designing for people with disabilities, but also as a solid overall foundation.\n \nJust like spacing, text sizes can be disastrous to legibility if left unchecked.\nWhile your choices in typeface should reflect your product and the mood, there are a few considerations when deciding, especially the differences between headings and body text, and the size of the x-height (the height of normal lowercase letters, like x).\n<\/p> \nTypography’s main purpose is legibility, but it also serves as a visual graphic<\/a>. The look of your font and style choices will affect the perceived mood of your product.\nYou want to ask yourself if your typographical choices visually represent your site’s personality. Minimalist sites benefit from from simplistic and sans serif choices. Professional and traditional sites prefer classic serif typefaces like Times New Roman. Only playful sites or sites for children can pull off goofy, bubbly fonts; only dry and humorless sites can pull off small caps.\nTimes, Georgia, Arial and sometimes Helvetica used to be the only type families available to web designers.\nLuckily today third-party services like Adobe Typekit<\/a>, Google Fonts<\/a> and Monotype’s Fonts.com<\/a> let users download font files on demand. In addition, sites like FontSquirrel<\/a> let you download font files — license permitting — which you can upload to your web host as you would any other CSS, image or JavaScript file.\n \nOnce you decide concretely on your sizes, font choices, and styles, you want to make sure they’re used consistently. Primary headings should always be the same size and body text should always be the same size. Text links should always follow the same format, and captions should always follow the same format.\nBefore moving to the next iteration, have a fresh set of eyes do a quick QA or proofread of the site to catch any inconsistencies. At this point, you may be too close to the project to do it yourself.\n<\/p> \nJust as you want to double-check for inconsistencies in format, you’ll also want to examine how the text appears on different device viewports. The change in screens almost always causes a change in the text layout, so it’s better to catch and fix these deviations early than to be surprised later.\nAs explained in Responsive Design Best Practices<\/a>, the amount of work depends on your preferred method of multi-device consistency; this is a bigger concern for responsive sites than adaptive and m-dot ones. To save time, check at least a smartphone viewport, tablet viewport, and desktop viewport.\nWhen designing for both mobile and desktop screens, remember that text size hinges upon how far the user’s eyes are from what they’re reading.\nA user may have a laptop hooked up to a 64-inch screen television to view your page, or they may have a 124mm iPhone 5s. In one case, the screen is across the room and in the other it’s maybe a few inches from the user’s face. But your typography must still be readable in both situations.\nThe requirement can put you in a tough position when determining text size at different breakpoints. How can you be sure how far a reader is holding their device? Short of technology that detects the user’s distance from the screen, you should follow the best practices suggested by responsive design research.\nKeep in mind the following when accounting for reading distance in your designs:\n<\/p> \nIdeally, your text at every breakpoint should look like it’s the same size when held at reading distances on different devices.\n<\/p> \nIf you found these questions helpful, we have more advice on typography, and digital copywriting in general. Check out the free UX Design Builder’s Ebook bundle<\/a> by UXPin<\/a> and Creative Market which includes 350+ pages of advice in one download.\n<\/p> Products Seen In This Post:<\/strong><\/p> Typography creates the parameters with which words and text are displayed, like the laws of physics to our everyday life. But typography and design are two separate masteries, despite how often they overlap. Typography gets especially tricky on the web, where the fluid medium gives us a whole new set of parameters. That’s why we’ve […]<\/p>\n","protected":false},"author":127,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[74],"tags":[305,37,61],"topics":[],"class_list":["post-34078","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-web-design","tag-typography","tag-design"],"acf":[],"yoast_head":"\n\n
\n
\n
<\/span> 2. Is the Color Contrast Optimized for Legibility? <\/span><\/h2>
![\"Background](\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2016\/03\/10223345\/image01.png.webp\")
\nPhoto credit:<\/em> Color Safe<\/a>\nTo optimize your color choices for legibility, take a quick visit to Color Safe<\/a>. This free online app lets you input your choice of background color, type families, etc., then gives you a wide variety of text color options that all meet WCAG 2.0 standards. You can also use Check My Colours<\/a>, which does so automatically.\n<\/p><\/span> 3. Are the Sizes Effective? <\/span><\/h2>
\n
<\/span> 4. Does the Typography Communicate Visually? <\/span><\/h2>
![\"Font](\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2016\/03\/10223349\/image00.jpg.webp\")
\nPhoto credit: Gitman Bros<\/a>.\nTechnicalities aside, as long as legibility is achieved, the only wrong fonts are the ones that don’t reflect the atmosphere you want.\n<\/p><\/span> 5. Are the Formats Consistent? <\/span><\/h2>
<\/span> 6. Is the Text Effective on All Devices? <\/span><\/h2>
\n
<\/span> Further Reading <\/span><\/h2>