kjz
kjz

Added a section on narrow screens such as mobiles to my article about measure (or line width). TLDR: don’t sacrifice a readable font size for a 10-15 word measure.

|
Embed
pimoore
pimoore

@leonp This is the struggle I’ve been having in trying to make changes to my own site, as well as the theme I’m trying to port over. It’s a very fine line with phone screens where it becomes off-putting for anyone with less than stellar vision should you go too small. Then of course there are those sites still only designed around a desktop experience that require a magnifying glass and a bottle of Advil to read successfully.

|
Embed
kjz
kjz

@pimoore I reckon you have it just about right on your site on a phone, perhaps a bit small for me, but then I prefer large text. Merriweather is a pretty sturdy, dark typeface, and readable at small sizes. I note you don’t scale it up for wider screens?

Yeah, there are a surprising number of sites that still don’t scale for a narrow screen, including the main message board for the football team I support. I have to rotate my screen and zoom in to read it, which is a somewhat quaint, retro experience.

|
Embed
pimoore
pimoore

@leonp Thanks Leon, I appreciate the feedback as I continue to tweak my site. I already thought it looked pretty comfortable on my phone, but it’s good to have the confirmation from someone else. I’d still like to increase the size for wider and larger screens as soon as I learn more about the process of doing that. CSS is extremely finicky from my experience thus far, you’d think we’d have something more user-friendly by now. 😆

|
Embed
jayeless
jayeless

@pimoore Hopefully this explanation helps and isn't just confusing 😆 but what I've done is specify a font-size for body that's suitable for mobiles, then use a media query to define a larger font size for screen sizes above 435px wide. So put together:

body {
    font-size: medium;
}

@media only screen and (min-width: 435px) {
    body {
        font-size: large;
    }
}

Obviously I have other styles there too, but that's the relevant part for this discussion 😆 Font sizes for everything else – headings, etc. – I define as a percentage of the base font size, so they'll all scale in line with the main text.

|
Embed
pimoore
pimoore

@jayeless Thanks Jessica, that makes sense to me even though I’ve never seen the “medium” or “large” descriptors used (I’ve always seen font size specified in either a pixels or rem value). Is there an advantage or difference in doing it this way in comparison?

|
Embed
In reply to
jayeless
jayeless

@pimoore I read the advice so long ago (like probably over a decade ago) that the explanation may not even still be valid, but the explanation at the time was that if someone's gone into their browser settings to change their default font size, then "medium" and "large" scaled in relation to what they've changed their default to, while exact-pixel values did not. Since then I've just been in the habit of doing it that way, and as far as I know there's been no disadvantage to it.

|
Embed
pimoore
pimoore

@jayeless Interesting, I’ll have to look into that some more. Thanks so much for the tips! 🙏

|
Embed
kjz
kjz

@pimoore Yes, it does seem unnecessarily complicated. In an ideal world you wouldn’t need to do anything as font-size: 100% would just work.

Anyway, posted this on how I set responsive font sizes.

|
Embed
pimoore
pimoore

@leonp I hope you’re not feeling obligated to write all these posts on my account. 😉

|
Embed
kjz
kjz

@pimoore nah, I like writing them!

|
Embed
pimoore
pimoore

@leonp Thanks Leon, they’ve all been really helpful! 🙏

|
Embed