How to set Letter Spacing only applicable to the body text

  • Hello, I want to increase the letter spacing of the body text. I follow this order: Typography > Body > Letter Spacing and set 5px, when I hit the Publish button, it affects not only the letter spacing setting of the body text, but also on all other elements (e.g. Menu, Widgets).
    How can I make the effect applicable only to the body text?

    Thank you!

Viewing 11 replies - 1 through 11 (of 11 total)
  • Alvind

    (@alvindcaesar)

    Hi there,

    Are you referring to the content area, such as the section where your blog post content appears?

    If so, when adding new typography, choose the element under”Content” as the Target Element.

    Thread Starter bwo2024

    (@bwo2024)

    Hello,

    When I choose the element under “Content” as the Target Element, it shows only 2 options: Single Content Title (H1) and Archive Content Title (H2), I don’t think it works on my case.

    I want to keep the letter spacing of the post text bigger, without affecting other elements.

    Thanks.

    Alvind

    (@alvindcaesar)

    In that case, choose ‘Custom’ as the Target Element and add this CSS selector:
    .content-area p

    It will target the text with p tag within the content area.

    Thread Starter bwo2024

    (@bwo2024)

    Hi,
    I followed your instructions, and added CSS selector to Custom:
    .content-area p
    And set the Letter Spacing as 2px, but nothing happened.

    Then I added 2px to Body under the Target Element, all elements changed accordingly and not just the body text – just like before.

    I don’t know why this basic request cannot be configured simply under the Body’s Letter Spacing field as GeneratePress is such a highly-functional theme.

    Hi there,

    when you set the body typography. You’re are building the CSS typography styles for the HTML <body> tag.
    The very nature of CSS is that any element within that tag will inherit those styles.
    Unless you set different styles on specific elements. For example; setting the styles for the Primary Navigation or Headings will override the body styles.

    Or if you want to use the custom method that Alvind provided you can , but you need to be specific in what you want to style. For example if its only Paragraph text and its on all Posts, Pages and Archives then you can use this for your custom selector:

    body p

    • This reply was modified 3 months, 1 week ago by David.
    Thread Starter bwo2024

    (@bwo2024)

    okay, maybe put it this way, if I want to change the Letter Spacing of the body text (not that of Menu, Sidebars or Footers), what is the most straight forward way to do so?

    Thanks!

    Alvind

    (@alvindcaesar)

    Using the custom selector should work, so it’s unclear why it isn’t in your case.

    If you’re using the block editor, the simplest method is to add the letter spacing directly to the Paragraph block.

    https://cln.sh/0y2fZmFP

    Thread Starter bwo2024

    (@bwo2024)

    Hi,
    I redo this process – choose ‘Custom’ as the Target Element and add this CSS selector:
    .content-area p

    It works this time, only it has no effect on the post title.

    Anyway, it sort of fixes my issue now.

    But I thought it will be a bit easier if this could have been accomplished via Body>Letter Spacing.

    Thanks!

    Alvind

    (@alvindcaesar)

    For the post title, it uses H1 so you’ll need to go to Content > Heading 1 (H1) and set the letter spacing there.

    Thread Starter bwo2024

    (@bwo2024)

    okay, thanks!

    Alvind

    (@alvindcaesar)

    You’re welcome!

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