How to Pick the Perfect Font Style Design for your Website

Last updated on July 12, 2017

Font Style DesignDid you know that a lot of times, what separates a professional website design from an amateur looking website is all in the tiny details.

These are tiny things you can change on your website that could make huge impacts to your website that won’t cost you much time or effort.

Have you ever tried changing the way you grip your golf club just by a tiny bit, and this resulted in a significant improvement to your golf game (whether it’s accuracy or distance)?

That’s what I’m referring to – a small and seemingly insignificant change, resulting in massive improvement for your website!

“Okay there…. if it’s so simple, then why aren’t more Do-It-Yourself website owners doing it?”

That’s a fair question.

Just like most people, you probably get so consumed by all the things you need to do when it comes to building a website, that you completely missed these tiny gems in the rough that can make your website sparkle.

It’s perfectly common, to be honest. We certainly missed a lot of these tiny gems when we first started out.

It’s SO easy to get buried in the technical details of picking a domain name, setting up emails, designing a logo, finding the perfect images, or figuring out what to sell online.

I’m talking about picking the perfect font design for your website (duh, the title gave it away!)

It sounds pretty boring and insignificant – and that’s exactly why you probably haven’t heard much about it!

Successful publications (leading magazines, newspaper, websites, brochures, etc) all choose their font designs very deliberately and carefully.

Their font choices are absolutely not random at all.

Experienced designers understand its power so they pay a lot of attention to it (think Steve Jobs!!)

You’re most likely not an experienced designer, so this tutorial here will be very helpful to your website design.

By simply picking the right font design for your site, this “small” change that doesn’t take much effort or time can have a meaningful improvement for your website.

Don’t underestimate the power of picking the right font design and it’s deep psychological impact it has on your visitors. Experienced designers understand this and pick their fonts very carefully & deliberately.

 

Why should you care about font design (aka typography)?

When Steve Jobs was creating the first Mac, he did something that was never done before — he created 10 font designs (typography) that you can choose from.

I know this doesn’t sound like much to us right now, but it was a major breakthrough in design at the time.

It made such a big impact on the industry that they called Steve Jobs the Grandfather of Typography.

If it wasn’t for Steve Jobs, this could be what you have to stare at every time you turn on your computer:

old font style design

This makes my eyes hurt….

Not so appealing, right?

How long can you possibly stare at these robotic fonts before your eyes get tired or completely lose interest in what you’re reading because it is just so darn ugly to look at?

Exactly – not very long!  

Choosing the right font design has this “magical” power of making your website look better, causing your visitors to feel more at ease, thus improving their experiences on your website.

Steve Jobs was so obsessed about crafting the perfect font design for the Mac because he knew how typography can significantly improve user experience.

 

Why should you care about improving your website visitors’ experience?

  1. Different font styles communicate different subconscious messages to people – which can help you build brand identity. Believe it or not, specific font styles can convey different messages such as trust, stability, strength, elegance / sophistication, creativity, etc to people. Imagine if you want to build a website for your accounting or legal business, what type of font design do you think you should use?  Would you use the same font style if you’re building a wedding photography business website? Probably not.
  2. It can help you grow your business. Using the right font design with the right layout design can make your readers feel more comfortable, increasing the chances that they will read more of your content material. This helps you build trust with your visitors (as they consume more content) and therefore gives you a better chance of growing your business. Let’s face it, your business will not grow online if your visitors don’t feel comfortable with reading your material on your webpages.

In the tutorial below, I’ll go over:

  1. How to use font designs to psychologically influence your readers – specifically for your titles / headlines / logos – how they can convey certain subconscious messages to your visitors and to help you build brand identity.
  2. The 7 “deadly sins” of choosing fonts and layout – If you just pay attention to these points, you’ll be way ahead of the game.

Let’s get to them!

 

How to choose the right font design for your titles / headlines / logo to match your brand identity

Think of different fonts as different outfits you’d wear to various occasions.

For instance, if you are going to a fancy dinner party, you might wear an elegant dress or a sophisticated looking, pinstripe suit.

If you are going to the gym, you might put on some sweats and a random shirt.

