The discussion revolves around changing the global font size in Discourse. SMT changed the font to Proxima Nova but found the default font size too small. simon explained that font sizes in Discourse are set using the ‘em’ unit, which is relative to the base font size of 14px. Changing the base font size can affect other font sizes and margins.
To change the global font size, awesomerobot suggested setting the font size on the HTML tag:
html {
font-size: 16px;
}
Alternatively, you can increase the font size for a specific section by applying a font size to a parent container, such as:
.posts-wrapper {
font-size: 16px;
}
Additionally, codinghorror noted that users can control font size on a per-user basis through browser settings or by adjusting the Text Size in their Discourse user preferences.
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.
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;
}
Note that on a per-user basis you can control font size in the web browser via two methods:
You can adjust the font size in Discourse via your user preferences under the Text Size section. Defaults to Normal.
