8 ms·

A formula for responsive font-size

165 points by jamesfisher 3y ago

mleonhard 3y ago
No! If you mess with the font size, you make your page hard to read for people who adjust their font size in their browser. They set their font size very carefully, to the smallest size they can comfortably read. Your site had better not change that. Medium.com is the worst offender. Their font size is small and they disable zooming on mobile!
- stefanfisk 3y ago
  This method uses the root font size as the base and therefore scales with the user's custom setting.
  - deleted 3y ago
    [deleted]
  - Karellen 3y ago
    The point of the user's custom setting is that you don't need to scale with it. The user's custom setting is the font size they want! That's why they set it. If the user wants a different root font size, they'll set it themselves.
    - bryanrasmussen 3y ago
      font size needs to scale because font size can also affect contrast, unless the user is setting custom font size per site it will not be adequate for the user to set the custom font size for all potential situations.
    - p_l 3y ago
      Unfortunately, while making a site, I can't query for "does the user set special preferences" in CSS. I use somewhat similar formula in one project to create a common baseline font size that 1) does not break with viewport size changes 2) remain legible for baseline user 3) gives good base value to scale UI elements by rem/em units. Of course it's also a project where the user does not have a chance to mess with font size anyway for the main user, but I'd reuse the formula elsewhere. Wish I could query the browser if the user has specific preferences, just like with "Dark mode"
      - persnickety 3y ago
        You don't query for it; you don't override. Either the setting is custom and desired, or it's default and it hasn't been adjusted because it's fine.
        p_l 3y ago
        My personal experience is that the default is usually wrong, especially when I move between different displays. I end manually zooming in/zooming out a lot. Meanwhile using the default size + CSS keyword size modifiers (large/x-large etc.) ended up on breaking on the project I mentioned, especially after for all practical purposes we had to deal with the fact that claims of single display size & resolution to target weren't actually delivered, and when client also asked about possibly opening the interface from portable devices.
        persnickety 3y ago
        Sadly, I agree that browsers have forgotten what defaults are for. Instead of prvoiding something useable for the user, default CSS has turned into a nearly completely abstract set of values of relevance only to developers. But that situation should be fixed on the side of the Web browsers, not every website's author.
        account42 3y ago
        > My personal experience is that the default is usually wrong, especially when I move between different displays. I end manually zooming in/zooming out a lot. Then fix your setup. Campaing for better browser defaults. Do whatever it takes, but don't add hacks with hardcoded (=faulty) assumptions to your websites.
        mcherm 3y ago
        OR, the setting is default and it hasn't been adjusted because the user doesn't have the faintest idea how to adjust font sizes. Which I suspect is the case for the majority of end users.
        3y ago
    - tiagod 3y ago
      The vast majority of users don't know how to adjust the font-size.
      - Karellen 3y ago
        Is that just because they've never tried to figure out how, because the default font size works fine for them? In which case, the answer is still not to change it.
    - jrwoodruff 3y ago
      If every site used the same font, maybe. But different font faces vary in readability at the same size. Also, we still have to set sizes for things like titles, subtitles and other elements to create a hierarchy on the page. 'Don't resize my fonts' is such a narrow view of whole range of design considerations.
- sitharus 3y ago
  If only CSS supplied some sensible keywords based on the user's preferences, so you could just ask for say a medium, large, or x-large font. Of course CSS actually does. I've found using font size keyword and rem units can make a UI that scales with user preferences quite possible. Not _easy_ of course, but possible.
- CGamesPlay 3y ago
  Full-page zoom won already. Browsers all make it very difficult to even scale the font size without zooming the page (Firefox is the easiest, with the setting buried in a submenu as a toggle). And frankly, scaling just the fonts but leaving the rest of the layout is a bad experience: scaling just the font size often breaks the layout, particularly around interactive controls like buttons and tabs. There are two good paths to accessibility here: full-page zoom, and reader mode.
- oneeyedpigeon 3y ago
  Actually, Medium—the app, at least—does have an option under "Display settings" that lets you switch between two font sizes that are almost imperceptibly different...
- jskherman 3y ago
  Laughs in pinch to zoom which works for zooming into images as well. I just really hate those websites that disable this and the regular zoom.
  - account42 3y ago
    I actually liked it more when browser zoom affected only the font size and images were left 1:1 - for a normal Desktop usage anyway.
    - bee_rider 3y ago
      Browsers should definitely support both, they are very different features.
    - bobbylarrybobby 3y ago
      I know that Safari has two zoom modes, one which zooms the whole page and one which zooms just the text, leaving everything else intact.
- tobr 3y ago
  I would expect two large groups of user behavior: 1. People who never adjust font size. 2. People who regularly adjust font size as needed. The first group is helped by a reasonable responsive font size. The second group isn't hindered by it. Is there really a significant group of people who carefully set their preset font size, but then do not adjust it as needed when they visit a page? It seems unlikely to me. Even if all webpages used your defaults, there’s still no one-size-fits-all preset to pick, since typeface, weight, layout, leading, colors and many other things also impact readability. The tool to take control of all of that is reader mode, which is a great option when a website has screwed up its typography.
  - navane 3y ago
    I set the text size on my mobile browser. You'll understand as you get older and your devices keep getting more pixels.
    - tobr 3y ago
      I do too, and I’m in group #2. Are you saying you’re not?
      - navane 3y ago
        No, I set it one for each device, then I never touch it again. So I'm am the third group that you doubt exists. I don't want to fiddle with it. I read text on my phone, I have a preferred size to read, I shouldn't have to change it more than once. The few sites which end up too big or too small I read begrudgingly. Can I even set font size per site? Pinch zoom doesn't work because now I have to pan left and right for each sentence? I'm totally with Karellen on this.
        skribanto 3y ago
        At least in safari, you can hit the AA button and increase the font size there.
  - account42 3y ago
