The average person with a smartphone or laptop and a stable internet connection probably spends more time interacting with typography in a single day than with food, music, and family combined.

The majority of the web (and our lives) is type-based. That was the case in 2006, is still the case 10 years later, and will continue to be true until the day we’re all communicating via holographic emojis (2020?).

While we wait patiently for the HoloMoji™ revolution, it’s important to treat type-based communication with the respect it deserves. We each have a small role to play as content authors, digital publishers, developers, and designers to take responsibility for the material we create and share with the world. This is especially true if we’re being paid by other people to make their content look great and communicate effectively.

Here’s a list of 5 easy ways to improve the typographic quality and effectiveness of any website, email, or digital product design.

Tip #1

Be conscious of line and paragraph spacing

This might not seem like a huge deal, but it’s an easy tip that can be implemented with minimal effort.

It can be difficult for a reader to know how to group page content when lines of text are evenly distributed above and below a subhead or image (especially on longer article pages with multiple images throughout).

When readers have to struggle to understand content association, the design becomes cumbersome and demanding. Readers want to feel comfortable, first and foremost. Making clear groupings of content through vertical spacing is a great way to ensure a more positive user experience.

Tip #2

Avoid awkwardly long lines of text

In our opinion, this is one of the most prolific and annoying design gaps currently infecting the responsive web.

It’s been proven that the reader’s eye (aka mind) becomes fatigued when forced to read long sentences. This is actually an easy test to perform any time — just open a long email and adjust the browser width. Compare how the same text feels in a narrower viewport versus the long lines created by a greater width. The same email can feel comfortable and digestible, or completely discouraging and cumbersome. Same goes with text-heavy pages.

Long line lengths are a drag. People don’t need less encouragement to read. Also, it looks cheap. It’s a quick way to say “We don’t really care about the design of our material and the reading experience of our users, or we’re too ignorant to notice!” Oops.

Not many people (including designers and developers) are conscious of this issue because no one’s ever pointed it out. The problem is additionally sustained by the convenience of elastic dev frameworks and a lack of consideration with responsive layouts. Sadly, a text container that fills the width of a small viewport can’t be stretched to fill the width of a large viewport without any additional design consideration.

The optimal number for characters in a body paragraph is 45 to 75, with a 66-character line (including spaces) widely regarded as the ideal. Sometimes it’s easier to count the average words per line, in which case try to land between 9–13 (headlines can obviously have less). Aim for this and adjust the design when the character or word count for that font size falls out of the magic zone.

Tip #3

Be authentic with hand lettering

It’s always interesting to watch visual trends evolve and respond to a saturation in the visual landscape. One such trend has been born from a desire to push back against the omnipresent digitalness of cold screens and vector graphics. Enter hand lettering and a general romantic energy for a seemingly long-lost culture of doing things manually (from a millennial perspective at least).

To clarify: we love lettering and calligraphy. Hand rendered text, like many things, is beautiful to behold when executed with considerable skill. The problem these days is when people want to capture that energy, but get lazy and opt for a lettering font instead of conducting a more authentic process.

Our issue isn’t so much with the idea of using a font (there are definite advantages with live text for accessibility and general convenience), but the fact that these fonts rarely feel special and hand made.

Worse is when the same characters appear multiple times in a word or phrase. The essence of hand lettering and all its lovely nuance is lost in a font that only has one letter “e” character. ‘Hand rendered’ words that show repeat letters shatter the illusion. Once the viewer takes notice, it’s hard to fight off a sense of inauthenticity, distraction, and disappointment.

Tip #4

Don’t use too many type styles

Readers want to read. If the text is captivating enough, they will!

What readers don’t need is a little EXTRA visual spice to help them along and FULLY appreciate the communication.

Abusing multiple type treatments is a great way to hijack the reading experience. It visually disrupts the copy block and (for us) actually makes it more difficult to get through the content because now someone else’s inflection muddies the water. It also looks terrible, and reeks of insecure, smarmy marketing.

Another common issue stems from using too many type styles in general. Though decisively less sketchy than having multiple styles in a single sentence, a lack of sensitivity here can also create pages that look and feel utterly terrible.

The solution isn’t always easy and requires some restraint. Try to be visually understated. Have faith in your copy (or invest in better copy). Learn to trust the beauty and effectiveness of simple typesetting to deliver messages.

Tip #5

Use proper punctuation when it matters most

Proper punctuation should always be used in headlines and key areas of copy, yet so many brands (big and small) fail to wield it properly. The most common issue we see involves using the wrong text characters for apostrophes and quotation marks.

Straight quotes are vertical sticks erroneously used in place of quotation marks (“ ‘ ’ ”) and apostrophes (’). Straight quotes are essentially generic punctuation marks created for simplicity and space saving during the typewriter era. This reduction was effective for covering all bases at the time, but technology has long since moved on. It’s funny (not funny) how many of the bent rules from old typing culture still linger in the digital age (*cough, multiple spaces after periods, *cough).

Most people can’t easily spot the difference between these marks in small text settings, but at headline/display sizes straight quotes stand out like sore 8-bit thumbs. Unlike curly quotes and apostrophes which are specially designed to promote unity and flow in the word picture, straight quotes are clunky and distract from the reading experience. They should be reserved for the code editor.

Issues with text setting have existed long before web development and desktop publishing. The world turns, the sky hasn’t fallen yet. But these details do matter when a person or business is concerned with presenting their best. Or when someone wants to express a deeper UX consideration that includes how a reader might feel if/when they encounter a typographic hiccup. Consider how much time and effort Medium itself spends on type nuances.

The tips above exemplify ways typesetting can contribute meaningfully to a user’s overall experience. UX is a big concept that means various things to various people. But just like in other professions, people don’t always like to sweat the small stuff. UX can be flashy and exciting when you’re working through audience research, creative direction, and content strategy but energy can quickly fade when it comes to fussing over seemingly insignificant minutiae.

We believe it’s the combination of amazing details that makes something truly special.

Typography is an invisible craft that permeates almost every aspect of our waking lives. Good typography has a major role to play in the creation of successful, memorable user experiences.