Typography Options

07/12/2017
IMPORTANT NOTE – This feature is only available on Avada version 4.0 or higher.

On the new Theme Options panel that comes with Avada version 4.0 or higher, we’ve logically combined options that affect a specific section of your site into their own panel. This also includes customization options such as layout, colors and typography. For example, if you’d like to customize your header, then you’ll find all the options you’ll need under the header tab in Theme Options. Continue reading below to learn more about the new typography options.

Typography Options Locations

All typography options are located within their specific Theme Options panel. For example, if you’d like to customize your main menu typography settings, then you would find those options in the Menu > Main Menu tab, under the ‘Main Menu Typography’ section. If you don’t find the typography settings for a specific feature, it may be because it’s been combined into a header typography option.

  • Body Typography Options – To customize the Body Font, navigate to the Avada > Theme Options > Typography > Body Typography where all the Body Typography options such as font family, weight, size, etc. are found.
  • H1 – H6 and Post Title Typography Options – To customize the Headers and Post Titles Font, navigate to the Avada > Theme Options > Typography > Headers Typography where all the Headers and Post Titles Typography options such as font family, weight, size, etc. are found.
  • Specific Typography Options – To customize specific typography options, such as Menu, Page Title bar, Sliding Bar, Footer, and the like, navigate to their specific panels to access their different typography options such as font family, weight, size, etc.

Specific Typography Options

  • Main Menu Typography Options – Navigate to the Avada > Theme Options > Menu > Main Menu panel, then go to the Main Menu Typography section. View here.
  • Flyout Menu Typography Options – Navigate to the Avada > Theme Options > Menu > Flyout Menu panel. View here.
  • Secondary Top Menu Typography Options – Navigate to the Avada > Theme Options > Menu > Secondary Top Menu panel. View here.
  • Mobile Menu Typography Options – Navigate to the Avada > Theme Options > Menu > Main Menu panel, then go to the Mobile Menu Typography section. View here.
  • Page Title Bar Typography Options – Navigate to the Avada > Theme Options > Page Title Bar panel, then go to the Page Title Bar Styling section. View here.
  • Breadcrumbs Typography Options – Navigate to the Avada > Theme Options > Page Title Bar > Breadcrumbs panel. View here.
  • Sliding Bar Typography Options – Navigate to the Avada > Theme Options > Sliding Bar panel, then go to the Sliding Bar Styling section. View here.
  • Footer Typography Options – Navigate to the Avada > Theme Options > Footer > Footer Styling panel, then go to the Footer Typography section. View here.
  • Sidebars Typography Options – Navigate to the Avada > Theme Options > Sideabrs > Sidebar Styling panel. View here.
  • Button Element Typography Options – Navigate to the Avada > Theme Options > Fusion Builder Elements panel, then go to the Button Element section. View here.
  • Content Box Typography Options – Navigate to the Avada > Theme Options > Fusion Builder Elements panel, then to the Content Box section. View here.
  • Counter Boxes Typography Options – Navigate to the Avada > Theme Options > Fusion Builder Elements panel, then to the Counter Boxes section. View here.
  • Blog Meta Typography Options – Navigate to the Avada > Theme Options > Blog > Blog Meta panel. View here.
  • Elastic Slider Typography Options – Navigate to the Avada > Theme Options > Elastic Slider panel. View here.
  • Pagination Typography Options – Navigate to the Avada > Theme Options > Extra > Pagination panel. View here.
  • Form Typography Options – Navigate to the Avada > Theme Options > Extra > Form Styling panel. View here.
  • bbPress & BuddyPress Typography Options – Navigate to the Avada > Theme Options > bbPress & BuddyPress panel. View here.
  • WooCommerce Typography Options – Navigate to the Avada > Theme Options > WooCommerce > WooCommerce Styling panel. View here.
  • Events Calendar Typography Options – Navigate to the Avada > Theme Options > Events Calendar > General Events Calendar panel. View here.
  • Events Single Post Typography Options – Navigate to the Avada > Theme Options > Events Calendar > Events Single Posts panel. View here.

Typography Options Setup

Font Family – Illustrated as A on the screenshot, this option allows you to select a font family to use.

Backup Font Family – Illustrated as B on the screenshot, this option allows you to select a backup font family to use incase the primary font doesn’t load correctly.

Font Weight and Style – Illustrated as C on the screenshot, this option allows you to select a font weight and style to use.

Font Subsets – Illustrated as D on the screenshot, this option allows you to select which subset to use.

Font Size – Illustrated as E on the screenshot, this option allows you to set the size of the text on display.

Line Height – Illustrated as F on the screenshot, this option allows you to set the spacing between lines.

Letter Spacing – Illustrated as G on the screenshot, this option allows you to set the spacing between letters.

Margin Top – Illustrated as H on the screenshot, this option allows you to set the top margin of the text.

