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?)
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;
}
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) (https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
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:
.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 :ha:
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:
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*/
}
}
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 :drat:
and with the html tag, it would look like this:
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)
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:
<!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
(https://i.imgur.com/YFVHagG.png)
will warrant this:
(https://i.imgur.com/uHjVwt9.png)
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