- tiagod 3y ago
  For me, HN is one of the hardest to read on default zoom.
  - andy_ppp 3y ago
    It's a real shame the site is never improved due to the captive market and lack of need to make things better. I am constantly downvoting on mobile when I mean to be upvoting for example, surely they could just make the clickable area bigger.
    - yccs27 3y ago
      I also sometimes wish this site got an overhaul, but then I look at the new Reddit layout and feel glad HN hasn't changed like that.
      - andy_ppp 3y ago
        Yes completely, I can't understand why Reddit hate their users so much, I find the site totally unusable and I often just leave immediately if I visit it!
      - Solvency 3y ago
        That's the most slippery slope argument possible. "Whoa can't refine the hit state on two arrows by a few pixels! The whole site might become anew Reddit!"
        dspillett 3y ago
        I think the argument is more “if I had to choose between the two extremes, I'd definitely prefer this one” than the slippery slope of “I don't want change because change might lead to abomination”.
    - DHPersonal 3y ago
      I use a Safari extension to add my own CSS and edited a Stylish package that already existed to update the design a bit. On iOS and iPadOS I use Hack. https://apps.apple.com/us/app/hack-for-hacker-news-reader/id1464477788 https://apps.apple.com/us/app/hack-for-hacker-news-reader/id...
- RespectYourself 3y ago
  [dead]
chapterjason 3y ago
I use rfs for that. https://github.com/twbs/rfs https://github.com/twbs/rfs
youngtaff 3y ago
Really need to adjust more than just the font size, line height, grid spacing etc all need adjusting too https://utopia.fyi/ https://utopia.fyi/ is good for these calculations
- andrei_says_ 3y ago
  I also came here to recommend Utopia.fyi. An incredible solution done right. Use it on all my projects - for don’t size, typographic scale, and spacing.
  - zelphirkalt 3y ago
    Funny typo. For a moment I thought the link would be about how not to size things on websites.
    - andrei_says_ 3y ago
      Yes, I noticed the autocorrect but it was too late. Thought the context was sufficient to expose it as a typo. “…for font size, typographic scale, and spacing.”
- deleted 3y ago
  [deleted]
- qingcharles 3y ago
  I used Utopia as the baseline for my sites; though I hadn't previously encountered people who had force-changed their font-size per site.
ceving 3y ago
Silly idea! A font size must depend on the vision of the reader.
- jraph 3y ago
  That's what the CSS Vision Impairment Module is for, which can query the user's medical record to adjust the font size and colors :-)
  - account42 3y ago
    Funny how the first browsers already implemented this (before the rest of CSS) by having a default font size.
xz18r 3y ago
Ironically, the font is too large for the table to fit on the screen, introducing horizontal scroll on this mobile page which I’m sure isn’t best practice. (I’m viewing this page on an iPhone 15)
- zelphirkalt 3y ago
  That in itself might mean, that a table is not the right way in this case.
  - planede 3y ago
    I think a table can be alright, there is only so much you can do. It could be fine tuned though to only require horizontal scrolling on the table and not the whole web page. Maybe anchor the first row and column if you want to be fancy.
lifthrasiir 3y ago
Please, please please have reasonable bounds around that if you do want to use a responsive font-size. `clamp(10px, 1rem + 0.25vw, 60px)` (say) doesn't harm anyone else.
- runxel 3y ago
  There are some worst offenders who chose the fontsize based on the size of the viewports... and it get's ludicrous big at my work, where I have an ultra wide curved monitor. Everybody please clamp!
  - WorldMaker 3y ago
    It's definitely a fascinating game to try websites Full Screen on an ultra wide. I definitely tend to stick to FancyZones for most browser windows to get "normal" breakpoints, but every now and then it's fun to play with sites and see which ones tested extremes in responsiveness. I get a lot of flak that my blog [0] scrolls horizontally by default when JS is enabled, because that is intentionally weird, but it's one of the only websites I know of that is "readable like a newspaper" when full screen on an ultra-wide monitor. Some posts you can read the entire article at full screen on an ultra-wide with no scrolling at all. I'm proud of that and I like that for my own enjoyment, even if few others appreciate it. [0] https://blog.worldmaker.net https://blog.worldmaker.net
Cloudef 3y ago
Isn't the whole point of em that you don't have to do this?
- stefanfisk 3y ago
  how would one use em to implement something like this?
  - Cloudef 3y ago
    1em is your base text size (what your content should use), >1, <1 when you want larger or smaller text, point being you don't dynamically adjust and break the users font size configuration. For example comparison with the OP's site: - dynamic on : https://files.catbox.moe/qwa2az.png https://files.catbox.moe/qwa2az.png - dynamic off: https://files.catbox.moe/glu3ud.png https://files.catbox.moe/glu3ud.png
    - stefanfisk 3y ago
      Don’t you mean rem? If you use em like that you have to make sure that you don’t multiply your font size more than once when nesting elements.
      - dao- 3y ago
        Except that's exactly what you want e.g. when you want something to stand out relative to its context. For instance, you want your headings to be 150% the size of surrounding text, so when you have an info box with smaller text and a heading, that heading should not end up as tall as your main text headings. Of course you could also have distinct heading classes or equivalent selectors for different contexts, and specify every case in rem, if that's how you like your stylesheets.
Ennea 3y ago
This is going to make text very large whenever somebody with an ultrawide monitor decides to maximize their browser window.
- jotaen 3y ago
  Although not exactly ultra-wide, on my 27" screen, the font-size with maximised window (2500px horizontally) would compute to ~22px for the submitted website. While that’s noticeable bigger compared to a narrow view port, I’m not sure that would qualify as “very large”. To me, it looks alright. The main container’s width on their website also doesn’t scale infinitely, so on a very wide screen you’d have a lot of blank space on both sides. That being said, it might still be reasonable to set a break point (or use CSS clamps) and prevent further font-size growth beyond a certain point.
- alkonaut 3y ago
  Yes how is the viewport size really relevant? A sensible site would have a max column width for any paragraph. So if I have a 4000px wide viewport and view a 500px wide column of text, it has to be the same size as the 500px column of text also if the browser window is just 1000px?
manbitesdog 3y ago
The point of having font size jumps is to only test screen dimensions right before and after the jump, to check for overflow or excessively large containers. But with a linear scaling this checking requires looking at all resolutions
uj8efdjkfdshf 3y ago
Huh, interesting. I've been using a clamped version of 1.5vw + 1vh for landscape and 1vw + 1vh for portrait, and then scaling everything else by rem for consistency. Might give this a try though.
- bryanrasmussen 3y ago
  do you have any clamping suggestions for overflowing/wrapping text in buttons etc.? I ask just because not very many people seem to clamp yet, so looking for experiences.
bkyan 3y ago
Is there a way to do a curved function instead of a linear function?
chrismorgan 3y ago
My strong recommendation is to stick to 1 browser em (~16px) on mobile-sized displays, and not to exceed 1.25 browser ems (~20px) on large displays. The formula provided in this article starts you at around ~17px, and exceeds ~20px on viewports wider than 1600px (quite common). That is: it’s too big. I’d suggest instead something like ~16px at 360px viewport width, and ~20px at 1600px viewport width, and clamping at these values. Slightly different curve, and capped a little more sensibly, in my opinion. (Personally, I tend to stop shy of ~20px, going more for ~18px.) With these specific values, a verbose expression of the font-size is: /* 1rem @ 22.5rem, 1.25rem @ 100rem */ clamp(1rem, 1rem + ((1.25 - 1) / (100 - 22.5) * (100vw - 22.5rem)), 1.25rem) I author fluid clamps in this form, and leave it to build tools like Lightning CSS to simplify the calc expression. For the specific values shown here: 22.5rem = ~360px, 100rem = ~1600px. You can definitely comfortably play fast and loose with the actual numbers.
mariocesar 3y ago
I like how it behaves on desktop, but I don't like making it "responsive" on mobile. We can fix that :D :root { font-size: 1rem; } @media (pointer: fine) { :root { font-size: calc(1rem + 0.25vw); } } @media (pointer: coarse) { :root { font-size: 1.25rem; } } "pointer" refers to the way a user interacts with a device's screen, either using a precise pointing device like a mouse (fine pointer) or a less precise one like a finger on a touchscreen (coarse pointer).
- account42 3y ago
  Let's actually fix it: :root { font-size: 1rem; } Done. Don't mess with the user's preferred font size. If you think some browsers have bad defaults, campaing to have them fixed instead of hardcoding incompatible hacks for each website.
  - deleted 3y ago
    [deleted]
  - tln 3y ago
    I'm not so sure.. There are good reasons to use different font sizes for body text depending on purpose. Hacker News' small fonts fit more comments on the page. A documentation site may benefit from fitting more text on the page. A spreadsheet benefits from even smaller text. The article is easier to read with larger fonts. I tried the article with your rule, it's just not as nice. Then I changed around my "preferred font size" (chrome://settings/fonts -> Font Size). Blog responds just fine to it. Ironically many, many, many sites don't. It's actually so useless in general to change your default font size that browsers have a much more useful way of letting users have small or large text -- zoom levels.
    - bee_rider 3y ago
      All of your examples benefitted from smaller text. And the caveat is always that it has the be big enough to read. Therefore, just let the user set the size, they can set it to the smallest size they can read.
