PR proposal for font-size breakpoints

[danielfdickinson]

I've got some CSS I use for increasing the font size as the screen resolution gets larger (because often higher resolution is means higher DPI, and I'm not aware of a working way to check DPI using only CSS, especially on 2K and 4K displays).

In addition, this enhances the experience for those with low vision (but not completely blind).

The proposed CSS (I would add this in the appropriate assets/css files, if the idea gets accepted) is:

@media not speech {
    body {
        font-size: 16px;
    }
}

@media screen and (min-width: 28em) {
    body {
        font-size: 17px;
    }
}

@media screen and (min-width: 36em) {
    body {
        font-size: 18px;
    }
}

@media screen and (min-width: 48em) {
    body {
        font-size: 19px;
    }
}

@media screen and (min-width: 56em) {
    body {
        font-size: 20px;
    }
}

@media screen and (min-width: 64em) {
    body {
        font-size: 21px;
    }
}

Because base font size would no longer be fixed, I also propse the following changes:

.footer,
.post-meta {
    font-size: .8em;
}

#menu a {
    font-size: .9em;
}

.logo a {
    font-size: 1.6em;
}

Thoughts?

[pixelfabs]

I have been playing around with clamp() function. Here is a tool you can use to improve your code: https://codesandbox.io/s/clamp-linear-intepolation-based-on-viewport-width-builder-xgkft?from-embed

[danielfdickinson]

@pixelfabs Thanks - I originally created this some years ago and haven't looked at in a long time. Looking at the MDN clamp() page I see that even before clamp() that there have been improvements to CSS that make this pretty "old school"! I will be studying this more closely for sure!

[pixelfabs]

Looking forward to your new solution. I think you have more knowledge about screen readers and larger screens. I know PaperMod does a good job on accessibility. But I do struggle with a decent size for h1, h2, h3 etc. in a way that it's appealing after 1440-2560px. I can manage 320px width till 1024px (small laptop) but after that I'm lost.

[danielfdickinson]

I've create a draft PR at #531 . Please take a look.