Proposed for PR for enhanced font sizing

[danielfdickinson]

Is your feature request related to a problem? Please describe. For high density displays (e.g. 2K/4K on windows when using the default scaling (100%) the theme's fonts are badly sized (screenshot to be provided later).

Describe the solution you'd like Replacing the current CSS:

html {
    font-size: calc(1em + 0.33vw);
}

with (work in progress) -- I'd supply the PR:

:root {
    --min-font-size: 18px;
    --max-font-size: 32px;
    --main-width-in-chars: 55;
    --nav-width: 95vw;
    --main-width: 70vw;
    --body-font-multiplier: 1;
    --body-font-size: 1rem;
}

/* Fall back base font-size for old browsers */
html {
    font-size: 16px;
}

@media screen and (min-width: 1376px) {
    html {
        font-size: 17px;
    }
}

@media screen and (min-width: 1536px) {
    html {
        font-size: 19px;
    }
}
@media screen and (min-width: 1600px) {
    html {
        font-size: 20px;
    }
}

@media screen and (min-width: 1728px) {
    html {
        font-size: 21px;
    }
}

@media screen and (min-width: 1880px) {
    html {
        font-size: 23px;
    }
}

@media screen and (min-width: 2048px) {
    html {
        font-size:25px;
    }
}

@media screen and (min-width: 3172px) {
    html {
        font-size:32px;
    }
}

body {
    font-size: 1.125rem;
}
/* End of Fall back base font-size for old browsers */

/* Set the base font-size using the method supported by the browser
   1. clamp & calc
   2. min, max, and calc
   3. calc plus media query
*/
@supports (font-size: clamp(var(--min-font-size), calc(var(--main-width) / (var(--main-width-in-chars) * var(--body-font-multiplier))), var(--max-font-size))) {
    html {
        font-size: clamp(var(--min-font-size), calc(var(--main-width) / (var(--main-width-in-chars) * var(--body-font-multiplier))), var(--max-font-size));
    }
}

@supports ((font-size: min(max(var(--min-font-size), calc(var(--main-width) / (var(--main-width-in-chars) * var(--body-font-multiplier)))), var(--max-font-size))) and (not (font-size: clamp(var(--min-font-size), calc(var(--main-width) / (var(--main-width-in-chars) * var(--body-font-multiplier))), var(--max-font-size))))) {
    html {
        font-size: min(max(var(--min-font-size), calc(var(--main-width) / (var(--main-width-in-chars) * var(--body-font-multiplier)))), var(--max-font-size));
    }
}

@supports ((font-size: calc(var(--main-width) / (var(--main-width-in-chars) * var(--body-font-multiplier)))) and (not (font-size: min(max(var(--min-font-size), calc(var(--main-width) / (var(--main-width-in-chars) * var(--body-font-multiplier)))), var(--max-font-size)))) and (not (font-size: clamp(var(--min-font-size), calc(var(--main-width) / (var(--main-width-in-chars) * var(--body-font-multiplier))), var(--max-font-size))))) {
    html {
        font-size: calc(var(--main-width) / (var(--main-width-in-chars) * var(--body-font-multiplier)));
    }
    @media screen and (min-width: 3172px) {
        html {
            font-size: var(--max-font-size);
        }
    }
}
/* End Set the base font-size using the method supported by the browser */

/* Override the body font-size via var, if supported */
@supports (font-size: var(--body-font-size)) {
    body {
        font-size: var(--body-font-size);
    }
}
/* End Override the body font-size via var, if supported */

.main-and-footer > div {
    max-width: var(--main-width);
}

Additional Context

Here is a screenshot on 2K display at almost full sreen window size (so slightly less than 2048px). I apologize for the politics -- the only site I have using Cupper is political.

Things start to go wonky at about 1376px (that is with no scaling; with a typical scaling factor a 2K display doesn't quite get to 1376px in the browser) of browser pixel width.

[zwbetz-gh]

How many pixels wide before the fonts look badly sized?

I would prefer to keep the font size as-is, then at some large screen break point, cap their size.

On Mon, Aug 23, 2021 at 6:28 AM Daniel F. Dickinson < @.***> wrote:

Is your feature request related to a problem? Please describe. For high density displays (e.g. 2K/4K on windows when using the default scaling (100%) the theme's fonts are badly sized (screenshot to be provided later).

Describe the solution you'd like Replacing the current CSS:

html { font-size: calc(1em + 0.33vw); }

with (work in progress) -- I'd supply the PR:

:root { --min-font-size: 18px; --max-font-size: 32px; --main-width-in-chars: 55; --nav-width: 95vw; --main-width: 70vw; --body-font-multiplier: 1; --body-font-size: 1rem; } / Fall back base font-size for old browsers /html { font-size: 16px; } @media screen and (min-width: 1376px) { html { font-size: 17px; } } @media screen and (min-width: 1536px) { html { font-size: 19px; } @. screen and (min-width: 1600px) { html { font-size: 20px; } } @media screen and (min-width: 1728px) { html { font-size: 21px; } } @media screen and (min-width: 1880px) { html { font-size: 23px; } } @media screen and (min-width: 2048px) { html { font-size:25px; } } @media screen and (min-width: 3172px) { html { font-size:32px; } } body { font-size: 1.125rem; }/ End of Fall back base font-size for old browsers / / Set the base font-size using the method supported by the browser 1. clamp & calc 2. min, max, and calc 3. calc plus media **@. (font-size: clamp(var(--min-font-size), calc(var(--main-width) / (var(--main-width-in-chars) var(--body-font-multiplier))), var(--max-font-size))) { html { font-size: clamp(var(--min-font-size), calc(var(--main-width) / (var(--main-width-in-chars) var(--body-font-multiplier))), var(--max-font-size)); } } @supports ((font-size: min(max(var(--min-font-size), calc(var(--main-width) / (var(--main-width-in-chars) var(--body-font-multiplier)))), var(--max-font-size))) and (not (font-size: clamp(var(--min-font-size), calc(var(--main-width) / (var(--main-width-in-chars) var(--body-font-multiplier))), var(--max-font-size))))) { html { font-size: min(max(var(--min-font-size), calc(var(--main-width) / (var(--main-width-in-chars) var(--body-font-multiplier)))), var(--max-font-size)); } } @supports ((font-size: calc(var(--main-width) / (var(--main-width-in-chars) var(--body-font-multiplier)))) and (not (font-size: min(max(var(--min-font-size), calc(var(--main-width) / (var(--main-width-in-chars) var(--body-font-multiplier)))), var(--max-font-size)))) and (not (font-size: clamp(var(--min-font-size), calc(var(--main-width) / (var(--main-width-in-chars) var(--body-font-multiplier))), var(--max-font-size))))) { html { font-size: calc(var(--main-width) / (var(--main-width-in-chars) var(--body-font-multiplier))); } @media screen and (min-width: 3172px) { html { font-size: var(--max-font-size); } } }/ End Set the base font-size using the method supported by the browser / / Override the body font-size via var, if supported @. (font-size: var(--body-font-size)) { body { font-size: var(--body-font-size); } }/ End Override the body font-size via var, if supported /

.main-and-footer > div { max-width: var(--main-width); }

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/zwbetz-gh/cupper-hugo-theme/issues/58, or unsubscribe https://github.com/notifications/unsubscribe-auth/AI4WX7DAR52PF32ZDW5OSETT6IWGHANCNFSM5CUL6OUA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email .

[danielfdickinson]

I've updated with a screenshot; this issue is that it gets too small not too large.

[zwbetz-gh]

These are from the Bootstrap 5 CSS. Try them and see how they look.

:root {
  --bs-body-font-size: 1rem;
}

body {
  font-size: var(--bs-body-font-size);
}

h1, .h1 {
  font-size: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
  h1, .h1 {
    font-size: 2.5rem;
  }
}

h2, .h2 {
  font-size: calc(1.325rem + 0.9vw);
}
@media (min-width: 1200px) {
  h2, .h2 {
    font-size: 2rem;
  }
}

h3, .h3 {
  font-size: calc(1.3rem + 0.6vw);
}
@media (min-width: 1200px) {
  h3, .h3 {
    font-size: 1.75rem;
  }
}

h4, .h4 {
  font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
  h4, .h4 {
    font-size: 1.5rem;
  }
}

h5, .h5 {
  font-size: 1.25rem;
}

h6, .h6 {
  font-size: 1rem;
}

[danielfdickinson]

If applied with html left as in the base Cupper theme., that results in:

If I remove the html setting from Cupper the font size is far too small, in this scenario.

So, an improvement, but not ideal. The reason for code I proposed is to keep the width of text in characters at about 55 (configurable) as various sources suggest that is the best practice for typograph (a link that includes references to various sources is: https://baymard.com/blog/line-length-readability (I had heard of the 55-character rule elsewhere, this was just particular article is just a quick search result for a more detailed explanation).

The comments section is interesting, and I may be updating my proposal as there is quite a few ideas that I have not had a chance to look at yet.

Also, I have not yet figured out how to detect pixel density (which is the real issue here) with pure CSS, so if you have any information on that topic, please share.

[zwbetz-gh]

As for optimal line length, in my blog I use max-width: 68ex; which is the prose default in USWDS.

I've been thinking about this issue more, and I don't plan to make typography changes to the theme. Am closing this issue.

Feel free to make your changes in your copy of the theme.

[danielfdickinson]

That's fair enough. I'm thinking some of the other changes I was thinking of submitting might not be what you want either (if you look at https://www.thecshore.com you can let me know if I'm right on that), in which case I might be best to fork (with due acknowledgments of course). Thank you for your great work, though.