We need a "large fonts" and "small fonts" theme to ship with Discourse

(Sam Saffron) #17

Themes are way more flexible than plugins, you simply check it in to GitHub and then anyone can import it. For the large font one we will seed an extra theme in the theme file.

(Mittineague) #18

Thanks, I didn’t think it would be that easy!
I’ll put up a repo now.

can be found here

(Jeff Atwood) #19

We are deferring this until 1.9 as @sam thinks it will work best as a mixin type of deal. I tend to agree, since having

  • dark, large font
  • dark, small font
  • blue, large font
  • blue, small font

… gets excessive pretty quick.

(Sam Saffron) #20

The idea here is to allow for “user selectable, theme components”

That way you can add a bunch of user selectable theme components, that are selectable in conjunction with any theme.

That way the user prefs page will show

select your theme
[ dark theme v] 

[ ] large font

(Joakim Bang Larsen) #21

Any news on this? I could use bigger text for some of my users that have accessibility issues regarding sight…

(Michael Downey) #22

Maybe I’m missing something. Why can’t users just take advantage of the zoom feature of their browser? Things seem to scale up fine in my simple test just now.

(Sam Saffron) #23

No news, user selectable theme components is probably going to land for next release.

(Joakim Bang Larsen) #24

Ok! Let me know if you need some real world scenario betatesting of the large font theme.
I have the perfect people to try it out. Experienced forum users with eyesight accessibility challenges.

(Drew Koch) #25

Oh cool thanks for this info

(Sam Saffron) #26

@awesomerobot we are going to want to revisit this at some point. I wonder, does it make sense to move to REM/EM based font sizing so making this theme becomes trivial?

Our px based styling makes getting a polished version of a large font theme a bit of a nightmare to say the least.

(Kris) #27

Agree 1000% — I think we’d do a REM based system, then you’d be able to change one variable and scale everything proportionately. I think this is something we can get accomplished in the nearish future.

(Jeff Atwood) #28

I am not 100% sure every single place text appears, should scale exactly the same?

There is also the legacy browser font size setting:

Mostly browsers use zoom these days which scales everything up, but there is the legacy font size selector, for what it’s worth…

(Kris) #29

I think it could probably be a mix. If someone wants to scale everything up proportionately and not think about it we can make it easy — but also having various controllable sub-sections is probably a good idea if I wanted to, for example, scale-up post text but leave admin text alone.

(Stephen Chung) #30

I think there are two font sizes we’re talking about here.

  1. General font size of entire site. Not necessary on desktop browsers since you can always zoom. Critical on mobile where you can’t scale by site. An rem based css will be perfect here.

  2. Font size of post texts vs ui elements. This should be relatively easier. Just a bunch of css overrides. I do this on my own sites.

In my experience it is #2 that is the prob, rarely #1 unless you have a strange mobile device. A lot of content site have a font size button the scale up content text size vs ui.

(Sam Saffron) #31

I think this is a great intro into rems/ems and pxs via @chriscoyier

The idea is that we get a much saner framework to work with as opposed to px everywhere that means you have to override px everywhere.

(Jeff Atwood) #32

I do :heart: me some @chriscoyier

(Stephen Chung) #33

But sizing the text relative to the module has the huge problem of having many different text sizes. Most of the time you don’t want different text sizes. You want to tweak the dimensions of the modules but keep text sizes consistent.

(Sam Saffron) #34

If we use EMs they are relative to the module (eg: post, header ) if we use REMs they are relative to root

Either way you fiddle with far less stuff to turn on big fonts.

(Sam Saffron) #35

Now that @awesomerobot finished the giant font size refactor this is super trivial.

html {
    font-size: 16px !important;

And fonts are large, you could probably even push it up to 17px.

Better theme settings on user front-end
Font size theme

That’s really ‘awesome’ guys, thanks!

Requested by my users recently and implemented in seconds: who can argue with that?!