Margin Bottom – Illustrated as I on the screenshot, this option allows you to set the bottom margin of the text.

Font Color – Illustrated as J on the screenshot, this option allows you to set the color of the text.


Custom Fonts

Along with the new Typography options, you can also upload as many custom fonts as you want. You can upload custom fonts by navigating to the Avada > Theme Options > Typography > Custom Fonts tab. If you’d like to learn how to upload custom fonts, please read our ‘Custom Fonts’ article linked below.

Click Here To Read Our ‘Custom Fonts’ Article

Responsive Heading Typography

IMPORTANT NOTE – This option is located in the Theme Options > Responsive tab in Avada 3.8.8 and up.

The Responsive Heading Typography option allows you to enable or disable responsiveness for all headings. Please note that this is based on a calculation of font size and screen width and is done automatically. This helps your layout look more proportionate on smaller sizes. You can also use the ‘Responsive Typography Sensitivity’ option and the ‘Minimum Font Size Factor’ option to further adjust the responsiveness.


Font Sizes

Heading Font Size H1
  • Page Title Bar – Affects the font size of titles inside all Page Title Bars. View a sample here.
  • Title Element – Affects the font size of text set to H1 inside all Title Elements. View a sample here.
Heading Font Size H2
  • Tagline Box Element – Affects the font size of titles inside all Tagline Box Elements. View a sample here.
  • Content Box Element – Affects the font size of the titles inside all Content Box Elements. View a sample here.
  • Flip Box Element – Affects the font size of the Frontside Heading inside all Flip Box Elements. View a sample here.
  • Title Element – Affects the font size of text set to H2 inside all Title Elements. View a sample here.
Heading Font Size H3
  • Pricing Table Element – Affects the font size of titles inside all Pricing Table Elements. View a sample here.
  • Modal Popup – Affects the font size of titles inside all Modal Popup windows. View a sample here.
  • Title Element – Affects the font size of text set to H3 inside all Title Elements. View a sample here.
Heading Font Size H4
  • Flip Box Element – Affects the font size of the Backside Heading inside all Flip Box Elements. View a sample here.
  • Person Element – Affects the font size of the Name Option inside all Person Elements. View a sample here.
  • Person Element – Affects the font size of the Title Option inside all Person Elements. View a sample here.
  • Popover Element – Affects the font size of titles inside all Popover Elements. View a sample here.
  • Recent Posts Element – Affects the font size of titles inside all Recent Work Elements. View a sample here.
  • Tabs Element – Affects the font size of titles inside all Tabs Elements. View a sample here.
  • Toggles Element – Affects the font size of titles inside all Toggles Elements. View a sample here.
  • Title Element – Affects the font size of text set to H4 inside all Title Elements. View a sample here.
  • Image Rollover – Affects the font size of titles on all Image Rollovers. View a sample here.
  • FAQ Titles – Affects the font size of titles on all FAQ items. View a sample here.
Heading Font Size H5
  • Sharing Box Element – Affects the font size of titles inside all Sharing Box Elements. View a sample here.
  • Title Element – Affects the font size of text set to H5 inside all Title Elements. View a sample here.
Heading Font Size H6
  • Title Element – Affects the font size of text set to H6 inside all Title Elements. View a sample here.

Other Font Sizes

  • Body Font Size – Affects the font size of all text within your website that does not have a special, custom option. View a sample here.
  • Main Menu Font Size – Affects the font size of all navigation or menu items on your website. This does not include submenu items. View a sample here.
  • Main Menu Dropdown Font Size – Affects the font size of all submenus of menu items on your website. This includes mega menus. View a sample here.
  • Secondary Menu & Top Contact Info Font Size – Affects the font size of all text in the top bar when using Header designs #2 – #5. View a sample here and here.
  • Side Menu Font Size – Affects the font size of all sidebar navigation items on your website. View a sample here.
  • Mobile Menu Font Size – Affects the font size of menu items in mobile devices. View a sample here.
  • Breadcrumbs Font Size – Affects the font size of breadcrumbs inside all Page Title Bars. View a sample here.
  • Sidebar Widget Heading Font Size – Affects the font size of all sidebar widget headings on your website. View a sample here.
  • Sliding Bar Widget Heading Font Size – Affects the font size of all Sliding Bar widget headings in your sliding bar. View a sample here.
  • Footer Widget Heading Font Size – Affects the font size of all footer widgets in your footer. View a sample here.
  • Copyright Font Size – Affects the font size of copyright text on the very bottom of your website. View a sample here.
  • Post Titles Font Size – Affects the font size of titles inside all Blog and Portfolio Posts. View a sample here and here.
  • Post Titles Extras Font Size – Affects the Comment, Related Posts, Related Projects and Author Titles inside all Blog Posts. View a sample here, here and here.
  • Header Tagline Font Size – Affects the font size of headlines in the top menus found in Header design #3. View a sample here.
  • Meta Data Font Size – Affects the font size of all meta data on your website. View a sample here.
  • Page Title Font Size – Affects the font size of titles inside all Page Title Bars. View a sample here.
  • Page Title Subheader Font Size – Affects the font size of subheaders inside all Page Title Bars. View a sample here.
  • Pagination Font Size – Affects the font size of all paginations on your website. View a sample here.
  • WooCommerce Icon Font Size – Affects the font size of the add to cart and details on your shop page. View a sample here and here.

