Website Theme Customizer

  1. Home
  2. Support
  3. Website Theme Customizer
  4. Typography – Set the Font Styling for Text Shown on the Website
  5. Customizing the Website Blog Post Title Text Typography

Customizing the Website Blog Post Title Text Typography

If you have always used a default template for sidebars, you might not have noticed every sidebar widget has a heading. You can configure it to stand out with more prominent font size for example.­­ Otherwise, you can choose to keep it minimal and let the visitors focus on the content area or sidebar widgets itself.

Whatever business you may be operating, these configurations will further help you to fine tune the design preferences. Following are a few configurations to enhance your Blog Post Title. Navigate to your website admin, browse to Appearance > Customize > Typography> Sidebar Widget Heading.

Setting the Fonts for the Sidebar Widget Heading

There’s a variety of fonts to choose from, including the standard and all the Google fonts as well.

Just click over the drop-down menu underneath the “Font Family” in Sidebar Widget Heading panel and choose from the variety of fonts available for you.

You can also preview the fonts for how the Sidebar Widget Heading blends with your website. So you can choose the font that looks best and reflects your brand aura.

Set the Font Weights for Sidebar Widget Heading

 The font weight property is what will make the Sidebar Widget Heading to look bolder or thinner. 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.

Following are the available font-weight options you get:

Thin: 100

Light: 200

Book: 300

Normal: 400

Medium: 500

Semibold: 600

Bold: 700

Extrabold: 800

Black: 900

Please note that not all fonts support all the font weights. Most fonts support a few font weights at least though. So don’t worry if the live preview doesn’t change for some of the font weights.

Set the Font Style for Sidebar Widget Heading

You can make your Sidebar Widget Heading italic or choose to follow the standard style.

Just click over the drop-down right beneath the “Font Style” label in Sidebar Widget Heading panel and choose your desired setting.

Set the Text Transform Property for Sidebar Widget Heading

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” in Sidebar Widget Heading panel.

Change the Font Size for Sidebar Widget Heading

You can easily use the provided slider under the “Font Size (px)” label in Sidebar Widget Heading panel 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.

Change the Line Height for Sidebar Widget Heading

The line height for the Sidebar Widget Heading is vertical space (y-axis) around the sidebar heading. You can either choose to increase or decrease the space around the heading to suit your design and needs.

The line height can easily be changed under the “Line Height” label in Sidebar Widget Heading panel by using the given slider to make the changes.

You get the same three icons, as discussed above (under Font Size) for setting different line height for desktop, tablets, and mobile.

Change the Letter Spacing for Sidebar Widget Heading

As the name reflects, letter spacing lets you increase or decrease the space in between font letters for the Sidebar Widget Heading.

Simply use the slider under the “Letter Spacing (px)” label in Sidebar Widget Heading to make changes to the letter spacing.

Change the Text Color for Sidebar Widget Heading

You can change the heading title color just by clicking over “Select Color” button under the “Text Color” label in Sidebar Widget Heading panel.

While you can always play with colors, it’s preferable that you do not use contrast colors in sidebars heading. As it could be a cause of distraction. So you must understand this and use the color with caution.

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

How can we help?