Your outfit creates a visual representation of who you are – and you can choose to wear different outfits to the same event to alter that perception.

Simply put, your choice of clothes says something about you, like your style, your personality, your age, and even your wealth.

Think of wearing a casual polo shirt with slacks and loafers versus a crisp white collared shirt, paired with a pair of pressed charcoal dress pants with polished, black leather dress shoes – this gives people a very different view of who you are.

The font design you choose acts the same way as your choice of outfits — the type of font design you pick says a lot about you, your business, and what your website is all about.

You want your outfit to be purposeful and appropriate to the event you are attending. You also want your outfit to represent who you are.

So why would you want to choose just any random font design?

What you wear to different occasions speaks a lot about who you are. It’s a visual perception. The same goes for the type of font design you use for your website. It speaks a lot about the type of business you are operating.

 

Font Designs and what do they mean?

Different font designs give off different impressions.

The infographic below gives you a clear idea on how different font designs convey different characteristics like “Strong” or “Respectable”.

Using this infographic guide, it’s not hard to pick out which font design is more suitable for how you want people to think of your brand.

For example, when you look at the word “Elegance” below (left middle section), the font design perfectly reflect the word, right? The calligraphy-like font screams romance, sophistication, and beauty.

psychology of font style design

Click to enlarge – Source: https://www.crazyegg.com/blog/psychology-of-fonts-infographic/

 

Case Study: How to pick font designs to improve your headlines / logos

Consider this scenario.

You are a Financial Planner and your ideal client group is millennials with good paying jobs and are just starting to invest and plan for their futures.

When they visit your website, what kind of first impression do you want to make?

You probably want to appear responsible, trustworthy, progressive and modern because millennials probably are not looking for old-school financial planners that their parents used.

Instead, you want to project the feeling or perception that you can connect with younger, wealthier clients – your ideal target market.

So, how do you pick a font design that reflects those characteristics?

  • Responsible & Trustworthy: You want to choose fonts that have a traditional heritage like Trajan or Times New Roman that give off a sense of history (in the upper left side of the infographic image above).
  • Progressive & Modern: You want to choose a font with clean lines with a thinner weight that have a minimalistic design. This gives off a sense of modernism and progressiveness (see the fonts in the right-hand side of the infographic above).

Based on the criteria above, I picked Aller (by Font Squirrel) as a solid font design for this new age financial planning business tailored to millennials.

font style design for financial business

http://www.fontsquirrel.com/fonts/Aller

It has clean lines with a classic curve design that strikes a good balance between new (modern & progressive) and old (heritage – trust & responsible).

The font looks professional and can send off the right subconscious signals to millennials looking for financial advice.

Choosing the right font design can help you set the tone of your website and help you attract the right clients / customers.

Using the infographic guide above, which group of fonts do you think is suitable for you?

To take this a bit further, let’s go over 4 tips on how to select the right fonts for you.

 

4 Tips to picking the right font design

1. Pick a font that actually matches your message or brand identity

You might prefer specific fonts already, but don’t let your own personal preferences get in the way!

A font design might look nice, but if it doesn’t fit the purpose, scrap it!

Instead, focus on picking a font design that has the characteristics you want to represent your website and brand (refer to the Financial Planner case study above).

There are 5 main types of personalities when it comes to font designs. Consider which personality you want to represent your website or business:

Font Personality #1) Traditional, Respectable, Comfort, Reliable:

traditional font style design

Font example exhibiting this personality – Source: http://fabiandesmet.com/portfolio/butler-font/

If you want your website to represent this personality, the fonts you should consider should be designs that have been around for a very long time, such as Georgia, Trajan, and Times New Romans.

These fonts have traditionally been used in prints like newspapers, magazines, and books. Since most people are very familiar with these classic font designs, they instantly give off the impressions of heritage, reliability, and trust.

Font Personality #2) Contemporary, Modern, Minimalistic, Progressive:

modern font style design

Font example exhibiting this personality – Source: http://freetypography.com/2014/03/24/free-font-simplifica/

These are fonts with very clean designs and has less handwriting qualities.

They often have either very bold or very thin profiles. These designs tend to have less personality so they appear more modern.

If you want your website to give off a more contemporary feel, then consider using this type of font design.

