{"id":71551,"date":"2019-10-07T04:20:31","date_gmt":"2019-10-07T11:20:31","guid":{"rendered":"http:\/\/www.taterboy.com\/blog\/2019\/10\/8-things-to-stop-doing-with-typography-right-now\/"},"modified":"2019-10-07T04:20:31","modified_gmt":"2019-10-07T11:20:31","slug":"8-things-to-stop-doing-with-typography-right-now","status":"publish","type":"post","link":"https:\/\/www.taterboy.com\/blog\/2019\/10\/8-things-to-stop-doing-with-typography-right-now\/","title":{"rendered":"8 Things to Stop Doing With Typography (Right Now!)"},"content":{"rendered":"

Good typography is an art that shouldn\u2019t be messed with too much<\/em>. Letterforms flow together to form words and phrases that are readable and have subtle visual meaning.<\/p>\n

But if you aren\u2019t careful, it\u2019s easy to ruin typographic beauty in an instant. <\/p>\n

If you have slipped into any of these design traps, this is the time to stop doing anything on this list to type and clean up your design pieces. (Your portfolio will thank you.)<\/p>\n

<\/span><\/p>\n

Adding Drop Shadows<\/h2>\n
\"typography\"<\/div>\n

Most fonts are perfect just the way they are. (I am dead serious.)<\/p>\n

If the letters don\u2019t work for your design, maybe you should consider another type choice. Don\u2019t take the lazy option and add a way-too-obvious drop shadow or outline to the text. <\/p>\n

\u2026the best shadows go completely unnoticed<\/div>\n

There\u2019s this general rule about drop shadows that more people should follow \u2014 the best shadows go completely unnoticed. If you can see the shadow on a text element, then it is probably too big, too dark, and will get in the way of readability. <\/p>\n

Honestly, using these effects is a fairly lazy way of trying to make text work. (You commonly see shadows and outlines on text that should have more contrast against the background.)<\/p>\n

On the other hand, you can create some cool art-type text elements with shadows and outlines. But it is a technique that you\u2019ll probably only ever use a couple of times in your design career. <\/p>\n

Using Too Many Fonts<\/h2>\n
\"typography\"<\/div>\n

It should<\/em> go without saying. But it requires repeating.<\/p>\n

Using too many fonts ruins all of the typography in a design. Using fonts that don\u2019t pair well with each other (or the content for that matter) can ruin the design.<\/p>\n

Pick a typography palette for projects. Set a type hierarchy and work from there. Obey the type style rules that you set for the project and chances are that it will turn out ok.<\/p>\n

Not sure how to pair fonts? Learn more.<\/a> <\/p>\n

Ignoring Contrast<\/h2>\n
\"typography\"<\/div>\n

Contrast is the thing that makes every bit of the type in your design readable. This is true of print materials, websites, and even tactile items like shirts or billboards.<\/p>\n

Not having enough contrast between the background and typography \u2014 or not accounting for changes to contrast due to backlighting or environmental elements \u2014 is a common mistake. And it can kill the effectiveness of every word in the design.<\/p>\n

\u2026highly readable typography with strong contrast is a positive in terms of website accessibility as well.<\/div>\n

You only have a few seconds to capture someone\u2019s attention with a design. Don\u2019t waste that precious time as users struggle to understand the words you want them to read. <\/p>\n

To ensure readability, you want to put light text on a dark background (or vice versa) and not use similarly saturated colors against one another. As a rule of thumb, using black (or dark gray) and white text is the best option, when you have doubts about color combinations. <\/p>\n

A tool such as the WebAIM Color Contrast Checker<\/a> can help you determine contrast for text elements. As a bonus, highly readable typography with strong contrast is a positive in terms of website accessibility as well. <\/p>\n

Using Caps, Bold, and Italics Too Much<\/h2>\n
\"typography\"<\/div>\n

Did you know that lots of type styles can cause concerns when it comes to accessibility?<\/p>\n

Using too many type variations \u2013 all caps, bold, italics, and underlining \u2013 can cause text to appear much more compressed and squeezed in than it really is. That\u2019s a problem when it comes to readability.<\/p>\n

If you are using these text effects for accents or to make a point, stop and ask yourself if there is a better way. All of these things are ok when used sparingly, but shouldn\u2019t be throughout the overall design. <\/p>\n

Double Spacing <\/h2>\n
\"typography\"<\/div>\n

Stop putting two spaces between periods (and other punctuation) at the ends of sentences and the start of the next sentence. It only leaves an odd gap. This gap can get even more awkward at the ends of lines and result in spaces at the beginning of a sentence on a new line.<\/p>\n

Modern digital typesetting is designed to take care of spacing between sentences for you. While you may occasionally need some manual adjustment, two spaces are seldom necessary (unless you are creating design elements on a typewriter). <\/p>\n

Forgetting Device\/Screen Size<\/h2>\n
\"typography\"<\/div>\n

Don\u2019t forget about mobile users when setting font sizes for website design, emails, or even social media images that will be displayed on small screens (and contain text).<\/p>\n

The space between lines is just as important as the size of the text itself.<\/div>\n

While this isn\u2019t something that you do to typography per se, size has a great impact on whether people can understand the message. Some typefaces are also made for smaller sizes and render well, whereas other type families are much better suited for large display.<\/p>\n

When it comes to thinking about font adjustments consider the size and leading. The space between lines is just as important as the size of the text itself. <\/p>\n

Think about use and pick fonts accordingly. (Even if you have to adjust for different screen sizes, and you likely will.)<\/p>\n

Using Hyphens in Display <\/h2>\n
\"typography\"<\/div>\n

It\u2019s not that big of a concern typically for web designers, but it\u2019s a big deal for everyone else: Don\u2019t hyphenate words in display type. <\/p>\n

It\u2019s just ugly. And hard to read.<\/p>\n

Don\u2019t do it. <\/p>\n

Going On and On and On\u2026<\/h2>\n
\"typography\"<\/div>\n

It\u2019s time to stop thinking that you can just go on and on and on with type because it is on the web. No one is reading all of that no matter how beautiful the lettering is.<\/p>\n

Stick to words that matter. It\u2019ll make better use of your type choice so that people actually read it.<\/p>\n

The more text you have in the design, the more important typography becomes. <\/div>\n

When it comes to text that goes on and on, think about the length of text blocks. Are paragraphs short and digestible? Do you use lists and formatting that makes it easier to scan? <\/p>\n

Think about the number of characters per line \u2013 this helps dictate font size \u2013 and aim for 40 to 60 characters per line (somewhat less for the smallest screens). This can help you figure out if blocks of text are too chunky or awkward to read. <\/p>\n

Stick to standard alignment for everything except headlines. Long blocks of centered text are incredibly hard to read. People don\u2019t like or expect it \u2013 outside of poetry \u2013 and it causes a lot of eyestrain. Justified blocks of text are equally difficult to read if they are long and can cause awkward spacing issues that are a challenge to resolve in responsive frameworks. <\/p>\n

The more text you have in the design, the more important typography becomes. Use a clear and easy to read font without difficult formatting in long blocks to facilitate readability. <\/p>\n

Conclusion<\/h2>\n

Poor typography can ruin a project faster than almost any other design issue. For a design to be effective, people must be able to read and understand it. Most commonly, that\u2019s in the form of typography.<\/p>\n

Too much decoration, improper contrast or scale, and over-doing text elements are the most common issues you\u2019ll find when it comes to typography. Remember to let letters stand on their own, provide plenty of contrast for optimum readability, and use fonts with words that have shared meaning and context. <\/p>\n

Powered by WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"

Good typography is an art that shouldn\u2019t be messed with too much. Letterforms flow together to form words and phrases that are readable and have subtle visual meaning. But if you aren\u2019t careful, it\u2019s easy to ruin typographic beauty in an instant. If you have slipped into any of these design traps, this is the… Read the full article…<\/a><\/p>\n","protected":false},"author":4,"featured_media":71552,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[371],"tags":[],"class_list":["post-71551","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-user-experience"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t