Latest posts by Ahmad Imran (see all)
- Blogging with Chromebook – Can it Handle Everything? [2017 Update] - June 8, 2017
- SiteGround WordPress Hosting – 2 Years On (2017 Update) - May 17, 2017
- The Challenge of Consistent Blogging: 3 Reasons, 3 Remedies - May 14, 2017
Last updated: 8th of February 2016. This article was first published in October 2015 but recently updated in line with the current version of the Avada theme – 3.9.3.
Choosing your WordPress theme is an important decision. I suggest you to seek professional advice and expert opinion about the quality of code and theme mechanics. My reviews of the Avada theme are purely from personal user-experience perspective.
Use of fonts on your blog has a potential to make or break your blog design.
If I word it conservatively, it has a potential to differentiate an above-average design from majority of the average blog designs.
Derek Halpern of Social Triggers explained the psychology of using fonts in this simple article here.
And Dustin Stout wrote an excellent article on creating a stunning reading experience for your blog readers. He explained the use of fonts and typography in this article to create a pleasant design and reading environment for your blog visitors.
“Bottom line is that the choice and characteristics of the utilised fonts are important for a blogger.”
I use Avada premium theme for WordPress (current version 3.9.3) and the purpose of this article is to dissect it here to give you a flavour of the “fonts options” available within this theme.
With the help of 9 back-end snapshots from my Avada admin panel, you will be able to know exactly what this theme offers in terms of setting fonts for your blog. These snapshots are taken from the previous version of the theme however, they are still valid for the current revision 3.9.
You are either a prospective buyer of this theme and curious to know about your typography options or you might just want to compare your present theme with Avada in terms of fonts and typography customisation.
Avada is an extremely customisable theme and one of the best sellers on Envato Themeforest. It is useful to compare it for different features against your dream WordPress theme in your mind.
Table of Contents for Quick Navigation
- How to Access “Fonts” in Avada Theme?
- 3 Main Sources of Fonts in Avada Theme
- Setting Font Details in Avada Theme
- Fonts Colours Selection
- Font Options in Avada Theme – Wrap up
Go to “Theme Options” from Avada heading and then click on the “Typography” from the list on your left hand side.
You will be presented with a list of options within “Typography” to start working on your font selection and properties.
The first 3 options in the main window offer you a choice of fonts from the following 3 sources.
1) Custom Fonts
You might have downloaded a font of your choice from internet or probably have bought a premium font. Places like Font Squirrel and TypeKit offer various fonts to be used on your blog. You can upload the fonts under this option to be used in menu and headings of your website. Please note that you will need to upload all four files for a specific font you want to use (.woff, .ttf, .svg and .eof).
2) Google Fonts
My blog runs on freely available fonts by Google under “Google Fonts” option.
I use Oswald font for menus while Lato for everything else (body and headings etc.)
3) Standard Fonts
The last option available is for a standard set of font families that can be chosen from the list. These are the fonts which are commonly installed in your operating system or browser and are quicker to use. I found them to be common and limited in choice hence opted for the Google fonts for my blog.
Choosing a font for your blog is a critical decision.
It is not something that you will change frequently because it becomes a part of your theme and brand. An element of consistency and persistence is required to build your blog image and brand in the eyes of your returning visitors.
I suggest you to spend time and make a cautious decision to go for a set of fonts which is attractive, fitting and easy to read for your blog visitors.
Avada gives you plenty of options to adjust fonts and typography details based on your needs.
The next 5 headings are precisely designed to serve this purpose.
1) Font Sizes
Under this section you can choose the size of your displayed fonts in various categories. You can decide if you want to use the built-in “responsive” option where displayed fonts are adjusted for sizes depending on the size of the screen they are displayed on.
This options allows you to change the default font size for various elements of your blog such as headings (H1, H2, H3, H4, H5 and H6), body font, menus (main and top menus, side menu and mobile menu etc.), titles and various others. Have a look at the full list in the snapshot below (snapshot from Avada version 3.8.8 but applicable to Avada version 3.9 as well).
2) Font Line Heights
Corresponding to the font sizes for different elements, this option allows you to choose the relevant line heights for each font. This is an important step to make sure that your fonts are displayed in an easy to read manner.
As an example, I have gone for a 22px font size for my main body text with a 33px line height which is exactly 1.5x the actual font size.
3) Font Weights
Fonts come in different weights.
As an example I use Lato font for my headings and the main text and it comes in 5 different weights.
Thin, light, normal, bold and extra bold.
You can see from the snapshot below that I have gone for a “thin” option for my main text, “normal” in menus and “ultra bold” for my headings.
Depending on which font you opt for, there is a possibility that you will have similar options available to you as well. Note that loading extra weights can have impact on your site loading speed.
4) Font Letter Spacing
This option allows you to change letter spacing of a selected font.
I am not sure about your requirements but I personally did not use this option at all. I opted for a regular spacing as a default which can be seen below.
5) Font Margins
For all heading types H1 to H6, Avada offers you an option to set top and bottom margins individually. This will be dependent on your individual theme and text settings.
I tend to leave these to default numbers. Have a look below of my font margins for each heading type.
Font colour selection is not available under “Typography” menu.
You will need to go to the “Styling” menu to find this.
It makes sense to adjust font colours from the styling options where you can tweak other formatting as well. The snapshot above does not show the full list of fonts that you can choose your own colour of but the options are plenty. They are scattered under different headings. After a few minutes of playing around with this menu, you will be able to control almost all font colours used on your website.
I am impressed with the amount of control and customisation Avada offers to its users.
There is one minor gripe to mention.
Font options in Avada theme do not include an option to control the size of the “footer” font straight out of the box.
It picks up the “body” font characteristics.
I wanted this control as I believe that the font in footer should be slightly smaller than the main font. I agree that there might be a way to do it via CSS customisation but why not have this option in the menu?
I am sure if someone from Avada is reading this, they will bring this option to us in the next possible update.
Other than that, I am well satisfied.
It gives me plenty of control to make my site look and feel as I desire in terms of typography. I think that Avada team has done very well here to give the end-user an ultimate typography customisation experience via this theme.
If there is any specific area which I have not covered in this article or you want to know about any detail further, drop me a line below in comments and I will respond accordingly.
How does your theme compare to the font options provided in Avada theme?
Or, if are you a prospective buyer of this theme, do you think that it gives you a plenty of options to set your fonts according to your requirements?