Archived topic
Feature Request - Letter Spacing Controls for Typography in the Customizer
7 replies · Started by Richard on April 2, 2021
I would so appreciate the ability to control the default letter spacing for text in the customizer (a-la OceanWP).
Here is one use case example. I like both the Karla and Oxygen fonts which are incredibly similar in nature. However, they each have different flaws that I find a bit bothersome:
- Karla uses the lowercase "g" that does not look like it is handwritten. You can see it here: https://fonts.google.com/specimen/Karla
- Oxygen, I feel, does not have quite enough spacing between the letters which makes it a bit difficult to read without making the font too large.
If I could change the letter spacing of fonts by fractions of a pixel visually by using a slider in the customizer, I could then use Oxygen and choose a font size and spacing that would more closely approximate the letter spacing that Karla uses without the funny looking lowercase "g" that Karla uses. This would make the text a bit easier to read and add just a little bit more space allowing the overall appearance of text on the pages to "breath" a bit better - without having to just make the font simply too large as is currently the case.
Thanks for considering this.
Hi Richard,
We have plans to rewrite the entire typography module and believe a letter-spacing option is planned for sure.
Let me know if you need help with the CSS in the mean time.
Thanks for your patience :)
I don't much know what I am doing with CSS and having a way to specify font spacing for the body via CSS would be helpful - either by pixel or percentage.
I guess if it were possible to specify font spacing globally for all places where "paragraph" is specified, including the element type of "paragraph" in a GenerateBlocks Headline Block, that might add a bit more flexibility.
Thank you.
Any chance you can link us to the site in question to take a quick look?
You can use the private information field.
Let me know :)
Hi Leo,
See below for site address and credentials. This is a site I imported from one of the examples in the GP site library that I will be modifying to create a "template" of sorts that I can use for other sites.
This is a clean import with no real changes other than:
- A few WordPress settings
- I moved into a child theme the CSS code that was imported into the custom CSS section of the GeneratePress theme during the site import process.
I also have the "Dynamic CSS Print Method" set to "external file" if that matters.
My point being in the above information is that it is no big deal if something gets borked in the process. ;-)
Hi Richard,
Try this CSS, feel free to adjust the number:
p {
letter-spacing: 0.03em;
}Adding CSS: https://docs.generatepress.com/article/adding-css/
That worked.
FYI, it did not work when adding to the CSS area in the customizer in the child theme. It did, however, work when using the "Simple CSS" plugin.
Thank you!
You are welcome, but it should've worked either way :)
