4 Design Tips to Working with Typefaces

Posted on

  • email
  • twitter
  • facebook
  • share this

share this

There are so many important elements that go into creating a successful, high-converting website or app that it’s easy to forget about something like the simple question of what typeface to use.

 SUBSCRIBE to Website Magazine & Accelerate 'Net Success

Most designers are focused on bigger problems like navigation, functionality, and optimizing conversion funnels to bring in greater revenue for their employer. Yet typefaces are crucial design elements. After all, they are the vehicle that carries the meaning of your business’s propositions. They are the words that let consumers know what they could be buying.

In today’s world, there are many design typefaces to choose from, and picking the right one can be a complicated issue. Here are 4 design tips to working with typefaces to keep in mind during the design process.

1. Prioritize legibility

If someone can’t read your content because of the typeface, then all of your design work is undone. So how can you ensure legibility? One simple rule is using different typefaces depending on the length of the content in question. If someone is reading a lot and the type is small, a simpler typeface will be easier to read than a complicated one. Be careful of the color contrast with your typeface too. Use colors that contrast well together to make your typeface stand out against the background, and be careful not to use fonts that are too thin. Thin fonts look good aesthetically, but they can be much harder to read, especially on mobile devices where the print is smaller than it is on a desktop.

2. Utilize hierarchy

When picking out a typeface, keep in mind that many typefaces belong to a family, in which there are several variations of the same font. It’s often a good idea to pick one with a large family in order to create a font hierarchy to better convey structure and meaning to the consumer. These hierarchies are often made in three levels, with each level using a distinct font size and a variation within the font family. Including a hierarchy in your design is an easy way to help you order and structure your content. For example, headlines use one level of the font hierarchy, subheaders another, and larger paragraphs the third. Using a single hierarchy and typeface family will give your company’s online presence a consistent aesthetic while also guiding consumers to the information they are looking for.

3. Don’t overcrowd

Many designers have a tendency to pick a more elaborate typeface, the logic being that the more exotic a typeface is, the more memorable it will be to consumers. However, more isn’t better. White space is crucial to good design, and this is true for typefaces too. Be sure to use the right leading size (the space between lines of text) to create easy reading and an aesthetically pleasing look. Experts suggest that leading size should be 20 percent larger than font size. Keep an eye on the spacing between letters as well (called kerning) to ensure that your typeface is spaced evenly and looks good on a more micro level. The easier it is for a consumer to read and understand your text, the closer you are to converting that consumer into a paying customer.

4. Get rid of lorem ipsum

Utilizing lorem ipsum is a good way to flesh out your overall design structure, but as soon as you can, replace lorem ipsum with the actual text that will be published online. Getting the actual content into your design early will help you understand what hierarchy you need to use as well as give you a better feel for whether a specific typeface actually looks good with what message you want to convey. A more ornate serif typeface may look good in Latin, but if you’re selling a product for children, a simpler sans-serif font may be the better choice. Get your real content in early to ensure that you pick the right typeface for your business.

Do you have any design experience working with typefaces? Share your advice below!

Ellie Martin is co-founder of Startup Change group. Her works have been featured on Yahoo! , Wisebread, AOL, among others. She currently splits her time between her home office in New York and Israel. You may connect with her on Twitter.

Login To Comment

Become a Member

Not already a part of our community? Sign up to participate in the discussion. It's free and quick.

Sign Up


ChrisR 12-02-2016 5:22 AM

Thanks for these excellent design tips.

Looking forward to seeing more stuff like that!

Appriciated you efforts


JuhaniT 12-02-2016 6:58 AM

My idea is to use very neutral and usual typeface, like you would read Google. Too exotic typeface gives a picture about too exotic content. The typeface selection is like between major newspapers. Most of them use very neutral typeface. Let the content speak, not the typeface!

SydneyG 12-02-2016 9:22 AM

Also . . . don't use type as if you were using a typewriter in 1953. Don't UNDERLINE words. Use italics, or bold face of the font instead.

And when combining serif with sans serif fonts, make sure you know the rules before you break them. :)

Temecula Web Design 12-05-2016 11:24 AM

Another thing to consider is cross browser compatibility. There have been times where I thought I have found the perfect font (even on Google fonts!) just to open it in Firefox and is looks jagged and ugly.

Mark Steve 12-06-2016 6:03 AM

Thanks for sharing great web design tips. I really appreciate this blog post, enhanced my knowledge , recommended to all, keep posting such cool stuff.

تحميل لعبة فيفا 2017 12-06-2016 10:21 AM

many thanks for this good article

IdaWallace 12-06-2016 11:12 PM

Thanks for sharing some design tips to working with typefaces to save in mind during the design process. I assumed it strength be helpful to share approximately of the considerations and applied devices for students, who are seeking for writing services from - www.assignmenthelpfolks.com . Designing a typeface can be an extended journey so it's practical to have a clear visualization of its resolution. You might start with approximately purely self-expressive. Still, the usual exercise is to create a typeface in reaction to a brief.

Add to the discussion!

999 E Touhy Ave
Des Plaines, IL 60018

Toll Free: 1.800.817.1518
International: 1.773.628.2779
Fax: 1.773.272.0920
Email: info@websitemagazine.com