# Discourse Larger Font Theme

**URL:** https://meta.discourse.org/t/discourse-larger-font-theme/62083
**Category:** Feature
**Created:** [May 4, 2017, 12:38am UTC](https://meta.discourse.org/t/discourse-larger-font-theme/62083 "2017-05-04T00:38:13Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [May 4, 2017, 12:38am UTC](https://meta.discourse.org/t/discourse-larger-font-theme/62083/1 "2017-05-04T00:38:13Z")

</div>

Continuing the discussion from [We need a "large fonts" and "small fonts" theme to ship with Discourse](https://meta.discourse.org/t/we-need-a-large-fonts-and-small-fonts-theme-to-ship-with-discourse/60879):

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>

---

<div class="post-metadata">

### Author: ![riking](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/riking/32/170938_2.png) [@riking](https://meta.discourse.org/u/riking)
#### Post date: [May 4, 2017, 6:13am UTC](https://meta.discourse.org/t/discourse-larger-font-theme/62083/2 "2017-05-04T06:13:15Z")

</div>

> [@Mittineague](#):
>
> I have a personal dislike of using pixels for font size and therefore am using em units

The problem with em units is that they stack.

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

```

---

<div class="post-metadata">

### Author: ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [May 4, 2017, 6:47am UTC](https://meta.discourse.org/t/discourse-larger-font-theme/62083/3 "2017-05-04T06:47:09Z")

</div>

> [@riking](#):
>
> The problem with em units is that they stack.

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 property - CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size?v=control)

> 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

> **[Can I use... Support tables for HTML5, CSS3, etc](https://caniuse.com/#feat=rem)**
>
> "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [July 25, 2017, 1:24pm UTC](https://meta.discourse.org/t/discourse-larger-font-theme/62083/4 "2017-07-25T13:24:42Z")

</div>

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

---

<div class="post-metadata">

### Author: ![SidV](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sidv/32/119460_2.png) [@SidV](https://meta.discourse.org/u/SidV)
#### Post date: [February 2, 2018, 12:39pm UTC](https://meta.discourse.org/t/discourse-larger-font-theme/62083/5 "2018-02-02T12:39:02Z")

</div>

@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!

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [February 2, 2018, 12:44pm UTC](https://meta.discourse.org/t/discourse-larger-font-theme/62083/6 "2018-02-02T12:44:35Z")

</div>

@SidV

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

> [@Cleaning up our font system](https://meta.discourse.org/t/cleaning-up-our-font-system/75396/11):
>
> As a proof of concept, I created a “large fonts” theme available in the hamburger menu here on Meta. This theme consists of a single line of CSS: html {font-size: 16px !important;} (our default is 14px). You’ll see some small issues with margins in the header/nav (which should be easy to overcome in a full theme with a few additional lines of CSS), but overall scaling fonts should now be significantly easier.

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

---

<div class="post-metadata">

### Author: ![SidV](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sidv/32/119460_2.png) [@SidV](https://meta.discourse.org/u/SidV)
#### Post date: [February 2, 2018, 12:59pm UTC](https://meta.discourse.org/t/discourse-larger-font-theme/62083/7 "2018-02-02T12:59:25Z")

</div>

> [@lll](#):
>
> So you can create a child-theme and only increase the html font-size and the rest is pretty much automatic.

Oh, I see…

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

---

<div class="post-metadata">

### Author: ![erlend\_sh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/erlend_sh/32/119475_2.png) [@erlend\_sh](https://meta.discourse.org/u/erlend_sh)
#### Post date: [February 2, 2018, 1:40pm UTC](https://meta.discourse.org/t/discourse-larger-font-theme/62083/8 "2018-02-02T13:40:34Z")

</div>

You might be better off waiting for this change:

> [@Better theme settings on user front-end](https://meta.discourse.org/t/better-theme-settings-on-user-front-end/78477):
>
> Continuing the discussion from [We need a "large fonts" and "small fonts" theme to ship with Discourse](https://meta.discourse.org/t/we-need-a-large-fonts-and-small-fonts-theme-to-ship-with-discourse/60879/35): Our themes now support dark/light/{any-color-scheme} toggles as well as variable font sizes tada But user interface for changing these settings is currently very basic: [11] We should have something closer to this (from GitBook): [53] I don’t have access to my usual image editor so here’s a cruder mockup than usual: [untitled1]

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [January 14, 2019, 6:59pm UTC](https://meta.discourse.org/t/discourse-larger-font-theme/62083/9 "2019-01-14T18:59:54Z")

</div>

> [@We need a "large fonts" and "small fonts" theme to ship with Discourse](https://meta.discourse.org/t/we-need-a-large-fonts-and-small-fonts-theme-to-ship-with-discourse/60879/37):
>
> Per-user font size selection is now part of Discourse. You’ll find the setting under your interface preferences.
