Genesis - How to modify the appearance of the site title & tagline

Ever wondered how to adjust the font size, letter case (uppercase to lowercase and vice versa), and letter spacing of your site title? It's easy. Let's get started!

Change the site title font size

Go to WordPress > Appearance > Customize > Additional CSS. Copy the following code and paste it in the box:

.site-title, .site-title a, .site-title a:hover {
    font-size: 40px; }

@media only screen and (max-width: 480px) {
    .site-title, .site-title a, .site-title a:hover {
        font-size: 32px; } }

Let's break this down this code a bit so you understand what's happening:

  1. The first section of this snippet will change the font size of the site title on any screen above 480px. This will include desktop computers, laptops, and tablets.
  2. The second section of this snippet will change the font size of the site title on any screen below 480px. This targets mobile phones. Generally, you want the font size on mobile to be a little smaller than it is on desktop computers.
Tip! Once you've added the code, you can see your changes live right inside the Customizer. To see how it looks on mobile, click the mobile phone icon at the bottom of your screen. It's on the right side of the Customizer panel.

Change the site title letter case

There are three options for letter case:

  • Uppercase (all letters in caps)
  • Lowercase (no letters capitalized)
  • None/Unset (will display whatever capitalization you do [or do not] have in your site title — this is most useful if you want capitalized letters in your site title)

Go to WordPress > Appearance > Customize > Additional CSS. Copy your desired letter case code and paste it in the box.

Uppercase

.site-title, .site-title a, .site-title a:hover {
    text-transform: uppercase; }

Lowercase

.site-title, .site-title a, .site-title a:hover {
    text-transform: lowercase; }

None/Unset

.site-title, .site-title a, .site-title a:hover {
    text-transform: none; }

Change the site title letter spacing

Letter spacing, like it sounds, is the amount of space between each letter. Uppercase site titles typically have more letter spacing. If your theme originally had an uppercase site title and you're changing it to lowercase, you'll probably want to adjust the letter spacing too.

Go to WordPress > Appearance > Customize > Additional CSS. Copy the following code and paste it in the box:

.site-title, .site-title a, .site-title a:hover {
    letter-spacing: 5px; }
The 5px value can be changed. Pop the code into your Customizer and then you can play around the px value and see how it looks. Between 1px and 10px is usually best.

Changing multiple aspects of the site title

This is optional. You can paste all the codes above separately if that's easiest for you. But when modifying the same selector (i.e. .site-title) with multiple CSS declarations (i.e. font-size: 40px), the correct way to do it is in a single rule-set, like this:

.site-title, .site-title a, .site-title a:hover {
    font-size: 60px;
    text-transform: lowercase;
    letter-spacing: 2px; }

Again — optional! But if you're a code nerd like we are, you'll appreciate this. 😉

Tagline

You can also change the appearance of the tagline! Everything mentioned above re: letter spacing, letter case, etc applies exactly the same to the tagline. Just use the code snippet below instead.

Go to WordPress > Appearance > Customize > Additional CSS. Copy the following code and paste it in the box:

.site-description {
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 2px; }

You can modify the font size, letter case, and letter spacing as you'd like.

Note: Not all of our themes display a tagline. If your theme does not display a tagline, it is not possible to add a tagline without customization.