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 Logo Text Typography

Customizing the Website Logo Text Typography

It’s preferable that you have a graphical logo, but what if you don’t have one? You can still go with a beautiful font based logo. You can make it unique by using a different font, font weight, style, spacing, and other text properties.

Navigate to your website admin, browse to Appearance > Customize > Typography> Logo.

In fact, there’s nothing wrong with having a text-based logo. Especially if you’re just starting out, it is better to use a text based logo, maybe for your startup, a blog or a small family owned business.

It lets you focus at your business intricacies first and then learn from the mistakes to judge feasibility. Once you want to further pursue the business, you must go ahead and get a professional logo prepared for the site.

In the meantime, let’s understand each of the given options for configuring a font based logo.

Set the Font for Your Logo

You should preferably use a different font for a logo than the headings and text. Out of the dozens of standard fonts and Google fonts to choose from, you can definitely find one that looks perfect for your logo. Just click over the drop-down menu underneath the “Font Family” in Logo panel and choose your desired font.

Set the Font Weights for your Logo

Font weight will either make your logo look bold or thin. Not every font supports all the font weights but does support a few mostly.

Technically speaking, 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.

These are the options you get to set the font weight.

 Thin: 100

Light: 200

Book: 300

Normal: 400

Medium: 500

Semibold: 600

Bold: 700

Extrabold: 800

Black: 900

Just click over the drop-down menu underneath “Font Weight” label in Logo panel and choose your desired font weight.

Set the Font Styles for your Logo

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

Transforming Text for your Logo

 You can choose any of these four options. In case of a logo, some of these options may only look good in some fonts. For example, a logo in Capitalize text using Arial font will definitely not look good. So use your best judgment and live preview to see what works best for your brand (business name).

  • 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.

Just browse the drop-down underneath “Text Transform” label in Logo panel and select a suitable setting.

Set a Line Height for your Logo

The logo line height is the vertical space between two logo text lines. Usually, the logos are merely a few words only. So when you change the line-height for logos, you won’t be able to notice the difference because you would not be having a multi-line logo basically.

You can use the slider under the “Line Height” label in Logo panel to make the changes.

You can choose to keep a different logo font size 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. So you can click over each icon and adjust the slider as per your needs to save your preferences.

Set the Letter Spacing for your Logo

With letter spacing feature for headings, you can increase or decrease the space in between logo letters.

You can easily use the slider under the “Letter Spacing (px)” label in Logo panel to make changes to the letter spacing. You also get to choose different letter spacing for the desktop, tablet, and mobile as discussed under Line Height feature above.

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

How can we help?