Change hard coded font ratios to variables

ux
1

Font sizes in Discourse css are expressed as em in relation to 14px. So, there are for example multiple rows in the css where font size is 1.143em, which translates to 16px. Personally, I find 14px quite small for most if not all fonts for body text.

The problem is, if you change the base font size all the other sizes no longer conform to nice round numbers. For 16px base font size 1.143em becomes 18.288px. So you have to go trough the css and change font size in dozens of places one by one anyway or risk bad font rendering on some systems. This makes changing the font size pretty painful.

There are only a handful of different font sizes used so mapping them to variables should be pretty straightforward and make changing font (sizes) much easier.

5 Likes
2

Can you expand on this issue with a screenshot or two?

cc @awesomerobot

3

Unfortunately not. This is pretty basic stuff for (Windows) font rendering in low resolution screens, but I don’t have such setup.

Here’s a list of the main font sizes, basically I suggest replacing these with variables named xxs-xxl or — +++ trough out the css.

0.714 //10px
0.857 //12px
0.929 //13px
1 //14px
1.071 //15px
1.143 //16px
1.214 //17px
1.286 //18px
1.5 //21px
1.571 //22px
1.643 //23px
1.714 //24px
1.786 //25px
2 // 28px

I left a couple out (if I remember correctly there are some nested rules) and the larger sizes obviously don’t suffer as much as the smaller.