How to change paragraph font size?

AI-generated summary

Changing Paragraph Font Size in Discourse

The discussion revolves around changing the font size for paragraph text in Discourse. John_Smith3 asks for a way to globally increase the font size, and Stranik provides a CSS code snippet to achieve this. However, codinghorror and sam mention that a built-in font size theme element is in the works, but not yet available.

awesomerobot suggests increasing the font size for all text or specific sections of the UI using CSS code. They also advise against only increasing paragraph text, as it may disrupt the emphasis and hierarchy of the text.

Mittineague points out that a similar feature already exists as a member option, and codinghorror clarifies that a font enlarging “mixin” or “theme component” is needed, which users can opt into in their preferences.

John_Smith3 finds a solution by increasing the font size across the board, and pfaffman reminds that users with bad eyesight can also use the browser’s zoom feature (Ctrl + +) to enlarge fonts.

The discussion concludes with david sharing a link to a meta discussion about adding a large fonts and small fonts theme to Discourse.

Is there an easy way to globally change the font size for paragraph text?

Thanks!

If I understand correctly and you mean it:

.cooked {
    font-size: 1.3em;
}

Or

.topic-body .contents .cooked {
    font-size: 1.3em;
}

Thanks so much for the quick response - I’m new to Discourse and am really impressed with the community.

I’m hoping to enlarge all paragraph text on my site because it’s too small to read for those with bad eyesight. Will the fix you sent do that, and if so, where do I add that code?

Thanks!

I think this guide should help you.

There might be a better more general place to adjust font size @awesomerobot?

I hope so. It seems like something that would be in a settings menu.

Well we keep talking about shipping built in font size theme elements but I am not sure what is taking so long, where are we on this @sam?

A lot of our internals support user selectable theme components now, but there are some finishing touches left @Osama did not have time to get to, @xrav3nz will be picking up on this in a couple of weeks.

People with bad eyesight need to know how to type control - + to enlarge the fonts on every site they visit. And given that they know that, they’ll likely be annoyed when they visit your site because the font will be too big.

Right, agreed, but it can also be a user preference on the specific website as well. Furthermore that would increase all fonts on the website, not just the body text font. You can control it a bit more surgically via theme components that users opt into.

The easiest way to do this is to bump up all text, or specific sections of the UI (posts for example).

html { // all text in Discourse
    font-size: 15px; // default is 14px
}
.container.posts,
.d-editor-container {
   font-size: 15px; // increase text in posts and the post composer by 1 font size
}

There’s no general concept to increase only text that’s currently 14px to 15px (you could do it, but it’s a lot of hand-picking individual elements to style). Generally it’s not the best idea to only increase paragraph text because suddenly the paragraph text might be larger than some header text, which kind of messes up the emphasis/hierarchy.

Doesn’t this more or less already exist as a member option?

Thanks so much! This worked perfectly. 18 across the board is what I was looking for. It just bumped everything to give it a more chunky, clicky feel.

I see your point, however, our problem is the “People with bad eyesight need to know…” and I’m afraid our users don’t. We’ll keep an eye on that though, and thanks for the heads up.

No, that overrides the entire theme, which is not what you want. You want a font enlarging “mixin” or “theme component” that users can opt into in their preferences.

Lucky that accessing your site is the only reason they’ll be using the internet. :wink:

That seems like an inappropriate joke for your sight-impaired users. :slight_smile: