Follow

In HTML/CSS, is there really no way to increase the font size (to a legible size) on phones or small devices only?

@cancel You can use media queries to do this, based on the device's height or width! :3

@somnius this also affects regular desktop web browsers...

@cancel @somnius I was going to say the same thing. only screen media queries?

@neauoire @somnius is there an example of one that will actually only cause the text to enlarge on small devices? i have already made the layout change and work correctly across sizes. i *don't* want the text to get jumbo clown sized if someone makes their browser window too narrow.

@cancel @somnius I don't know if that can be done with css alone, I mean, this sounds like you want to catch their browser name or device info, more than their screen ratios and orientation. I wouldn't do that in CSS alone.

@neauoire @somnius physical size. just like, "keep the text at least this large so that people can see it." this is a really basic feature yeah?

@cancel @somnius yeah then you don't want to know if it's a mobile or not, you just want to make something that responds to the screen size, use em units or something.

@neauoire @somnius the em units do nothing useful. they are virtualized to a 16 pixel font on the virtually-scaled phone screen.

@neauoire @somnius what does aspect ratio or screen virtual pixel dimensions have to do with text legibility?

@cancel @neauoire Uh, I mean, it refers to how big text will be on the intended screen!

Using em/rem units might actually help for you here, since they're related to the default text size set by the body element (for rem) or by the parent element (for em). If that doesn't work, there's also vh or vw units that you can look into! Those are related to the viewport height or width respectively, which is more closely related to device size.

@somnius @neauoire rem and em units in media queries specifically are always set to 16 pixel virtual font. you cannot affect em/rem within a media query (otherwise it would create a feedback loop in the css calculation)

@cancel @neauoire Not exactly. EM units change size based on the set parent element, whereas REM units will change size based on the size set by the font-size set on the HTML or BODY tag of a page! You can do some fancy stuff with this to change the font size on a webpage with these rules in mind. developer.mozilla.org/en-US/do

Unfortunately, however, I don't know of a way to set a maximum font size, which may be what you're looking for.

@somnius @neauoire that's incorrect for css media queries. em and rem are ALWAYS 16 pixel fonts in the query predicated of a css media query

@somnius @neauoire if you do @media (max-width: 40rem) or whatever, it doesn't matter what you set the font to for the body, html or :root element. it will always treat the 40rem as a 16-pixel virtual font

@cancel @neauoire Oh, hm, I think I see what you're getting at. That's not how I'd be using media queries! I'd always be using widths with pixel units for media queries and adjusting font sizes with em/rem units.

That way, I can adjust the base "body" font size based on the device pixel width (if I was using REMs) or I could adjust the font-size right on the parent based on the device's pixel width.

@cancel @neauoire Er, to be clear, the latter example was meant for if I was using EM units.

@somnius @neauoire i already specify only a single font size (on the root, in pts) and derive all other font sizes from it using rem/em.

i want to make that specified size a legible size on phones, instead of having it appear tiny. (specifying "9pt" still gives you a tiny font on phones, not 9 points...)

@somnius @neauoire that causes the text to become huge on regular desktop browsers if the window isn't sufficiently wide (usually annoyingly wide)

@cancel @neauoire Aside from what I've already said, you can use both device width and height with media queries if you're only targeting devices at a certain resolution, if that's what you're looking for!

@somnius @neauoire no. i'm not trying to adjust the font size based on screen aspect ratios. i want to make the text legible on small physical screens.

@somnius @neauoire can you show me a web page where the text is normal sized on both a desktop web browser and a phone? the text should not become comically large on the desktop web browser if the user resizes the window.

@cancel @somnius Any website? I have 2-3 websites open now that uses media query to scale their fonts based on the window size?

Here's one expo.io

Show more

@somnius @neauoire vw and vh cause the same "giant text" problem on desktop browsers. and they are not supported in too many places yet.

@cancel @somnius wait sorry I just re-read the original post. You're just trying to clamp the font-size so it doesn't got below a certain size?

@neauoire @somnius below whatever size is legible on the person's device. i just want to text to be readable on phones but also not clown-huge on desktops browsers.

@cancel @somnius I'm not sure what to tell you.. I guess I would still use media queries, they usually work very well to handle that.
codepen.io/dannievinther/pen/G

@neauoire @somnius this doesn't seem to work... it thinks i'm using internet explorer or something?

@cancel That's true—but I think that works out, in the end. If someone has a browser that they've only set to a quarter of their screen's width, making the website's typeface more legible or bigger somehow is completely usable.

@somnius no, that's the opposite of what should happen. if someone makes their desktop browser window tiny, making the font bigger is terrible. it's one of the reasons i hate the "modern" web. every god damn web page demands i keep the browser window huge in order to not have it switch to clown-sized text.

@cancel @somnius I don't know if they'd have a solution, but you could ask around over at social.csswg.org

Sign in to participate in the conversation
Merveilles

Revel in the marvels of the universe. We are a collective of forward-thinking individuals who strive to better ourselves and our surroundings through constant creation. We express ourselves through music, art, games, and writing. We also put great value in play. A warm welcome to any like-minded people who feel these ideals resonate with them. Check out our Patreon to see our donations.