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
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
Design
8.26.22
10 Ways To Optimize Images For Web
Image Optimization Defined
The premise of image optimation is around reducing the file sizes of your website’s pictures to keep your website fast, all while maintaining image quality for your visitors.
This is done for several reasons by website owners and web agencies. The idea is the keep the overall “image weight” of your website low to optimize the experience for customers. It’s studied that even a 2-second delay in page load speed can double your bounce rate.
Below, we’ll share 10 methods you can use to optimize images for websites.
Image Names: Short & Sweet
AssignImage Alt Attributes & Tags
Image Dimensions & Product Angles
Downsizing High-Quality Images
Choose Correct Image File Formats
Thumbnail Images
Use Image Sitemaps For Web Crawlers
Don’t Use an Abundance of Decorative Images
Content Delivery Networks (CDNs) May Harm SEO
A-B Image Testing On Your Website
Image Names: Short & Sweet
When you use a camera, it randomly assigns an image name to it. A common, novice mistake is not to change the image’s name. Search engine optimization (SEO) cannot read your images properly, rendering them nearly useless in supporting your website text.
Let’s consider you’re posting an image of an indoor office plant, such as a snake plant.
Instead of sticking with the default image name (IMG40556789.jpg), it’d be better to assign the image based on a product customers may search for (home-office-indoor-snake-plant).
Assign Image Alt Attributes & Tags
Alt tags and attributes contribute to your website’s SEO. They are the text alternative to images (since browsers cannot properly read them). Again, adding proper keywords to what visitors search for is the bread and butter for alt tags. This is one of the best ways for eCommerce or blog images to show up on Google image search when you optimize images for websites.
Here are some go-to rules for alt tags:
Use simple language
Use serial numbers/model numbers (if applicable)
Do not keyword stuff alt tags (ie: office-plant-plant-office-snake-plant-snake)
Don’t use alt tags for every image, such as decorative images
Image Dimensions & Product Angles
Ask yourself, when did you buy an online product you’ve never seen before with only a single image?
It’s best to use multiple product or service angles to optimize images for web results. If we consider snake plants as an example, showing them in different sizes, next to other plants, and depicted in different locations will help sell the product.
You can then modify your image alt tags for each separate picture (targeting different keywords for SEO).
Downsizing High-Quality Images
If you have images with slow load times your website is losing prospective customers. Did you know that Google considers page load time as a website ranking factor?
To optimize images for websites, a rule of thumb is to decrease your image file size. This can be done with tools such as Adobe PhotoShop, PicMonky, PIXLR, Canva and other image editing software.
While using image software, make sure to pay attention to image settings such as:
File Format
Quality
Colour
Optimization
File Size
Choose Correct Image File Formats
Poor loading times are usually a symptom of file size and format type. When you optimize images for websites, there are 3 common file types to use, all with their benefits and drawbacks.
PNG: These offer much higher quality than GIF or JPEG files. The only problem is they’re often too large for websites. They excel at more detailed images such as complex designs or infographics. If your visitors want to zoom in on particular images, PNGs are your best bet.
GIF: These are excellent for animated images. GIFs are spectacular for social media, small thumbnails, and animated pictures but are poor for your high-quality product or website images.
JPEG: In the majority of cases, JPEGs will be the best choice. Like the image file cousin to the MP3 audio file, they provide the best quality for smaller file sizes. They offer a great balance of quality and size and are great for eCommerce products.
Thumbnails are useful to show plenty of products at once. Placed without care, however, they are detrimental to page loading speeds.
Ensure that your thumbnail image file sizes are small. It’s okay to sacrifice a bit of image quality for a better page load speed here. You don’t want to confuse Google with too much alt text on one page or by making duplicated alt text on these small photos (it may be okay to skip alt text).
Use Image Sitemaps For Web Crawlers
A submitted site map ensures website crawlers, like those from Google, can read your web pages. Thankfully, Google has provided some core guidelines for image publishing to help your website rank higher.
Submitting your sitemap won’t guarantee all of your images will be indexed by Google, but it’s a critical step for SEO nonetheless.
Don’t Use an Abundance of Decorative Images
Any image that’s not product or service related would be considered a decorative image. It’s not recommended to go overboard with these images when you optimize images for websites. This could add unnecessary file size to your web pages, thus slowing them down.
Try using a flat or transparent background colour on your website. Another tip is to use coloured areas on your site instead of images to save space. While selecting colours, make sure they compliment your brand theme and image while using colours that don’t clash with other areas.
Content Delivery Networks (CDNs) May Harm SEO
Content Delivery Networks (or CDNs) host web images and media files to increase your page speeds. Although this sounds optimal, this can also hurt your website’s SEO by not having as many backlinks. A CDN may use their domain on the image, which means visitors who click on the image go to the CDN’s website.
If your website is getting limited traffic (ie: under 1,000 visitors/day) then not having a CDN is a better call.
A-B Image Testing On Your Website
When you make changes to optimize images for websites, make sure you have a method to measure results.
Since your image optimization endeavours, did any of these KPIs increase?
Higher conversions or conversion rate
Reduced bounce rates
Increased clickthrough rates
Make sure to run A-B tests to see what customers prefer in terms of images per page, product angle shots, etc.
If you need assistance with your website’s strategy and optimizing images for the web, make sure to connect with us today so our team can help you.
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.