Website Theme Customizer

  1. Home
  2. Support
  3. Website Theme Customizer
  4. Typography – Set the Font Styling for Text Shown on the Website
  5. How to Set the Font and Typography Options for the Body Text

How to Set the Font and Typography Options for the Body Text

You have the option to change the Body font used on the website in the Typography section. Navigate to your website admin, browse to Appearance > Customize > Typography > Body.

These are the general top-level body configurations for setting the Typography preferences site-wide. The body is an HTML (programming) tag which covers all of your website sections. It is the primary container that holds your website together.

Setting a Font Family for Your Website

The very first step would be choosing a font family for your website site-wide. It’s the first crucial choice that will shape up how your website looks. You need to evaluate the choices and make sure you choose a font that reflects your brand aura.

You get hundreds of fonts to choose from. Not just the standard fonts, but you get access to all the Google fonts at a click of a button.

Just click over the drop-down menu underneath the “Font Family” and choose from the variety of fonts available for you. What’s best is you can click over each one and live preview it to see how it blends with your website.

Setting the Right Font Weight for the Fonts

 The font weight is what makes a font look bolder. You can use the same font to be thinner or thicker, as per your preferences. Font weight is an HTML property that accepts numbers, usually from 100 to 900 with an increment of 100 in between each, 100 being thinnest and 900 being the boldest.

You don’t have to worry about all that code. We have visually provided the following options that let you quickly set the font weight.

  • Thin: 100
  • Light: 200
  • Book: 300
  • Normal: 400
  • Medium: 500
  • Semibold: 600
  • Bold: 700
  • Extrabold: 800
  • Black: 900

It’s important to note that the font needs to support the font weight to be able to use it; otherwise, you might see no change. Most fonts support at least a couple font weights.

Setting the Font Style

You can choose to either follow a normal style or make your font italic. To do so, just click over the drop-down right beneath the “Font Style” label and choose your desired setting.

Setting the Text Transform Property

 Text-transform is an HTML property that lets you transform your text in the following way

  • Capitalize
    • It capitalizes the first letter of each word.
  • Lowercase
    • It converts all the letters to lowercase
  • Uppercase
    • It converts all the letters to uppercase
  • None
    • It doesn’t do anything, keeps your text as it is just the way you have written it.

You can choose any of these four options by clicking over the drop-down underneath “Text Transform”.

Changing the Font Size in Pixels

You can easily use the provided slider under the “Font Size (px)” label to increase or decrease the text size. You will also be able to live preview to make your best judgment for what best suits your design and purpose.

You can choose to keep different font sizes for the desktop, tablet, and mobile. Simply click over the small gray color icon next to the label; it will expand it into three icons. First one is for the desktop font size, second for the tablet font size, and third for the mobile font size.

Changing the Text Line Height

The line height is the vertical space (y-axis) between two lines of a text. You can either increase or decrease the space to suit your design and needs.

You can use the slider under the “Line Height” label to make the changes. You get the same three icons for setting different line height for desktop, tablets, and mobile.

Changing the Default Letter Spacing of Your Website Text

With letter spacing feature, you can increase or decrease the space in between font letters for the headings, span, and other tags. The letter spacing is not for the paragraphs. As letter spacing is most useful for the headings and such higher level text, to have a meaningful design impact too.

You can easily use the slider under the “Letter Spacing (px)” label to make changes to the letter spacing.

Changing the Font Text Color

You can change the paragraph text color site-wide just by clicking over “Select Color” button under the “Text Color” label.

You can choose the color of your choice or live preview the colors to choose whatever best suits your design and purpose.

Something missing? Contact us
Was this article helpful to you? Yes No

How can we help?