fcbsd

*BSD bod

  • he/him

OpenBSD on the Desktop,
since 2001

Glasgow


wavebeem
@wavebeem

i've been browsing a lot of bearblogs and neocities pages and whatnot recently and i see this everywhere!!!!!

please use at least 16px for your main text. this is the default size in every browser for a reason (well, backwards compatibility, mainly, but still)

it's actually good to make some of the text on your site bigger than that. i would recommend 20px for main content.

EDIT: (sorry for the exasperated tone...)


wavebeem
@wavebeem

i would suggest line-height: 1.5 for most body content. you can make it smaller on labels and headings if you like, but seriously. 20px text with 1.5 line height is a million times easier to read

it will look REALLY BIG when you change it but you'll adjust!


76f0e4667ed32667d2bfc063699b246e
@76f0e4667ed32667d2bfc063699b246e
This page's posts are visible only to users who are logged in.

ireneista
@ireneista

seriously we have been using font sizes much larger than our peers for our entire life

that's because we have vision issues; we didn't realize that as kids but it's clear in hindsight (ha)


You must log in to comment.

in reply to @wavebeem's post:

Thank you for compelling a font-check. It puts into words something I was feeling nervous about without being able to put my finger on specifically, especially after I finally wrangled my Publii theme into including Atkinson Hyperlegible (which is a smaller font than the one the theme had previously used by default).

that's a great call out too. not every font is the "same height"... which is tough! for anyone else looking at this, the word you're looking for is "x-height". fonts with large "x-height" basically have larger lowercase letters, or really the height difference between upper case and lower case is smaller. this is important since most letters in most text are not upper case, so you can get a bigger "effective size" without bumping up the font size.

realistically the world of "make font look good" is something where i've only scratched the surface. i just wanted to give some quick tips that could be done in a couple lines of code :)

1.25rem feels weirdly recursive to me, though it's probably fine. I just went with max(1rem, 16px) for a site I was building. That way, if the user has turned their font-size way up already, I don't force it to 16 pixels

That was worded poorly – my bad! I know that rem is relative to the root element.

body{font-size:1.25} is fine for the average user, who is probably using the browser's default (i.e. too small) font. But for the users who (e.g. due to bad eyesight) have set a larger font size on their device, this rule would make the font even larger. That's why I took the approach of setting a minimum size with max().

ahhhh yeah that's a good point! ideally you'd have controls to change some basic accessibility stuff like that, but i'm trying not to scare the new website makers in the audience haha. i don't even bother with that, but i totally see your point about using max instead

I just ran into this problem with my own self.
Like "why is my dreamwidth layout so much less legible than the cohost feed.... Oh, well why the fuck did I set the font so small?!"

And then I fixed it. Because, sometimes, I'm accountable to myself.

in reply to @wavebeem's post:

I fully agree with this but I'm also curious what your desktop/laptop screen DPI is.

Mostly thinking about how I'll occasionally be visiting an old website and the text is teeny tiny and going "oh right, this is back in the 800x600 days huh?"

my main monitor is 1920x1080 @ 24.5" = 89.91 PPI
( https://www.sven.de/dpi/ )

i've noticed that apple seems to push users towards 115 PPI or higher, which i find really hard to use for most font typical font sizes

( also i realize that for apple this is all retina stuff but i'm talking about effective resolution not retina stuff... and non-integer display scaling looks really bad imo so i don't bother with it )

yeah i'm not super familiar with average resolutions and screen sizes back in the day..... my mind says 1024x768 with like... 16"? was fairly common? but that might've just been what i had lol (80 PPI)

Yup that's about the same PPI as my desktop. I realized just now that my laptop is higher, but I also use it closer typically so that kind of balances out, I guess?

"Just make the screen res as high as possible and scale things" is such an annoyingly broken solution. If I can't read text at 1x scale then it's a bad screen to me.

There's for sure a balance between "I want to make my website look COOL" and "I want to make my website readable!" As someone that personally prefers to make my website look very basic and, hopefully, very readable and accessible if by no other means than by brute force simplicity, I do like sometimes seeing website where I can't read a damn thing and hurt my eyes lol.

I changed my main page to 12px just now for fun and fuck that.

i used a 2560x1440 @ 27" screen for like... 8 years (108 PPI) and even that upgrade was unpleasant to me. i constantly found myself wanting like min 18px text and it was just... too small for true split screen content, but too big for any one single window.................

i go by the rule of "desktop monitor should be at least arms length away" but yeah laptop stuff could be a smidge closer potentially................

i honestly love the idea of retina for text, though i largely find it overkill for graphics. i almost bought a 4k monitor but realized it's terrible for gaming (if you're a frame rate nerd like me), so i bought a 1080p screen with great refresh rate instead haha.