Discourse Larger Font Theme

Continuing the discussion from We need a "large fonts" and "small fonts" theme to ship with Discourse:

Discourse CSS, is perhaps not as simple as it might be.
SCSS gets compiled into CSS which IMHO is a good thing that helps to reduce redundant declarations.
This Theme deals specifically and solely with CSS intended to increase font size.
One complicating factor is that existing font-size declarations have different length units. Some are pixels, others percentage and others em.
I have a personal dislike of using pixels for font size and therefore am using em units
A problem with calculated values is that they are based on parent elements. i.e. the Cascading of CSS. Thus a change in one place can affect the display of other content, at times, less than ideally.
Another concern with CSS is specificty, selectors may be eg. elements, classes, ids, etc. Higher specificity selectors “win out” over lower specificity selectors.
I have a personal dislike of using !important and have avoided using it to override higher specificity selectors

The Theme CSS so far uses only the arbitrary declaration
font-size: 1.2em;
My thought being that a 20% increase over the normal font-size would meet vision related accessibility guidelines.

I will be exploring the “nooks and crannies” of Discourse in hopes of finding anything I may have missed, but I welcome comments and any “heads up” from others regarding the Theme which can be found at

https://github.com/Mittineague/discourse-larger-font-theme/blob/master/desktop/desktop.scss

6 Likes

The problem with em units is that they stack.

<style>div { font-size: 1.2em; }</style>
<div><div><div>This text is much larger than its surroundings
1 Like

That’s what I meant by “based on parent elements” and “cascade”, but I do think “stack” describes the problem with using them better.

Don’t think I’m totally against using pixel units. It’s just that I prefer to use them for things like thin borders. Most other uses they always seem more like “magic numbers”, i.e. they look good when seen under the same circumstances under which they were designed, but they don’t always hold up so well depending on browser settings.

Hmmm. I think rem units (they don’t stack) might be a better choice. Called “compounding” here

font-size - CSS: Cascading Style Sheets | MDN

Rems
rem values were invented in order to sidestep the compounding problem. rem values are relative to the root html element, not the parent element. In other words, it lets you specify a font size in a relative fashion without being affected by the size of the parent, thereby eliminating compounding.

Good support, but some known issues

3 Likes

Do you mind converting this to a theme component so we can ship this to the #plugin:theme category?

4 Likes

@sam, sorry for this dump, I see that here on meta we’ve got a “large fonts” theme, can you please upload that theme to your github so other users can use it? Is it possible?

Thanks!

@SidV

As far as I know, the theme was created to demonstrate the cleaned up font system

So you can create a child-theme and only increase the html font-size and the rest is pretty much automatic.

1 Like

Oh, I see…

But… :thinking: noobs like me that only know to import themes could need that “theme” :pray:
The same theme that everyone could use and see here on meta.
That would be awesome :rocket:

You might be better off waiting for this change:

5 Likes