Hacker News Reader

Comment by pta2002 | Hacker News Reader

pta2002

This website is completely unreadable on an ultrawide monitor, it seems to make the font size dependent on the window's width, which makes it absolutely massive (I can maybe fit half a paragraph on the screen?), and the browser zoom does not seem to change the font size because of it...

View on HN

> the browser zoom does not seem to change the font size because of it

This is one of the worst cases of this I have seen. It is literally unreadable for me. Normally I can use browser zoom to sort it out, but this beauty even defeats that workaround.

Yup, but while making the window smaller to write this I noticed I can make it a small window, about the size of my phone, to get text that is reasonable.

The site, giving UI advice, is written assuming your display is always ~7" ?

I thought that the site must be designed for mainly mobile, so I switched mobile mode on in the dev tools in firefox. However then there is some menu header text overlapping the main body.

It seems the design of this site is very much style over function.

Text on safari mobile is too small for my bad eyes and increasing font size does… not increase font size.

The irony of this happening on an article talking about bad design...

It's not ironic; it just demonstrates that design is hard to get right.

It's not hard to design a web page that's 95% text and which lets the user adjust the font size via the browser's zoom controls.

Someone while designing for the mobile, forgot about desktops.

  ```
  :root {
    font-size: calc(1vw + 1vh + .5vmin);
  }

  html {
    max-width: 100%;
  }

  body {
    color: #444;
    font-family: "Vollkorn", georgia, serif;
    margin: 0 auto;
    max-width: 100%;
  }
  ```

They can remove the width on the HTML and replace the body's `max-width: 100%` with something like;

  ```
  width: 100%;
  max-width: 1200px;
  ```

One solution you could use to get around this weird design decision, is to use the reader mode in Firefox (I'm not sure what is the alternative for other browsers).

This worked for me, thanks :)

"Reader mode" is the ultimate weapon against designer unreadability. It feels like it should have ADA-mandate level importance.

All they have to do is remove "p {max-width: 28rem;}" and the website becomes beautiful. The text fills the entire width of the screen, and the font scales with the screen size (though they should dial it back a bit, or have a different scaling ramp). It's like reading an actual document, and how the web should be. Bonus points, it's ridiculously "responsive" for small screen sizes.

Yes, I know they got it kinda "wrong", but they're arguably going in the right direction here. I'd give the author points for trying something out of the box, and also for "sticking it" to the monstrosity that Bootstrap started many years ago.

> the font scales with the screen size

The font somehow re-scales if you zoom the web page, at least with mousewheel zoom on a desktop browser. Instant accessibility failure. I've also never seen this before and couldn't work out how it had been achieved?

Ironic

Reply on news.ycombinator.com