How to set global font size in Discourse?

I changed the font of my forum to proxima nova. But now the default font size is very small. If I change by this way -

body {
    font-size: 16px;
}

The font size gets increased automatically for example - topic title font size sets to 23px and so on. Whats the problem?

For Discourse the font size is set at 14px on the html element. Most of the other fonts are sized using the β€˜em’ unit. For example the heading of this topic has a size of 1.8 em. To convert an em unit to px you multiply the em unit by the size of the current font (1.8 em * 14px). If you change the font size on the html element or the body element, that change will cascade throughout the application. It’s done that way on purpose. It does mean that if you change the base font size you might have to adjust font sizes and possibly some margins and padding in a few other places.

Maybe you can get away with changing the font size on .container.posts or .topic-body

.container.posts {font-size: 16px;}

That will affect less of the application.

3 Likes

I believe there is an easy way to change global font size in Discourse now @awesomerobot?

Right, all font sizes cascade from the 14px set on the HTML tag β€” so you can bump everything up proportionately by doing

html {
  font-size: 16px;
}  

or if you just want to increase the font size of a specific section, that still works too β€” just find a parent container and apply a font size there. For example, posts:

.posts-wrapper {
  font-size: 16px;
}
9 Likes

Note that on a per-user basis you can control font size in the web browser via two methods:

  1. browser zoom scaling (in Chrome, Zoom defaults to 100%)
  2. manual browser font size adjustment (in Chrome, Appearance β†’ Font Size which defaults to Medium)

You can adjust the font size in Discourse via your user preferences under the Text Size section. Defaults to Normal.

1 Like