[Resolved] Adjusting the Line Spacing in the Fonts for H1 and H2

Home Forums Support [Resolved] Adjusting the Line Spacing in the Fonts for H1 and H2

Home Forums Support Adjusting the Line Spacing in the Fonts for H1 and H2

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1281444
    Mike

    Hello
    Is there a way to reduce the line spacing in the H1 and H2 headings? I wish to make it similar to my original site
    Thank you!

    #1281571
    Leo
    Staff
    Customer Support

    Hi there,

    Have you tried the options in Customizer > Typograph > Headings?

    #1281614
    Mike

    Yes, there’s no option to change the spacing between letters

    #1281621
    Leo
    Staff
    Customer Support

    Aren’t you looking to adjust the line-height option?

    Or you are looking to adjust the letter-spacing?
    https://www.w3schools.com/cssref/pr_text_letter-spacing.asp

    #1281633
    Mike

    thanks, letter-spacing

    #1281637
    Leo
    Staff
    Customer Support

    CSS is required for that.

    Try:

    h1 {
       letter-spacing : 2px
    }
    h2 {
       letter-spacing : 2px
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    #1281673
    Mike

    Thanks I used that code and didn’t seem to make a difference. I played around with the px number too

    #1281678
    Leo
    Staff
    Customer Support

    Can you edit the private URL field in the original topic to only include the GP site?

    Then guide me to the element you are referring to.

    #1281796
    Mike

    Thanks.
    Looking at the elements for:

    Explore Tokyo’s Most Popular Districts

    And
    Explore GeneratePress Catalyst

    Thanks!

    Looking to make the space even smaller, similar to my original non generate press site.

    #1281798
    Leo
    Staff
    Customer Support

    If you are referring to the headline in the page hero, then go to Additional CSS field in the customizer and edit these two blocks:

    .hero-headline {
        font-size: 34px;
        letter-spacing: 6px;
    }
    
    @media( max-width: 768px ) {
        .hero-headline {
            font-size: 27px;
            letter-spacing: 2px;
        }
    }

    The second block is for mobile only.

    #1281886
    Mike

    thank you!

    #1282853
    Leo
    Staff
    Customer Support

    No problem 🙂

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.