Is using EM instead of PX for font size better for different screens?

[LittleGr33nIMP]

So I'm working on my site and I sort of realized that screens bigger than 1920x1080 are going to have a hard time reading the text on the page, while smaller screens are going to have a hard time with the text since it might be too big and might even ruin the layout.

I was thinking about using EM instead of PX but found out the size is based off of the default font size of the computer/device. So there's a possibility of it being super inconsistent.

Is it worth doing?
(Also if anyone's used this please let me know any good tips/tricks!)

[luna]

it's great that you are thinking about these things! it's absolutely worth doing! 

check out this CSS tricks article about size units: Use `rem` for Global Sizing; Use `em` for Local Sizing | CSS-Tricks - CSS-Tricks

you might find that using rem values is actually closer to your vision here?

[LittleGr33nIMP]

Ok I took a look at it.
Do you guys think that setting it up like this will mess anything up? (Making the html font-size an EM then making everything else font size an REM?)

Code

html{
 /*font-size: 14px;*/
 font-size: 0.875em;
}

.links_sections_box_button_small {
 /*font-size: 16px;*/
 font-size: 1.1428571428571428rem;
 color: #33a658;
 background-color: #fff;
 border-radius: 10px;
 padding: 4px 8px;
 padding-left: 11px;
 border: 2px solid #a8d718;
 box-shadow: 0px 0px 0px 3px #33a658;
}

[luna]

i think it would be great to utilize what's called a media-query, if you are interested: Using media queries - CSS: Cascading Style Sheets | MDN (mozilla.org)

a media query would allow you to specify "for this screen size, do this"
and in your case, you could make text specifically bigger or whatever if a certain screen size is detected.

you had mentioned large screens. here is an example you could use to set text is bigger on large screens:

Code

.your-link-class {
 font-size: 1.14rem;
}

/* large screen */
@media screen and (min-width: 1280px) {
 .your-link-class {
  font-size: 1.5rem;
 }
}

that query means that anything over 1280px will get a larger font size

[LittleGr33nIMP]

Ah thank you for clarifying that.

I considered making the HTML font-size an EM because I thought "oh it'll scale to the default value of the person's PC! That'll help with accessibility" But honestly I do agree with just using PX instead. EM is kinda unpredictable so for all I know someone's going to end up not able to even look at my site because their default font-size is like 900px or some sh*t.

I'm probably going to stick to making HTML use PX for font-size since I know what the rest will reference off of.

Using media queries

IDK why but I did consider that, but then thought for some reason that it wouldn't work? Do you think that I could make a media query that changes the HTML font-size, based off of the size of the screen? Would that work without any problems? Dumb code EG:

Code

html {
 font-size: 14px;

 @media screen and (min-width: bigger than 1920px screens lol idk what the average sizes are for desktop screens) {
  font-size: 16px;
  /*or 18px idk*/
 }
}

[luna]

oh my bad, i think i wrote that last code snippet in a scss format, not css. i just edited it with the correct syntax 

and with the html tag, it would look like this:

Code

html {
 font-size: 14px;
}

@media screen and (min-width: 1920px) {
 html {
  font-size: 16px;
 }
}

but yeah you've got the right idea here. this should achieve what you want with font-size. (also, 1920px is good to use. it's the standard "HD" size and a good baseline for large screens, but it's also totally okay to experiment with these values and see what looks best for your site)

[glacial_pace]

i think it would be better to set a pixel value on your html tag. this would be the baseline from which all of your other font-sizes come from. and then on different elements (such as your link), you set the rem value you used, to indicate that the new font-size is based off the size you set on the html. over 1 rem is scaling up, starting at the pixel size you set. IMO this is also easier to read because you can see the starting place (the pixel font-size on the html tag) and understand the effect further down on your links (with the rem value).

i don't think this is necessarily good advice. browsers have settings built-in to make text bigger and if you're setting a pixel size on a parent-most element, and using em based on that, the text won't scale if the user needs it to be bigger

this code for example:

Code

<!DOCTYPE html>
<html lang="en">
<body>
  <p style="font-size: 1.2em">hello world</p>
  <div style="font-size: 16px;">
    <p style="font-size: 1.2em">hello world</p>
  </div>
</body>
</html>

using this setting to turn the text bigger in google chrome



will warrant this:



so you can see even though i made the font-size bigger on my browser, the text on the site didn't change for the first element, which stinks if i _need_ the text to be bigger. and the main issue here is the font-size on the second set of text is going to be the same regardless of if i make the browser setting "extra small" or "extra large."

my advice would be to pick one - rem or em and use them across the board consistently, but yeah absolutely make sure to respect the browser setting for people who need it

[luna]

i split my answer into 2 parts: 1. using units, and 2. using media queries.
the question was about different font sizes for different screen sizes.

on my own site, i use a percentage on the root:
font-size: 65%

and then rems throughout the page, with some media queries for small screens.

with regards to text scaling at the browser level:
browser zoom settings will help a lot for situations where someone needs to view text in a larger size.
edit: but it is also nice to respect the browser's text scaling. i will delete my other answer.

[TheFrugalGamer]

with regards to text scaling at the browser level:
browser zoom settings will help a lot for situations where someone needs to view text in a larger size.
edit: but it is also nice to respect the browser's text scaling. i will delete my other answer.

Re:browser scaling, it seems that the scaling options aren't as popular as I feel they should be. I'm a big fan of zooming in, especially on sites that aren't really built for mobile, but before I built a mobile version of my site, I got a lot of complaints about how everything was so small. I figured most people just didn't really like the zooming options, so I changed and got a mobile version going.

Personally, I would have preferred the desktop version with zooming capability, but since most don't like that I'd rather go with what makes it easy for the majority.