Skip to content
This day’s portion

Measure article update

| Comments

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.

Add a comment

Required fields marked *. I won’t publish or share your email address.

Comments

None 🦉.

Mentions

Comments and replies to this post from other sites and services, such as micro.blog and Twitter.

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.

leonp

@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.

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. 😆

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.

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?

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.