Font Line Heights

Heading Font Line Height H1
  • Page Title Bar – Affects the font line height of titles inside all Page Title Bars. View a sample here.
  • Title Element – Affects the font line height of text set to H1 inside all Title Elements. View a sample here.
Heading Font Line Height H2
  • Tagline Box Element – Affects the font line height of titles inside all Tagline Box Elements. View a sample here.
  • Blog Post – Affects the font line height of titles inside all Blog Posts. View a sample here.
  • Portfolio Post – Affects the font line height of titles inside all Portfolio Posts. View a sample here.
  • Content Box Element – Affects the font line height of titles inside all Content Box Elements. View a sample here.
  • Flip Box Element – Affects the font line height of the Frontside Heading inside all Flip Box Elements. View a sample here.
  • Author Title – Affects the font line height of the Author Title Heading inside all Blog Posts. View a sample here.
  • Related Posts – Affects the font line height of the Related Posts Heading inside all Blog Posts. View a sample here.
  • Leave A Comment – Affects the font line height of the Leave A Comment Heading inside all Blog Posts. View a sample here.
  • Title Element – Affects the font line height of text set to H2 inside all Title Elements. View a sample here.
Heading Font Line Height H3
  • Pricing Table Element – Affects the font line height of titles inside all Pricing Table Elements. View a sample here.
  • Modal Popup – Affects the font line height of titles inside all Modal Popup windows. View a sample here.
  • Title Element – Affects the font line height of text set to H3 inside all Title Elements. View a sample here.
Heading Font Line Height H4
  • Flip Box Element – Affects the font line height of the Backside Heading inside all Flip Box Elements. View a sample here.
  • Person Element – Affects the font line height of the Name Option inside all Person Elements. View a sample here.
  • Person Element – Affects the font line height of the Title Option inside all Person Elements. View a sample here.
  • Popover Element – Affects the font line height of titles inside all Popover Elements. View a sample here.
  • Recent Posts Element – Affects the font line height of titles inside all Recent Work Elements. View a sample here.
  • Tabs Element – Affects the font line height of titles inside all Tabs Elements. View a sample here.
  • Toggles Element – Affects the font line height of titles inside all Toggles Elements. View a sample here.
  • Title Element – Affects the font line height of text set to H4 inside all Title Elements. View a sample here.
  • Image Rollover – Affects the font line height of titles on all Image Rollovers. View a sample here.
Heading Font Line Height H5
  • Sharing Box Element – Affects the font line height of titles inside all Sharing Box Elements. View a sample here.
  • Title Element – Affects the font line height of text set to H5 inside all Title Elements. View a sample here.
Heading Font Line Height H6
  • Title Element – Affects the font line height of text set to H6 inside all Title Elements. View a sample here.
Body Font Line Height
  • Default Body Content – Affects the font line height of all text within your website that does not have a special, custom option. View a sample here.
Secondary Menu Line Height
  • Top Menu Headline – Affects the font line height of headlines in the top menus found in Header design #3. View a sample here.

Font Weights

  • Select Body Font Weight – Affects the font weight of all text within your website that does not have a special, custom option. View a sample here.
  • Select Menu Font Weight – Affects the font weight of all navigation or menu items on your website. This does not include submenu items. View a sample here.
  • Select Headings Font Weight – Affects the font weight of all headings on your website. View a sample here.
  • Select Footer Headings Font Weight – Affects the font weight of all footer headings on your website. View a sample here.
  • Select Button Font Weight – Affects the font weight of all button texts on your website. View a sample here.

Font Letter Spacing

  • Heading H1 – H6 Letter Spacing – Affects the letter spacing of all H1 – H6 Headings on your website.
  • Menu Letter Spacing – Affects the letter spacing of all navigation or menu items on your website. This does not include submenu items. View a sample here.
  • Button Letter Spacing – Affects the letter spacing of all button texts on your website. View a sample here.

Font Margins

Under the Typography tab, you can also adjust the Top and Bottom margins of H1 to H6 headings. These options are especially useful if you’d like to manually tweak your headings to fit your website better. Take note that these options accept em units instead of pixel units.

18 Likes
Proudly Serving Over 400000 Satisfied Users!