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

Contribute Feature

AI-generated summary

The discussion revolves around creating “large fonts” and “small fonts” themes for Discourse. codinghorror initially proposes the idea, suggesting that these themes should be part of the user-selectable theming options. He offers a reward for anyone willing to help build and test the themes.

saquetim shares a possible implementation of the large font theme, and codinghorror suggests testing it thoroughly to ensure that it works correctly across the site. EducatorWaji offers to assist with building the themes, and clapmyhands suggests testing the themes on meta.

Mittineague creates a repository for the larger font theme, and sam explains that themes are more flexible than plugins and can be easily imported. However, codinghorror decides to defer the implementation until version 1.9, suggesting that it would be better to implement it as a mixin.

Later, sam proposes the idea of “user selectable theme components,” which would allow users to select from various theme components, including font size. Jimble expresses interest in the large font theme for accessibility reasons, and downey suggests that users could simply use their browser’s zoom feature.

sam and awesomerobot discuss the possibility of switching to a REM/EM-based font sizing system, which would make it easier to implement font size changes. codinghorror expresses some reservations about scaling all text equally, but awesomerobot suggests that it could be a mix of scalable and non-scalable elements.

The discussion concludes with david announcing that per-user font size selection is now part of Discourse, allowing users to customize their font size preferences.

1

As part of the most excellent user-selectable theming work @sam did, we need to ship four themes in Discourse 1.8:

  • Light … you’re probably looking at it right now
  • Dark … we built this a while ago and tested it a lot
  • Big Font :older_man: :older_woman:
  • Small Font :baby:

We’d like help with the Big Font and Small Font layouts:

  • should everything get bigger fonts? Or just certain areas of the page?
  • should the smaller font layout also push the post width out a little bit?
  • it must be tested in all the nooks and crannies of Discourse pages.

I can offer two $50 amazon gift certs (or paypal, if you don’t have amazon in your area) to anyone willing to assist with building and testing the small or large font themes, respectively. Pick one and run with it!

8 curtidas
Discourse Larger Font Theme
Cleaning up our font system
4

Any takers on this? I don’t think it’d be a lot of work.

1 curtida
5

Question
In addition to font-size, should font weight (bold) and contrast (color background-color) be considered too?

2 curtidas
6

No just overall UI font size on these. Though they should probably offer both dark and light variants.

1 curtida
7

it needs to be polished but are you thinking in something like this?

image.png1080×1896 190 KB

image.png1080×1896 291 KB

2 curtidas
8

It is a good start, I suggest eating your own dog food with large and small font themes – participate in replies and topics, visit all pages on the site and verify nothing is messed up or looks broken / weird, etc.

Actually @Mittineague do you mind if I tap you to do this work? We can negotiate an amount that is fair if $100 doesn’t cut it or it turns out to be a bigger project than anticipated?

1 curtida
9

So, I am in for assisting the team to build big font and small font themes.

10

I think we should be making every text larger with large theme. The users who choose the large font size is the ones who has either eye sight problem, or the ones who loves everything in big.

11

would it be too crazy if we apply it in meta/somewhere?

dogfooding it like what meta did with dark theme

12

Not a good idea anyway. Because, now meta plays as the front face of our discourse community

13

These are user-selectable themes so it would be worthwhile encouraging everyone here to try each theme for just one day. This removes the risk of upsetting new users or those who don’t want to participate.

This is the best user group to try it on because of all the UX designers, community managers, plug-in authors and other developers.

I’d respond to a request to help in this sort of way and use a few more features than I usually would. The overhead for each of us would be small but the bug-finding and opinions should be awesome.

8 curtidas
14

I just mucked around with this per:

html, .cooked {
    font-size: 18px;
    line-height: 22px;
}

.list-controls .category-breadcrumb a.badge-category.category-dropdown-button {
    
    margin-left: -5px;
}

.topic-list .badge-wrapper {
    font-size: 15px !important;
    line-height: 18px !important;
}

.topic-list .badge-wrapper.bullet .badge-category-bg {
    position: relative;
    top: 5px;
    font-size: 15px;
    line-height: 18px;
}

mobile:

image.png379×657 35.8 KB

image.png374×654 43.5 KB

desktop

image.png1180×934 63.9 KB

image.png1191×759 71.1 KB

It seems kind of OK

1 curtida
15

What do you think @Mittineague?

16

I ran into a road block (a victim of my own device) that looks to have been finally rectified. I am preparing to test my “1.2em” approach as soon as my dev install is finished rebuilding by entering the CSS into Customize

For whatever reason, I was thinking there was a way to pull in the CSS similar to how plugins can be added to app.yml so that they will appear in the UI and not need to be entered into Customize. I notice Sam’s files have .json and .scss files, but I’m sure I’m missing a crucial piece to the puzzle here somewhere.

2 curtidas
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.

1 curtida
18

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

EDIT
can be found here
https://github.com/Mittineague/discourse-larger-font-theme

3 curtidas
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.

5 curtidas
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
10 curtidas
21

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

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.

1 curtida