account42 3y ago
This absolutely the wrong thing to do. Don't scale font size with viewport size. CSS "pixels" are already an abstract concept - if things are too small on your high-DPI screen adjust your pixel ratio accordingly instead of wasting everyone elses screenspace.
ecaron 3y ago
My favorite solution in this space remains https://www.modularscale.com/ https://www.modularscale.com/, because (like others mentioned) different device types warrant different scales, BUT ALSO changing line height and padding on a modular scale (also per device type) takes the math out of my responsibilities and puts it on the computer - where it belongs.
happytoexplain 3y ago
What is the motivation behind changing font size between mobile and desktop? My understanding is that browsers and apps already show the same font size at roughly the same perceptual physical size based on DPI and likely viewing distance, using relative units (em/rem on web, points on iOS, dp/sp on Android). I'm guessing it's one of these two things? 1. Designers now disagree with the result of that preexisting calculation. 2. Designers are OK with making fonts on mobile smaller than the ideal reading size so that they can fit more content on screen (doesn't seem like a very designer-y thing to do). Edit: Or, #3, this is an alternative to the trick I assumed was ubiquitous: <meta name="viewport" content="width=device-width, initial-scale=1" /> Which, I never understood why this is necessary in the first place (I'm not an experienced web dev). Based on the MDN docs (https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag#viewport_basics https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_m...), we're setting the viewport's width to "100% of the viewport width", and initial-scale to "1", both of which sound obviously redundant, and yet if you omit this you get tiny fonts on mobile. Edit 2: Scratch theory #3. The author's site and all three of the sites he cites have that viewport line.
- marcosdumay 3y ago
  > Which, I never understood why this is necessary in the first place (I'm not an experienced web dev). It's because the first phone browsers had an insane default, and the standards body decided the insanity should be kept for backwards compatibility. Having a viewport meta turns the insanity off, but only if you set the content area.
  - happytoexplain 3y ago
    Oh, thanks, I think I see. Before we had to think about mobile, any web page that wasn't just a block of text (e.g. inline images, side bars, etc) had bad/broken layout at small widths. Instead of waiting for the whole world to fix their websites, mobile browsers just shrank them a bit. The browser couldn't distinguish between a website that looked good and bad on mobile, so it shrank all of them. And because the web is inherently a slave to backwards compatibility, it's that way forever now. Mobile browsers do the shrinking by messing with viewport defaults, so we fix it by re-applying those defaults. I think the MDN doc's only mistake was describing "device-width" as "100% viewport width", since that seems like circular logic.
irrational 3y ago
What about the font-size: = 62.5% trick? html { font-size: 62.5%; } https://www.aleksandrhovhannisyan.com/blog/62-5-percent-font-size-trick/ https://www.aleksandrhovhannisyan.com/blog/62-5-percent-font... Has it gone by the wayside? Is it no longer a best practice?
- JimDabell 3y ago
  This was always a terrible thing to do. The idea behind it was that the browser default font size was 16px, so if you set the root font size for your document to 62.5%, then 1em = 10px, and designers who really, really wanted to work with pixels could use ems and pretend they were using pixels without doing complicated maths every time they wanted to set the size of something – they just needed to divide or multiply by ten. The reason for not just using pixels was partly because it was drummed into everybody’s heads at the time that ems were better than pixels (which, in context, they were, but not when you pretend they are pixels), and partly because Internet Explorer at the time was unable to resize text set in pixels when you increased the text size, which was an accessibility failure. The problem with this idea is that pixels and ems are fundamentally different types of unit. You can’t make them equivalent using any kind of calculation in CSS. Pixels are objective, whereas ems are based on user preferences. The browser might default to 16px font size, but users can pick something else. So if somebody had poor vision and increased their default font size; or if they had a small laptop screen and decreased their default font size, 1em * 62.5% != 10px, everything the designer set in ems was a different size than they intended, and a lot of their page layouts disintegrated into an unholy mess. You can’t convert between ems and pixels in CSS. Any calculation like this is fundamentally broken from the start. Nobody should have ever used the 62.5% hack.
  - semolino 3y ago
    I use: html {font-size: 16px;} ...and then use ems throughout the rest of the CSS in increments of 0.0625 as "virtual pixels." This, in practice, keeps everything proportional, scaling properly if the user zooms. Only rarely do I run into floating-point quirks, but they're never a big deal.
stevetron 3y ago
I have found myself in my own private war against web sites over text viewability. Gievn that I am a longtime-coder, and longtime-electronics engineer, I had a life-altering experience a few years ago: as I was laying out a new circuit board design via CAD for a longtime client, a board which I would also have to write all the code for, my eyesight went all-goofy <technical term?>. I had to depend on family members to get me an emergency admission to an eye clinic, where I learned I had a detached-retina in one eye, was told it must hurt, and they didn't have anyone on-staff that could fix it. A few years later, and I have my vision blocked in that same eye due to a cataract, they won't do surgery becuase I'm 'allergic to lasers' and I need to shift to audio books. Huh. No, here's what I need from web pages and web browsers: an end to de-emphasised background comments that appear as light-gray on white background, and a quick button that let's me view everything in undecorated font Libre Sans (Libre mono for code), Boldface, and 14-pixel. The boldface is a huge sticking point, and I really need it. And nobody supports it :( My eyesight is like viewing everything through a 'snowstorm whiteout'. The thin strokes of non-Boldface are nearly invisible, and size-alone doesn't quite fix it enough. Then there are the web site that insist on havign a hard-lock on low-contrasty themes......they seem to feel their precious theme to be more important than the word.
- bee_rider 3y ago
  Websites should be designed better, but it is 2024, that ship has sailed I think. The Dark Reader addon for Firefox is somewhat poorly named, it seems to be a pretty solid overall website customization tool. It can, for example: * force websites into light mode * change backgrounds to plain white and text to plain black * apply tints in general * force font line width changes. Might be worth a glance. I have pretty good vision but I just use it because the way the internet is supposed to work is: send me text, I’ll render it however I want. This lets me ignore more meddling by designers.
- adhamsalama 3y ago
  Does the browser reader mode help?
- gopher_space 3y ago
  I've been asking myself what I want out of visiting particular sites and what I need to get it. How far do I need to move from the command line to fulfill my goal? At the browser level I've found myself wanting to reorganize layout quite a bit, and am starting to think about templating from a user perspective beyond light/dark theme. What assumptions am I making about intent in my work? How can I provide flexibility and when should I step back and just link a csv dump? I think my ideal modern browser looks more like a crawler. Display of info loosely coupled to site content. All of the scripts I'd actually want to run pulled down on my side from public repos.
bromuro 3y ago
I don’t understand why font size on mobile should be smaller. Being he device smaller, font sizes should increase, if any. Others commenters are right here - don’t mess up with the font size, please.
ericselin 3y ago
While I agree with most of the comments that font-size for body text should ideally be 1rem (and certainly clamped), what about headings? When I think about different font sizes I think about headings, where it absolutely makes sense to have a much larger size on wide (/"desktop") screens.
- bee_rider 3y ago
  HTML has a header command, maybe that would work?
kingkool68 3y ago
I like using clamp() so there is a minimum and maximum size. Here's a Sass function to abstract away all the math --> https://gist.github.com/kingkool68/d2da6d3461eb7d47ca5815f9dee2b5f3 https://gist.github.com/kingkool68/d2da6d3461eb7d47ca5815f9d...

165 points by jamesfisher 3y ago

No! If you mess with the font size, you make your page hard to read for people who adjust their font size in their browser. They set their font size very carefully, to the smallest size they can comfortably read. Your site had better not change that. Medium.com is the worst offender. Their font size is small and they disable zooming on mobile!

stefanfisk 3y ago
This method uses the root font size as the base and therefore scales with the user's custom setting.
- deleted 3y ago
  [deleted]
- Karellen 3y ago
  The point of the user's custom setting is that you don't need to scale with it. The user's custom setting is the font size they want! That's why they set it. If the user wants a different root font size, they'll set it themselves.
  - bryanrasmussen 3y ago
    font size needs to scale because font size can also affect contrast, unless the user is setting custom font size per site it will not be adequate for the user to set the custom font size for all potential situations.
  - p_l 3y ago
    Unfortunately, while making a site, I can't query for "does the user set special preferences" in CSS. I use somewhat similar formula in one project to create a common baseline font size that 1) does not break with viewport size changes 2) remain legible for baseline user 3) gives good base value to scale UI elements by rem/em units. Of course it's also a project where the user does not have a chance to mess with font size anyway for the main user, but I'd reuse the formula elsewhere. Wish I could query the browser if the user has specific preferences, just like with "Dark mode"
    - persnickety 3y ago
      You don't query for it; you don't override. Either the setting is custom and desired, or it's default and it hasn't been adjusted because it's fine.
      - p_l 3y ago
        My personal experience is that the default is usually wrong, especially when I move between different displays. I end manually zooming in/zooming out a lot. Meanwhile using the default size + CSS keyword size modifiers (large/x-large etc.) ended up on breaking on the project I mentioned, especially after for all practical purposes we had to deal with the fact that claims of single display size & resolution to target weren't actually delivered, and when client also asked about possibly opening the interface from portable devices.
        persnickety 3y ago
        Sadly, I agree that browsers have forgotten what defaults are for. Instead of prvoiding something useable for the user, default CSS has turned into a nearly completely abstract set of values of relevance only to developers. But that situation should be fixed on the side of the Web browsers, not every website's author.
        account42 3y ago
        > My personal experience is that the default is usually wrong, especially when I move between different displays. I end manually zooming in/zooming out a lot. Then fix your setup. Campaing for better browser defaults. Do whatever it takes, but don't add hacks with hardcoded (=faulty) assumptions to your websites.
      - mcherm 3y ago
        OR, the setting is default and it hasn't been adjusted because the user doesn't have the faintest idea how to adjust font sizes. Which I suspect is the case for the majority of end users.
        3y ago
  - tiagod 3y ago
    The vast majority of users don't know how to adjust the font-size.
    - Karellen 3y ago
      Is that just because they've never tried to figure out how, because the default font size works fine for them? In which case, the answer is still not to change it.
  - jrwoodruff 3y ago
    If every site used the same font, maybe. But different font faces vary in readability at the same size. Also, we still have to set sizes for things like titles, subtitles and other elements to create a hierarchy on the page. 'Don't resize my fonts' is such a narrow view of whole range of design considerations.
sitharus 3y ago
If only CSS supplied some sensible keywords based on the user's preferences, so you could just ask for say a medium, large, or x-large font. Of course CSS actually does. I've found using font size keyword and rem units can make a UI that scales with user preferences quite possible. Not _easy_ of course, but possible.
CGamesPlay 3y ago
Full-page zoom won already. Browsers all make it very difficult to even scale the font size without zooming the page (Firefox is the easiest, with the setting buried in a submenu as a toggle). And frankly, scaling just the fonts but leaving the rest of the layout is a bad experience: scaling just the font size often breaks the layout, particularly around interactive controls like buttons and tabs. There are two good paths to accessibility here: full-page zoom, and reader mode.
oneeyedpigeon 3y ago
Actually, Medium—the app, at least—does have an option under "Display settings" that lets you switch between two font sizes that are almost imperceptibly different...
jskherman 3y ago
Laughs in pinch to zoom which works for zooming into images as well. I just really hate those websites that disable this and the regular zoom.
- account42 3y ago
  I actually liked it more when browser zoom affected only the font size and images were left 1:1 - for a normal Desktop usage anyway.
  - bee_rider 3y ago
    Browsers should definitely support both, they are very different features.
  - bobbylarrybobby 3y ago
    I know that Safari has two zoom modes, one which zooms the whole page and one which zooms just the text, leaving everything else intact.
tobr 3y ago
I would expect two large groups of user behavior: 1. People who never adjust font size. 2. People who regularly adjust font size as needed. The first group is helped by a reasonable responsive font size. The second group isn't hindered by it. Is there really a significant group of people who carefully set their preset font size, but then do not adjust it as needed when they visit a page? It seems unlikely to me. Even if all webpages used your defaults, there’s still no one-size-fits-all preset to pick, since typeface, weight, layout, leading, colors and many other things also impact readability. The tool to take control of all of that is reader mode, which is a great option when a website has screwed up its typography.
- navane 3y ago
  I set the text size on my mobile browser. You'll understand as you get older and your devices keep getting more pixels.
  - tobr 3y ago
    I do too, and I’m in group #2. Are you saying you’re not?
    - navane 3y ago
      No, I set it one for each device, then I never touch it again. So I'm am the third group that you doubt exists. I don't want to fiddle with it. I read text on my phone, I have a preferred size to read, I shouldn't have to change it more than once. The few sites which end up too big or too small I read begrudgingly. Can I even set font size per site? Pinch zoom doesn't work because now I have to pan left and right for each sentence? I'm totally with Karellen on this.
      - skribanto 3y ago
        At least in safari, you can hit the AA button and increase the font size there.
- account42 3y ago
tiagod 3y ago
For me, HN is one of the hardest to read on default zoom.
- andy_ppp 3y ago
  It's a real shame the site is never improved due to the captive market and lack of need to make things better. I am constantly downvoting on mobile when I mean to be upvoting for example, surely they could just make the clickable area bigger.
  - yccs27 3y ago
    I also sometimes wish this site got an overhaul, but then I look at the new Reddit layout and feel glad HN hasn't changed like that.
    - andy_ppp 3y ago
      Yes completely, I can't understand why Reddit hate their users so much, I find the site totally unusable and I often just leave immediately if I visit it!
    - Solvency 3y ago
      That's the most slippery slope argument possible. "Whoa can't refine the hit state on two arrows by a few pixels! The whole site might become anew Reddit!"
      - dspillett 3y ago
        I think the argument is more “if I had to choose between the two extremes, I'd definitely prefer this one” than the slippery slope of “I don't want change because change might lead to abomination”.
  - DHPersonal 3y ago
    I use a Safari extension to add my own CSS and edited a Stylish package that already existed to update the design a bit. On iOS and iPadOS I use Hack. https://apps.apple.com/us/app/hack-for-hacker-news-reader/id1464477788 https://apps.apple.com/us/app/hack-for-hacker-news-reader/id...
RespectYourself 3y ago
[dead]

chapterjason 3y ago

I use rfs for that. https://github.com/twbs/rfs https://github.com/twbs/rfs

youngtaff 3y ago

Really need to adjust more than just the font size, line height, grid spacing etc all need adjusting too https://utopia.fyi/ https://utopia.fyi/ is good for these calculations

andrei_says_ 3y ago
I also came here to recommend Utopia.fyi. An incredible solution done right. Use it on all my projects - for don’t size, typographic scale, and spacing.
- zelphirkalt 3y ago
  Funny typo. For a moment I thought the link would be about how not to size things on websites.
  - andrei_says_ 3y ago
    Yes, I noticed the autocorrect but it was too late. Thought the context was sufficient to expose it as a typo. “…for font size, typographic scale, and spacing.”
deleted 3y ago
[deleted]
qingcharles 3y ago
I used Utopia as the baseline for my sites; though I hadn't previously encountered people who had force-changed their font-size per site.

ceving 3y ago

Silly idea! A font size must depend on the vision of the reader.

jraph 3y ago
That's what the CSS Vision Impairment Module is for, which can query the user's medical record to adjust the font size and colors :-)
- account42 3y ago
  Funny how the first browsers already implemented this (before the rest of CSS) by having a default font size.

xz18r 3y ago

Ironically, the font is too large for the table to fit on the screen, introducing horizontal scroll on this mobile page which I’m sure isn’t best practice. (I’m viewing this page on an iPhone 15)

zelphirkalt 3y ago
That in itself might mean, that a table is not the right way in this case.
- planede 3y ago
  I think a table can be alright, there is only so much you can do. It could be fine tuned though to only require horizontal scrolling on the table and not the whole web page. Maybe anchor the first row and column if you want to be fancy.

lifthrasiir 3y ago

Please, please please have reasonable bounds around that if you do want to use a responsive font-size. `clamp(10px, 1rem + 0.25vw, 60px)` (say) doesn't harm anyone else.

runxel 3y ago
There are some worst offenders who chose the fontsize based on the size of the viewports... and it get's ludicrous big at my work, where I have an ultra wide curved monitor. Everybody please clamp!
- WorldMaker 3y ago
  It's definitely a fascinating game to try websites Full Screen on an ultra wide. I definitely tend to stick to FancyZones for most browser windows to get "normal" breakpoints, but every now and then it's fun to play with sites and see which ones tested extremes in responsiveness. I get a lot of flak that my blog [0] scrolls horizontally by default when JS is enabled, because that is intentionally weird, but it's one of the only websites I know of that is "readable like a newspaper" when full screen on an ultra-wide monitor. Some posts you can read the entire article at full screen on an ultra-wide with no scrolling at all. I'm proud of that and I like that for my own enjoyment, even if few others appreciate it. [0] https://blog.worldmaker.net https://blog.worldmaker.net

Cloudef 3y ago

Isn't the whole point of em that you don't have to do this?

stefanfisk 3y ago
how would one use em to implement something like this?
- Cloudef 3y ago
  1em is your base text size (what your content should use), >1, <1 when you want larger or smaller text, point being you don't dynamically adjust and break the users font size configuration. For example comparison with the OP's site: - dynamic on : https://files.catbox.moe/qwa2az.png https://files.catbox.moe/qwa2az.png - dynamic off: https://files.catbox.moe/glu3ud.png https://files.catbox.moe/glu3ud.png
  - stefanfisk 3y ago
    Don’t you mean rem? If you use em like that you have to make sure that you don’t multiply your font size more than once when nesting elements.
    - dao- 3y ago
      Except that's exactly what you want e.g. when you want something to stand out relative to its context. For instance, you want your headings to be 150% the size of surrounding text, so when you have an info box with smaller text and a heading, that heading should not end up as tall as your main text headings. Of course you could also have distinct heading classes or equivalent selectors for different contexts, and specify every case in rem, if that's how you like your stylesheets.

Ennea 3y ago

This is going to make text very large whenever somebody with an ultrawide monitor decides to maximize their browser window.

jotaen 3y ago
Although not exactly ultra-wide, on my 27" screen, the font-size with maximised window (2500px horizontally) would compute to ~22px for the submitted website. While that’s noticeable bigger compared to a narrow view port, I’m not sure that would qualify as “very large”. To me, it looks alright. The main container’s width on their website also doesn’t scale infinitely, so on a very wide screen you’d have a lot of blank space on both sides. That being said, it might still be reasonable to set a break point (or use CSS clamps) and prevent further font-size growth beyond a certain point.
alkonaut 3y ago
Yes how is the viewport size really relevant? A sensible site would have a max column width for any paragraph. So if I have a 4000px wide viewport and view a 500px wide column of text, it has to be the same size as the 500px column of text also if the browser window is just 1000px?

manbitesdog 3y ago

The point of having font size jumps is to only test screen dimensions right before and after the jump, to check for overflow or excessively large containers. But with a linear scaling this checking requires looking at all resolutions

uj8efdjkfdshf 3y ago

Huh, interesting. I've been using a clamped version of 1.5vw + 1vh for landscape and 1vw + 1vh for portrait, and then scaling everything else by rem for consistency. Might give this a try though.

bryanrasmussen 3y ago
do you have any clamping suggestions for overflowing/wrapping text in buttons etc.? I ask just because not very many people seem to clamp yet, so looking for experiences.

bkyan 3y ago

Is there a way to do a curved function instead of a linear function?

chrismorgan 3y ago

My strong recommendation is to stick to 1 browser em (~16px) on mobile-sized displays, and not to exceed 1.25 browser ems (~20px) on large displays. The formula provided in this article starts you at around ~17px, and exceeds ~20px on viewports wider than 1600px (quite common). That is: it’s too big. I’d suggest instead something like ~16px at 360px viewport width, and ~20px at 1600px viewport width, and clamping at these values. Slightly different curve, and capped a little more sensibly, in my opinion. (Personally, I tend to stop shy of ~20px, going more for ~18px.) With these specific values, a verbose expression of the font-size is: /* 1rem @ 22.5rem, 1.25rem @ 100rem */ clamp(1rem, 1rem + ((1.25 - 1) / (100 - 22.5) * (100vw - 22.5rem)), 1.25rem) I author fluid clamps in this form, and leave it to build tools like Lightning CSS to simplify the calc expression. For the specific values shown here: 22.5rem = ~360px, 100rem = ~1600px. You can definitely comfortably play fast and loose with the actual numbers.

mariocesar 3y ago

I like how it behaves on desktop, but I don't like making it "responsive" on mobile. We can fix that :D :root { font-size: 1rem; } @media (pointer: fine) { :root { font-size: calc(1rem + 0.25vw); } } @media (pointer: coarse) { :root { font-size: 1.25rem; } } "pointer" refers to the way a user interacts with a device's screen, either using a precise pointing device like a mouse (fine pointer) or a less precise one like a finger on a touchscreen (coarse pointer).

account42 3y ago
Let's actually fix it: :root { font-size: 1rem; } Done. Don't mess with the user's preferred font size. If you think some browsers have bad defaults, campaing to have them fixed instead of hardcoding incompatible hacks for each website.
- deleted 3y ago
  [deleted]
- tln 3y ago
  I'm not so sure.. There are good reasons to use different font sizes for body text depending on purpose. Hacker News' small fonts fit more comments on the page. A documentation site may benefit from fitting more text on the page. A spreadsheet benefits from even smaller text. The article is easier to read with larger fonts. I tried the article with your rule, it's just not as nice. Then I changed around my "preferred font size" (chrome://settings/fonts -> Font Size). Blog responds just fine to it. Ironically many, many, many sites don't. It's actually so useless in general to change your default font size that browsers have a much more useful way of letting users have small or large text -- zoom levels.
  - bee_rider 3y ago
    All of your examples benefitted from smaller text. And the caveat is always that it has the be big enough to read. Therefore, just let the user set the size, they can set it to the smallest size they can read.

account42 3y ago

This absolutely the wrong thing to do. Don't scale font size with viewport size. CSS "pixels" are already an abstract concept - if things are too small on your high-DPI screen adjust your pixel ratio accordingly instead of wasting everyone elses screenspace.

ecaron 3y ago

My favorite solution in this space remains https://www.modularscale.com/ https://www.modularscale.com/, because (like others mentioned) different device types warrant different scales, BUT ALSO changing line height and padding on a modular scale (also per device type) takes the math out of my responsibilities and puts it on the computer - where it belongs.

happytoexplain 3y ago

What is the motivation behind changing font size between mobile and desktop? My understanding is that browsers and apps already show the same font size at roughly the same perceptual physical size based on DPI and likely viewing distance, using relative units (em/rem on web, points on iOS, dp/sp on Android). I'm guessing it's one of these two things? 1. Designers now disagree with the result of that preexisting calculation. 2. Designers are OK with making fonts on mobile smaller than the ideal reading size so that they can fit more content on screen (doesn't seem like a very designer-y thing to do). Edit: Or, #3, this is an alternative to the trick I assumed was ubiquitous: <meta name="viewport" content="width=device-width, initial-scale=1" /> Which, I never understood why this is necessary in the first place (I'm not an experienced web dev). Based on the MDN docs (https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag#viewport_basics https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_m...), we're setting the viewport's width to "100% of the viewport width", and initial-scale to "1", both of which sound obviously redundant, and yet if you omit this you get tiny fonts on mobile. Edit 2: Scratch theory #3. The author's site and all three of the sites he cites have that viewport line.

marcosdumay 3y ago
> Which, I never understood why this is necessary in the first place (I'm not an experienced web dev). It's because the first phone browsers had an insane default, and the standards body decided the insanity should be kept for backwards compatibility. Having a viewport meta turns the insanity off, but only if you set the content area.
- happytoexplain 3y ago
  Oh, thanks, I think I see. Before we had to think about mobile, any web page that wasn't just a block of text (e.g. inline images, side bars, etc) had bad/broken layout at small widths. Instead of waiting for the whole world to fix their websites, mobile browsers just shrank them a bit. The browser couldn't distinguish between a website that looked good and bad on mobile, so it shrank all of them. And because the web is inherently a slave to backwards compatibility, it's that way forever now. Mobile browsers do the shrinking by messing with viewport defaults, so we fix it by re-applying those defaults. I think the MDN doc's only mistake was describing "device-width" as "100% viewport width", since that seems like circular logic.

irrational 3y ago

What about the font-size: = 62.5% trick? html { font-size: 62.5%; } https://www.aleksandrhovhannisyan.com/blog/62-5-percent-font-size-trick/ https://www.aleksandrhovhannisyan.com/blog/62-5-percent-font... Has it gone by the wayside? Is it no longer a best practice?

JimDabell 3y ago
This was always a terrible thing to do. The idea behind it was that the browser default font size was 16px, so if you set the root font size for your document to 62.5%, then 1em = 10px, and designers who really, really wanted to work with pixels could use ems and pretend they were using pixels without doing complicated maths every time they wanted to set the size of something – they just needed to divide or multiply by ten. The reason for not just using pixels was partly because it was drummed into everybody’s heads at the time that ems were better than pixels (which, in context, they were, but not when you pretend they are pixels), and partly because Internet Explorer at the time was unable to resize text set in pixels when you increased the text size, which was an accessibility failure. The problem with this idea is that pixels and ems are fundamentally different types of unit. You can’t make them equivalent using any kind of calculation in CSS. Pixels are objective, whereas ems are based on user preferences. The browser might default to 16px font size, but users can pick something else. So if somebody had poor vision and increased their default font size; or if they had a small laptop screen and decreased their default font size, 1em * 62.5% != 10px, everything the designer set in ems was a different size than they intended, and a lot of their page layouts disintegrated into an unholy mess. You can’t convert between ems and pixels in CSS. Any calculation like this is fundamentally broken from the start. Nobody should have ever used the 62.5% hack.
- semolino 3y ago
  I use: html {font-size: 16px;} ...and then use ems throughout the rest of the CSS in increments of 0.0625 as "virtual pixels." This, in practice, keeps everything proportional, scaling properly if the user zooms. Only rarely do I run into floating-point quirks, but they're never a big deal.

stevetron 3y ago

I have found myself in my own private war against web sites over text viewability. Gievn that I am a longtime-coder, and longtime-electronics engineer, I had a life-altering experience a few years ago: as I was laying out a new circuit board design via CAD for a longtime client, a board which I would also have to write all the code for, my eyesight went all-goofy <technical term?>. I had to depend on family members to get me an emergency admission to an eye clinic, where I learned I had a detached-retina in one eye, was told it must hurt, and they didn't have anyone on-staff that could fix it. A few years later, and I have my vision blocked in that same eye due to a cataract, they won't do surgery becuase I'm 'allergic to lasers' and I need to shift to audio books. Huh. No, here's what I need from web pages and web browsers: an end to de-emphasised background comments that appear as light-gray on white background, and a quick button that let's me view everything in undecorated font Libre Sans (Libre mono for code), Boldface, and 14-pixel. The boldface is a huge sticking point, and I really need it. And nobody supports it :( My eyesight is like viewing everything through a 'snowstorm whiteout'. The thin strokes of non-Boldface are nearly invisible, and size-alone doesn't quite fix it enough. Then there are the web site that insist on havign a hard-lock on low-contrasty themes......they seem to feel their precious theme to be more important than the word.

bee_rider 3y ago
Websites should be designed better, but it is 2024, that ship has sailed I think. The Dark Reader addon for Firefox is somewhat poorly named, it seems to be a pretty solid overall website customization tool. It can, for example: * force websites into light mode * change backgrounds to plain white and text to plain black * apply tints in general * force font line width changes. Might be worth a glance. I have pretty good vision but I just use it because the way the internet is supposed to work is: send me text, I’ll render it however I want. This lets me ignore more meddling by designers.
adhamsalama 3y ago
Does the browser reader mode help?
gopher_space 3y ago
I've been asking myself what I want out of visiting particular sites and what I need to get it. How far do I need to move from the command line to fulfill my goal? At the browser level I've found myself wanting to reorganize layout quite a bit, and am starting to think about templating from a user perspective beyond light/dark theme. What assumptions am I making about intent in my work? How can I provide flexibility and when should I step back and just link a csv dump? I think my ideal modern browser looks more like a crawler. Display of info loosely coupled to site content. All of the scripts I'd actually want to run pulled down on my side from public repos.

bromuro 3y ago

I don’t understand why font size on mobile should be smaller. Being he device smaller, font sizes should increase, if any. Others commenters are right here - don’t mess up with the font size, please.

ericselin 3y ago

While I agree with most of the comments that font-size for body text should ideally be 1rem (and certainly clamped), what about headings? When I think about different font sizes I think about headings, where it absolutely makes sense to have a much larger size on wide (/"desktop") screens.

bee_rider 3y ago
HTML has a header command, maybe that would work?

kingkool68 3y ago

I like using clamp() so there is a minimum and maximum size. Here's a Sass function to abstract away all the math --> https://gist.github.com/kingkool68/d2da6d3461eb7d47ca5815f9dee2b5f3 https://gist.github.com/kingkool68/d2da6d3461eb7d47ca5815f9d...