Home Entrance Everyone Wiki Search Login Register

Welcome, Guest. Please login or register. - Thinking of joining the forum??
April 20, 2024 - @888.54 (what is this?)
Forum activity rating: Four Star Posts: 55/1k.beats Unread Topics | Unread Replies | Own Posts | Own Topics | Random Topic | Recent Posts
News: :ha: :pc: Hello Melonland! :pc: :happy:

+  MelonLand Forum
|-+  World Wild Web
| |-+  ✁ ∙ Web Crafting
| | |-+  ☔︎ ∙ I need Help!
| | | |-+  Is using EM instead of PX for font size better for different screens?


« previous next »
Pages: [1] Print
Author Topic: Is using EM instead of PX for font size better for different screens?  (Read 657 times)
LittleGr33nIMP
Casual Poster ⚓︎
*


"Yay for me, Luigi!" -Luigi


View Profile WWW

First 1000 Members!Joined 2022!
« on: February 05, 2023 @923.09 »

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. :ohdear:

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? :pc:

(Also if anyone's used this please let me know any good tips/tricks!)
Logged

Oh look it's some turtles with my butto-HEY WAIT GET BACK HERE!

🐢🐢 🐢🐢

luna
Casual Poster
*


૮( ˶ᵔ ᵕ ᵔ˶ )ა

iMood: oatmilk

View Profile

First 1000 Members!Joined 2023!
« Reply #1 on: February 05, 2023 @927.38 »

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

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?
Logged

:4u:
LittleGr33nIMP
Casual Poster ⚓︎
*


"Yay for me, Luigi!" -Luigi


View Profile WWW

First 1000 Members!Joined 2022!
« Reply #2 on: February 05, 2023 @980.44 »

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;
}

Logged

Oh look it's some turtles with my butto-HEY WAIT GET BACK HERE!

🐢🐢 🐢🐢

luna
Casual Poster
*


૮( ˶ᵔ ᵕ ᵔ˶ )ა

iMood: oatmilk

View Profile

First 1000 Members!Joined 2023!
« Reply #3 on: February 06, 2023 @24.02 »

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 :ha:
« Last Edit: February 06, 2023 @39.51 by luna » Logged

:4u:
LittleGr33nIMP
Casual Poster ⚓︎
*


"Yay for me, Luigi!" -Luigi


View Profile WWW

First 1000 Members!Joined 2022!
« Reply #4 on: February 06, 2023 @36.40 »

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*/
 }
}


Logged

Oh look it's some turtles with my butto-HEY WAIT GET BACK HERE!

🐢🐢 🐢🐢

luna
Casual Poster
*


૮( ˶ᵔ ᵕ ᵔ˶ )ა

iMood: oatmilk

View Profile

First 1000 Members!Joined 2023!
« Reply #5 on: February 06, 2023 @43.72 »

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:

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)
Logged

:4u:
glacial_pace
Casual Poster
*


View Profile

First 1000 Members!Joined 2023!
« Reply #6 on: February 06, 2023 @209.55 »

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
« Last Edit: February 06, 2023 @230.15 by glacial_pace » Logged
luna
Casual Poster
*


૮( ˶ᵔ ᵕ ᵔ˶ )ა

iMood: oatmilk

View Profile

First 1000 Members!Joined 2023!
« Reply #7 on: February 06, 2023 @342.31 »

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.

« Last Edit: February 06, 2023 @355.45 by luna » Logged

:4u:
TheFrugalGamer
Sr. Member ⚓︎
****


Itch.io: My Games

View Profile WWW

First 1000 Members!Pocket Icelogist!Joined 2022!
« Reply #8 on: February 06, 2023 @658.46 »

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.
Logged

Pages: [1] Print 
« previous next »
 

Vaguely similar topics! (3)

Website size

Started by RolyBoard ✁ ∙ Web Crafting

Replies: 59
Views: 5402
Last post March 30, 2024 @910.61
by Semper
[FONTS] Velvetyne Type Foundry

Started by NightdriftBoard ☆ ∙ Showcase & Links

Replies: 4
Views: 1709
Last post February 06, 2022 @939.16
by Obspogon
Custom Fonts

Started by dotmidiBoard ☔︎ ∙ I need Help!

Replies: 5
Views: 791
Last post January 21, 2023 @591.13
by Guest

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021, Simple Machines | Terms and Policies Forum Guide | Rules | RSS | WAP2


MelonLand Badges and Other Melon Sites!

MelonLand Project! Visit the MelonLand Forum! Support the Forum
Visit Melonking.Net! Visit the Gif Gallery! Pixel Sea TamaNOTchi