Font Options: 60 Minimalist Font Designs (source: Canva)

Font Personality #3) Strong, Stable, Defined: 

strong font style design

Font example exhibiting this personality – Source: https://www.tinkov.info/qanelas-soft.html

These fonts are very bold and have a blocky design. The boldness of the font designs give the design substance and give off the impression of strength.

If you want to make a statement or want to appear robust, this is the type of font you should use.

Font Options: 50 Bold / Impactful Font Designs (source: Canva)

Font Personality #4) Romance, Elegance, Beauty, Vintage: 

elegant font style design

Font example exhibiting this personality – Source: https://www.ffonts.net/PinyonScript.font

These are handwritten-type font designs with lots of curves. The curves are what give the designs a romantic and elegant feel.

Not all handwritten font designs are romantic, they can also be quirky and free-spirited. The more italic and curvy the font design, the more vintage it will look. The rounder the font design, the more quirky and retro it will appear to be:

elegant font style design

Font Options: 60 Calligraphy Font Designs (source: Canva)

Font Personality #5) Themed Font Design

stylized font style design

Font example exhibiting this personality – Source: https://befonts.com/butch-font.html

These are font designs that don’t fall into any specific category because they are so stylized.  They have various characteristics and so it’s hard to cover all of them.

These font designs are handy if you want to create a unique brand identity. It will require more design skills to pick out the right design since all of them are very specialized.

Here is a good resource to browse more about stylized font design (source: Canva).

2. Pick a font design that matches the type of audience or customer you want to attract

Ask yourself probing questions to identify the perfect audience or customers you want to attract.  Some questions include:

  • What is the ideal age group?
  • What is the preferred gender?
  • What profession is he/she in?
  • Does he/she have more/less disposable income?

These sort of questions will help you understand who you are trying to attract with your brand.

For example, if you have a trendy coffee house that has a retro and rustic feel, you might want to use a very contemporary and retro font design to attract design-oriented and younger coffee lovers.

font style design for coffee shop

3. Is the font design easily readable?

Don’t pick a super complex font design that’s challenging to read.

I know this sounds like an obvious point, but I’ve seen random websites that try to get too fancy in its design to try to stand out.

Never give up readability for design!

If you can’t read the text with a quick glance, scrap it!

For example, this custom typography looks beautiful, but I can hardly read the text:

font style design - custom typography

Here is a good example of beautiful typography without overdoing it:

typography good example

4. Choose a font that is versatile

You will be using the same font(s) throughout your website, and your website could be viewed on different devices with different screen sizes.

As such, you want the font design to look good regardless of its size, weight or style.

When you are picking your font, ask yourself these questions:

  • Does it look good in different weight like bold, italics or normal?
  • Does it look good in various sizes?
versatile font

https://fonts.google.com/specimen/Droid+Serif

Before we get to the 7 “deadly sins” of selecting font styles, I want to re-iterate that changing your font design is a quick and easy way to improve your brand identity and it helps create a connection with your target audience.

Look at your website and follow our discussions above to see if you can find a better font for your title / headline / logo.

I promise you that selecting an appropriate font style can have a meaningful impact for your website!

Where to Find Web Fonts – Useful resources:

Here are some resources where you can get more font design ideas!

Now that you know how to choose the right font design, I want to show you what to avoid when picking your font.

 

7 “deadly sins” to avoid when choosing a font style for your content

There are books that are written specifically just about the design and science behind typography.

While they are great if you want to become a professional designer, it is a bit of an overkill for average folks like us.

Instead of going through all the theories and technical mumbo jumbo, I’ve put together these 7 things to absolutely avoid when picking a font(s) to improve your website’s readability.

This specifically targets the content area of your website (such as paragraphs of description, blog posts, etc).

If you have a website already, it might be helpful to go through each of the following 7 points together with your website.

1. Don’t use tacky fonts

It might be something you want to use on your kid’s birthday party invitation, but tacky and funky fonts have no place on any websites that want to be taken seriously.

tacky font designs

Each font design has its own personality (as discussed above). Depending on the font design, it will give off a different impression of your website and your brand.

