Increasing the font size


(Daniel Hollands) #1

I’ve switched the main font on my Discouse forum to that of PT Sans (which I love). The problem with it is, it appears to display slightly smaller than your default font, which has lead to some people asking for me to increase the font size on the forum.

I know this should be a simple CSS fix, but I’ve not quite been able to work out what selector (or selectors) to update to set a larger font size, without a lot of fuss.

What’s the cleanest way of knocking the font size up a couple of pixels?

Cheers.


(Jeff Atwood) #2

Any tips on this @awesomerobot? Have heard the request before.


(Zane Beckman) #3

I’ve seen something similar to this done with super hacky css.

/* Change anything of font size 17px to font size 12px */
*[style*="font-size: 17px"] {
      font-size: 12px !important;
}

(Trevor Williams) #4

I wouldn’t recommend doing those type of CSS hacks under any circumstances. There is a different way to accomplish this. I’m sure @awesomerobot has some ideas other than this one here.


(Kris) #5

Right now there’s not really a great way to do it without targeting individual elements.

Hitting the HTML tag like this will cover a lot of elements, but not everything.

html {
  font: 16px/20px 'PT Sans', Arial, sans-serif;
}

Adjusting font-size universally doesn’t seem like a huge ask. I can likely put font sizes into variables and we can work that into the admin. I’ll put figuring that out on my to-dos.


(Daniel Hollands) #6

Thank you @awesomerobot, I’ve added this to my CSS, and it seems to have increased the font size in the most important place (post content) but nowhere else (from what I can tell - which is fine for now :smile:).

If the ability to control font size was added to the admin, I think that would be a huge bonus :smile:


(Dima Starodubcev) #7

Request for the ability co change font size from the admin, or as simple css property.
For instance

body {
    font-size: 20px;
}

And other font would scale based on em’s…


(Kris) #8

Definitely makes sense. I’ll try to put in some time this weekend to tackle this one.


(Kris) #9

Just submitted a PR here:

https://github.com/discourse/discourse/pull/3044

now if a font size is set it will scale all children relative to the parent container - so:

html {font-size: 20px} //scales all fonts

.posts {font-size: 20px} //scales only fonts within .posts

(Jeff Atwood) #10

Did you mean to increase font size on topic lists? Seems noticeably bigger to me?


(Kris) #11

Hmm, it’s looking the same as it was to me - might want to roll back; need to test on more screens.


(Jeff Atwood) #12

Before

After


(Kane York) #13

I also see the topic favorite star and edit button as way too big.


(Jeff Atwood) #14

Hmm well, let’s try the larger topic title size out, why not?

I think I am starting to … kind of like it actually. Topic title is important, maybe it should have more weight (a larger font size) on each line of the topic lists. We certainly have the room now.

edit: I made tweaks to fix the star and the edit pencil. If anyone notices other oddball things, post them here. Excited to have an easier way to scale the fonts globally in CSS @awesomerobot!


(Kris) #15

ok - realized this morning that I should have set a static size on html as the baseline, otherwise if a browser has a different default font-size it would scale differently. This makes everything consistent across browsers.

https://github.com/discourse/discourse/pull/3047


(Gerhard Schlager) #16

IMHO the edit pencil is still too large:

Same goes for the lock symbol:


#17

What class do I need to call to change the color of the list font?


(Jeff Atwood) #18

General strategy is to right click the element and select “inspect” then look at the class.

When I do that I get

<a href="/t/website-performance-reports/30473/123" 
class="title visited">Website performance reports</a>

So perhaps CSS class title on HTML element a aka

a.title { text-decoration: blink; }

(xiasummer) #19

I found this CSS is not enough for the space between the upper and the lower lines are not changed at the same time. So some times the words are clasped by each other.


(Daniela) #20

If you change font-size, you should also increase the line-height: 19px; (default), e.g. line-height: 25px;