Demystifying Typography: Choose the Best Fonts for A Website
3
Min Read Time
Joseph Mullins
Choquer Creative Copywriter
With so many web fonts to choose from, it can feel a bit overwhelming to pick the best fonts for a website. Fonts are important because they tell a story through the visuals they provide. Fonts are used to create a sense of comfort, engagement, and trust. By using fonts correctly, you can give your website a specific type of feel to reach your target audience. This article will explain the basic typeface characteristics and when to use them, and how to use fonts to make your site more readable.
Typefaces
To start, let’s demystify the different categories of typefaces and their characteristics. There are five classifications of typefaces: serif, sans-serif, script, monospace, and display. Each typeface is used for different article features and evokes a different response from the audience. Understanding the different typefaces is important when choosing the best fonts for a website.
Serif
What it is: A serif is a stroke added to the beginning or end of a letter
Communicates: Traditional and sophisticated
Used for: headings, titles, logos, and body text
Examples: Georgia, Times New Roman
Sans-Serif
What it is: “Sans” is French for “without.” Therefore, Sans-serif fonts are typefaces without strokes added to the beginning or end of the letter.
Communicates: Clean, minimal look
Used for: headings, titles, logos, and body text
Examples: Arial, Helvetica, Product-Sans, Poppins
Script
What it is: Imitates the natural strokes of handwriting. It can range from casual to formal
Communicates: decorative effects
Used for: headings
Examples: Papyrus
Use sparingly
Monospaced
What it is: Every letter occupies the same width on the screen. Monospaced typefaces include both serif and sans-serif fonts
Communicates: Originally used on typewriters. Therefore, it evokes a vintage feel.
Used for: Today, it’s mostly used to display code.
Examples: Lucida Typewriter, Courier
Display
What it is: Decorative, novelty fonts. Font appearance varies widely
Communicates: Unique feel
Used for: titles
Examples: Nexa-Rust, Monoton
Font Size
Font size is very important when creating web content. In addition to making content legible to the reader, font size is also used as a way of communicating with the reader. For example, the following are situations when you may consider increasing the font size:
Create a sense of importance and draw the reader’s attention
Know your audience: will they need a larger font to read the material?
When choosing the best fonts for a website, make sure to view the font in different sizes. Not all typefaces are suitable for body and headings. Some fonts are only legible at a larger size and should be reserved for headings.
The following are tried and tested font size guidelines that Choquer Creative uses for our content:
Title size: 34 pt. This should be the biggest size on the page
Body text: 17 pt (default)
Links: 17 pt
Secondary text: 15 pt (2 pt smaller than the default size)
Captions: 13 pt
Text Hierarchy: Putting It All Together
Now that we have the basics down to choose the best fonts for a website, let’s dive into the text hierarchy. To improve navigation and make your content more digestible, the text should be broken up into sections with headings. Text hierarchy allows readers to easily distinguish between headings and content. The reader should be able to scan the body of text and know which section to read by using the heading.
Text hierarchy is implied with font sizes and font styles. However, to create a visually appealing and cohesive web page, limit the number of typefaces. We recommend using no more than two typefaces. For example, you can create a text hierarchy with only one font and increasing sizes.
Generally, the following format should be used for a text hierarchy: The title should be the biggest size on the page. Following the title, there should be headings of increasing specificity and decreasing size (Heading 1, Heading 2… etc).
Article Take-Aways
At this point, you should know the different typefaces and when to use them, font sizes, and when to use different sizes and implement the text hierarchy. The biggest takeaway from this article is that there’s more to choosing the best fonts for a website than deciding on a serif or sans-serif typeface. You also need to consider when it’s best to use these fonts on your webpage, and what the right style and size are for your website. Choosing the best fonts for a website is important to create a professional and engaging virtual presence for your audience.
At Choquer Creative, we use research-backed by Google and Apple to help businesses optimize their typography. Contact us today to optimize your website!
Related Stories
Design
2.1.21
5 SEO Tips For Web Designers in 2023
Make Your Site Navigation Search Engine Friendly
The idea is to be as clear-cut and structured as needed for search engines to index and rank your website. It’s also important that visitors can easily browse through your website. The homepage must show a visitor the big picture with its significant details broken down into sub-pages.
Let’s say you’re building a website for your jewelry store, your home page can lead to separate category pages for earrings, rings, necklaces, etc. Each of those category pages can have more subpages of its own. However, don’t go overboard or Google might have trouble crawling all of them. If visitors can’t find a page by following links, chances are search engines won’t either.
PRO TIP: Design Crawlable URL’s
At Choquer Creative, we know URLs play a big role in SEO, so make sure all your pages have short, structured ones. They must highlight the content of the webpage as clearly as possible. If its on the longer side, break it up with hyphens and try to use a keyword or two.
Okay, you’re probably seeing a pattern here too. Like #1, this is structuring the contents within each webpage. Titles, headers, and metadata are important aspects of SEO you just cannot miss. Every webpage must have a unique <title> tag, so make sure you don’t duplicate your title tags. Similarly, include <h1> tags on your webpages to structure its content. For title and h1 tags, include a keyword or two that’s relevant to the page’s contents. Avoid keyword stuffing. Meta descriptions are a great tool to get more eyes on your content. If you’re unsure, meta descriptions are the blurbs under the links on a search engine result page (SERP). So make sure it’s clear, concise & thoughtful.
PRO TIP: Understand A Searcher’s Intent
Excellent web design addresses multiple stages of user intent, from landing to checkout. Keywords are obviously, key. They represent ideas, subject matter and people, around which content is created. Remember that if someone is searching for something, the question is usually conversational when they’re looking for tips, suggestions, or a specific item. They tend to be less conversational and clear-cut when the searcher tries to look for specific information like an address for a store or store timings. Google Search Console is a fantastic tool to use when trying to find the keywords that can drive traffic to your website. Keep your friends close but your users closer.
Google Primarily Indexes A Website’s Mobile Version
As of March 2018, Google rolled out mobile-first indexing in response to the growing online traffic from mobile devices. To meet the rising needs of these mobile users, Google now prioritizes your mobile site. From an SEO stance, your site speed on mobile can impact your google ranking. That’s where responsive web design comes in. It creates a fluid, hassle-free experience that adapts to various screens and devices, ticking the right boxes on google’s ranking factors. You can also check how friendly your current site is with this free tool by google.
PRO TIP: Google Analytics Can Come In Handy
Google Analytics is a fantastic free tool that gives you handy insights into your audience’s behavior and preferences. It also tells you which devices they use, along with the kind of content they interact with the most.
Watch Out For Image Optimization
While Google has found ways to effectively read and rank text, it’s not quite there yet with images. That’s why it is imperative you pay attention to alt texts and the nomenclature of your images.
Alt text makes your images are accessible not only to more viewers but also lets a search engine know what the contents of your image are. This recognition can help you rank higher in google images too!
PRO TIP: Watch Our For File Sizes
Bigger files like png’s can cause your sit to slow down. So stick to .jpg and .svg formats for better load times.
Block Unusable Pages From Being Indexed
This is more important than you think. We talked about structure being one of the most important things for Google to distinguish your content from others. That being said, unusable pages that aren’t properly linked to the rest should be blocked from being indexed. Before we tell you how, let’s get the basics out of the way.
Crawling: the process of following a page’s hyperlinks to discover new content/pages
Web Spider: does the crawling
Googlebot: Google’s web spider
Indexing: the process of a search engine organizing and storing every webpage in a massive database
Crawl Budget: the number of pages Google will crawl on your site on any given day
Google says that having many low-value URLs can negatively affect a site's crawling and indexing.
“Wasting server resources on pages like these will drain crawl activity from pages that do actually have value, which may cause a significant delay in discovering great content on a site.”
While google mentions that if your site has less than 1000 URLs, they will be indexed efficiently, it wouldn’t hurt to ensure your site’s usability.
Read More
Design
11.23.22
Your Search is Over: 3 Professional Webflow Showcase Websites To Inspire You
To succeed, design and development require imagination and innovation. But, the design and development process can become difficult and time-consuming due to creative bottlenecks, which can occur at any level of experience. It can be helpful to look for inspiration from others.
The Webflow showcase websites are one place where you can get unending inspiration. These websites display the work of other professionals while offering insightful information on diverse design methods, tactics, and aesthetics. You can have a better knowledge of what works, what doesn't, and what can work for your own projects by looking at other designers' work.
We'll look at how Webflow has been utilised by various businesses to develop polished, up-to-date websites in this blog. We will investigate the effective integration of Webflow into the web design processes used by Pinnacle Fertility, Whyte Plumbing, and Pedigree Painting. Also, in order to give you more inspiration and ideas for your upcoming web design project, we will highlight a few samples from our Webflow portfolio.
Get Inspired: The Importance of Seeking Inspiration in the Design and Development Process
The secret to unleashing creativity in the design and development process is inspiration. Hitting a creative block may be time-consuming and irritating, regardless of your level of experience in the field. That's when looking to others for inspiration comes in.
Designers and developers can find endless inspiration on the Webflow showcase websites. These websites highlight the work of other experts and might offer insightful information about various design approaches, strategies, and styles. You can have a better understanding of what works, what doesn't, and what can work for your own projects by looking at other people's work.
The range of designs and styles that are presented on Webflow showcase websites is one of their biggest advantages. Everyone can find something they like, whether they are strong or muted, maximalist or minimalist. These websites provide a multitude of opportunities, whether you want to add fresh design components or just need a different viewpoint.
Also, Webflow showcase websites can assist you in keeping up with the most recent developments in design and technology. You can count on these websites to feature novel concepts as they become popular and emerge.
Pinnacle Fertility: How It Achieves Professionalism and Optimism with Webflow
A website that exuded a sense of professionalism, friendliness, and optimism was what Pinnacle Fertility, a medical company that specialises in fertility, desired. Using the use of Webflow, their website accomplished this objective through a deliberate design strategy, colour scheme, and video content.
The website's colour scheme includes formal hues like dark blues and greys, but it also includes a vibrant pop of yellow to create a cheerful and upbeat atmosphere. This intentional use of colour was done to portray the joy connected to the prospect of starting a family.
The website's hero section is particularly interesting because it has a number of video clips that support the joyful and upbeat mood the site wants to convey. The videos feature happy parents holding their children, as well as images of the staff, the clinic, and client endorsements. Together, these components convey a sense of confidence and trust in the company.
The website efficiently uses white space to prevent overcrowding the viewer and give their eyes a time to relax and assimilate the information. Despite the volume of content on the page, the area doesn't feel crowded or overpowering because to the liberal use of white space.
In addition to its design approach and use of colour and video, Pinnacle Fertility's website was also made with Webflow, a website builder that enables designers to create responsive and professional websites without the need for coding. Due to reduced development costs, Pinnacle Fertility was able to create its professional and upbeat website.
The Power of Minimalism in Website Design: A Look at Whyte Plumbing's Website Made with Webflow
In recent years, the minimalist style of website design has gained popularity. This aesthetic emphasises the essential while eliminating extraneous details, resulting in a simple and basic appearance. Whyte Plumbing's website, made with Webflow, is an excellent example of a website that effectively utilises the power of minimalism to communicate its message.
Embracing Simplicity's Beauty
The website for Whyte Plumbing uses a straightforward gradient colour scheme to emphasise the site's minimalist aesthetic. The website's simplicity is further emphasised by the use of white space and simple typography, which directs attention to the page's most crucial elements.
Unambiguous call to action
The call to action (CTA) sticks out and is obvious despite the website's simple design. The "Contact Us" button is prominently displayed in the hero section's middle, making it simple for visitors to find and use. The CTA is seamless and unobtrusive because the text and button are the same colour.
For Improved User Experience, Minimalism
The website for Whyte Plumbing is evidence that less is more. Visitors won't be overwhelmed or lost in a cluttered layout thanks to the site's minimalist design, which makes it simple for them to locate the information they require. The user experience is enhanced by the use of negative space, straightforward text, and a small number of colours.
The website for Whyte Plumbing has a simple layout and is mobile-friendly as well. The straightforward design adapts nicely to smaller screens, guaranteeing a consistent user experience across all platforms. As mobile usage increases, this strategy is crucial for organizations today.
Pedigree Painting: A Hero Section Done Right
The hero section is one of the most crucial parts of a website when it comes to web design. Visitors see it right away, and it has the power to positively or negatively impact how they perceive a company. The website for Pedigree Painting is an excellent illustration of how a company can make the most of its hero section.
Building Customer Credibility through Awards
A painting business with a focus on excellent work and client happiness is called Pedigree Painting. They prominently display their accolades and certificates in their hero section in an effort to inspire confidence in prospective clients. Visitors are quickly convinced of their knowledge and credibility as a result, and this may influence their decision to hire them.
A call-to-action that is crystal clear and actionable is another crucial component of a hero section (CTA). The "Schedule an Estimate" button on the Pedigree Painting website is a straightforward but effective call to action. This CTA stands out owing to its contrasting hue and is purposefully positioned in the middle of the hero area.
High-Quality Work Displayed with a Full-Width Hero Picture
The full-width hero image that displays Pedigree Painting's high calibre work is one of the section's most notable characteristics. The eye-catching picture offers a quick visual depiction of their services. In order to emphasise their commitment to delivering top-notch workmanship and client pleasure, the tagline "Quality Work, Guaranteed" is layered on the image.
Searching for extra ideas for your subsequent web design endeavour? Go no farther than our Webflow showcase, which includes a variety of companies and sectors with which we have collaborated.
Each of the website designs in our portfolio has a distinctive approach and look. This demonstration shows the versatility and power of Webflow with its stark layouts and striking colour combinations.
The website for Wealthsprout Academy, a platform for financial education and coaching, is one example we use in our showcase. The website's simple, contemporary design successfully communicates the business's purpose of enabling people to take charge of their financial destiny. The website has a polished but approachable appearance thanks to the use of bold font and a soft colour scheme.
The website for the plant-based protein company Aloha Protein is another noteworthy instance. The brand's joyful and vivacious spirit is well communicated via the website's colourful colour palette and striking visuals. The website offers a compelling user experience thanks to the use of interactive elements like hover effects and animated visuals.
Searching for a simpler strategy? Visit the website for the breathwork and meditation app Breathwrk. The website's straightforward design and monochrome colour scheme promote relaxation and concentration. The design is made more interesting and complex by the use of bold font and subtle animations.
The incredible companies we have had the privilege of working with are just a few examples. Visit our Webflow showcase to find more ideas and witness the strength and adaptability of Webflow in action.
Our goal at our web design and development company is to use our knowledge of Webflow, search engine optimization, online marketing, and lead generation to help businesses of all sizes enhance their online presence. To find out more about our offerings and how we can assist you in advancing your online presence, get in touch with us right away.
Thank you for reading our blog. Choquer Creative is dedicated to helping businesses of all sizes improve their online presence through web design, search engine optimization, online marketing, and lead generation. If you're interested in learning more about our services and how we can help you grow your business, please visit our Package Page.
Read More
Sign Up For Our Learning Hub Weekly Blog
Dive into one of our articles to learn more about web development, SEO tips & tricks, and how you can grow your business through your website.
Awesome! More content!
Oops! Something went wrong while submitting the form.