For example, the font “Papyrus” makes you think of ancient civilizations. It’s a font you’d expect to see as the title of an Egyptian mummy movie, and not in a financial planning website.

papyrus typeface example

While these tacky fonts have its place in fun and hobby-like websites (straight from the 90’s), please don’t use them on your website if you want to look professional.

2. Don’t use messy fonts that’s hard to read

Picking a font design for your main content is very different than choosing a font for your title / headline / logo.

The purpose of your website content is to deliver useful information about your product or service offerings to your readers. So readability is very important here.

Don’t complicate things with stylized font designs that can be hard to read.

Here are some of my favorite, free font styles that you should be able to find in any decent website builders.

Take a look at some of these new font styles from Wix (which is an excellent website builder as per our review).

When in doubt, these are the font design you can always turn to:

font style design selection

Still having trouble choosing the right font design?

Here is a nifty Font Design Flow Chart from Basekit to help you choose the right font for your content areas (click to see the full infographic):

font style design decision map

Click to see full infographic – Source: basekit.com

 

Other useful resources:

3. Not giving your lines enough space

One of the easiest ways to make your content easier to read is to add enough spacing between each line.

The magic number of a perfect line-height is 150% of the font size you are using.

For example, if you are using 24px font size, the line-height will be 36px (which is 150% of 24px):

Perfect Space
(150% line-height)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Not Enough Space
(100% line-height)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Too Much Space 
(185% line-height)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

It’s pretty easy to see right away that the left column looks the best.

4. Don’t use too many different font designs

Less is always more when it come to design.

You want to keep the number of font designs on your website to no more than 4.

  • 1 font style for Headline or Page Title
  • 1 font style for Subtitles (optional – this is not a must. You can always use the same font style for your subtitle and body content. You can simply change the font size for the subtitle for it to stand out more)
  • 1 font style for body content areas
  • 1 font style for quotes

Too many styles of fonts can make your website look messy and unprofessional. People might have a hard time figuring out what are the important messages you are trying to communicate.

typography mistakes

So keep things simple and limit the number of font styles you use on your website to no more than 4.

5. Don’t use too many font colors

Color is a powerful branding tool.

For example, when you think of Starbucks, what color(s) comes to mind? Most likely it’s the green color that you see in their logo and on their website.

When you are choosing color(s) for your fonts, only pick 1 or 2 brand colors that truly represent you or your business to use in your headline or sub-headlines.

Anything more than that will just look messy and circus-like.

too many font colors

Source: www.marcelchrist.com/non-commissioned

6. Don’t randomly pick font sizes

You can pretty much choose any font sizes you like on your website. But before you start randomly assigning sizes to your headlines and subtitles, I want to introduce you to modular scaled font sizes.

What are modular scaled font sizes?

It is a series of harmonious font sizes that have the perfect proportion that the general public view as “beautiful.”

We are drawn to things that are beautiful and most beautiful things have perfect proportions. Believe it or not, this goes the same for font sizes!

So instead of guessing what font size you should use, why not just do yourself a favor and use the following sizes that are said to have the perfect proportion based on some mathematical model.

Recommended Font Sizes: 8, 16, 24, 32, 48, 64, 95

16px is the ideal font size for your main body text. It is not too small or too big, so it really helps improve your paragraph’s readability.

In fact, the font size we use in the main content areas of our articles is 16px.

Simply stick with this guideline and you will always get the perfectly proportioned font sizes!

Useful resource:

  • Do you want a different font size than the ones we recommended? You can use this Modular Scale Calculator to create your own perfect font size scale.

7. Not enough white space

It is so easy to crowd your webpage with tons of information.  More content is better, right?

But when you are jamming too much content without any adequate breathing space on your pages, it can leave your visitors feeling overwhelmed as they have to focus extra hard to absorb the information.

So, how do you do that?

Pretty simple – just make sure you leave more white space between your paragraphs and between different content on your pages (we have examples below).

White space is simply the gaps or blank area between content like headline, subtitle, body, images or videos — simply put, it’s the empty spaces on a page.

This is one of the easiest things you can do right now to instantly make your content easier to read.

How does white space help improve your website?

1) White space helps make your website look more sophisticated and elegant

Minimalist designs give people the impression of elegance, sophistication, and beauty.

When you add more white space in your webpages, you are making your pages more “minimalistic” and better put together.

Here is an example of the same ad — can you see the benefit of not overwhelming the ad with a lot of content?

font style design white space example

Source: www.dennymountain.com/blog/the-horror-vacui-the-power-of-white-space

The one on the left looks tacky and cheap – like it’s taken from a page of a gossip magazine.

The one on the right looks classier and higher-end – like a page from a professional magazine publication.

They are the exact same ad with the same picture and content. The only difference is that the ad on the right has more white space.

2) White space helps people focus on important information

A well placed blank space can help highlight important information without appearing tacky.

font style design white space

Source: www.studionudge.com

The space surrounding the headline, “Creative Ideas. Thoughtful Design. Tangible Results”, helps make it stand out on the page.

Since that is the company’s motto, this helps direct their visitors’ focus on the headline when they land on the website. It’s clean, clear and direct.

3) White space puts less stress on the eyes so your visitors will read more & stay longer on your pages

If you have a blog or have a website that has tons of information, white space can really help to make your wealth of information less overwhelming.

For example:

font style design white space

Just by adding a wider margin between the columns helps make the page seem less daunting or cluttered.

The extra space between the headline and subtitle, each paragraph, and the image and the body text also makes the page look a lot lighter.

Using more white space is a simple technique to instantly improve your visitors’ user experience on your website.

Go through each of your pages and think about where you can add a bit more space.  Also, try sitting further away from your computer screen – this can help you spot any unnecessary clutter on your page as well.

font typeface layout white space

 

Conclusion – How to Pick the Perfect Font For Your Website

As a website or business owner, you should constantly be on the lookout for outsized rewards with minimal effort.  Those are the gems that can really make a big difference.

Typography (picking the right font design), is one of the tiny details that could potentially have a major positive impact on your website and business branding – with relatively less effort on your part.

Most people are not skilled designers, but as you can see in the discussion above, you don’t need to be a design rockstar to improve your website’s readability, and communicate what your brand is about by applying some of the guidelines above.

So take your time and go through the discussion points above with your existing website.  If you are starting a new website, bookmark this page and revisit it again when you are ready.

Want to know another way to significantly improve your website design with relatively less effort? Take a look at this discussion on how to find professional looking images, without paying professional prices!

Other Guides:

Found This Guide Helpful?

Question – Did this guide benefit you? Leave a comment below. 

Do you know anyone who can benefit from this guide? Send them this page or click on the share buttons on the left.

You’ll be helping us out by spreading the word about our website, and you’ll be helping them out!

 

Connie Wong

About Connie Wong

Designing and creating your website (especially your first one) is not a simple task. If you're a designer like me, then you're already way ahead of the game. But what if you're one of the 99% of business owners who are not technical or creative? I want to share my website design expertise with you to help you build a professional looking website to grow your business.

Subscribe

Connie Wong

About Connie Wong

Designing and creating your website (especially your first one) is not a simple task. If you're a designer like me, then you're already way ahead of the game. But what if you're one of the 99% of business owners who are not technical or creative? I want to share my website design expertise with you to help you build a professional looking website to grow your business.

,

Leave a Reply

7 Responses to How to Pick the Perfect Font Style Design for your Website

  1. #

    7 “deadly sins”: Exactly what I wanted to know.
    Thank you Connie!

  2. #

    It is always best to use standard font types so as to ensure that the intended user has the fonts one uses. With standard font types, this headache can be avoided. Also, one can be doubly sure that the text would be easily readable on any equipment. Avoid experimenting with fancy or rare fonts for webpage as most users may not have these fonts for webpage available at their end….

    • Jeremy Wong
      #

      Thanks for the tip!

  3. #

    Hi

    Your article really was awesome and help me very much.

    Thanks. 😉

    • Jeremy Wong
      #

      Thanks! Glad you found our article helpful.

      Jeremy

  4. #

    Another awesome article! I am really motivated by this. Thank you. 😀

    • Jeremy Wong
      #

      Thanks so much, Carla! Glad this article motivates you. Best of luck on your web design!

      Jeremy