I am trying to make a theme for Hugo for a simple blog. But I don’t know what the standard practices for setting font size for the main text are. Right now I have left them untouched so they default to whatever you have set on your browser. But this doesn’t seem good because browser font size is usually set to something smaller than legible.

Is it desirable to set font size by the way of absolute numbers (like 22px)? I don’t know how this would translate over different screens with different resolutions. I also know how to make responsive changes in CSS but I don’t know what are good numbers to set font sizes to.

Vague question but any help is appreciated.

edit: I would much prefer to be able to use the set browser size for reference at least because I don’t wanna push my taste on other people. Same with font-families.

  • Maya
    4·
    4 years ago

    This is tricky, because while the Savvy User will know how to configure their browser for their preferences, a lot of people roll with what MS/Apple/Google gave them without knowing that anything different is possible. Whatever you end up with, I recommend testing out how it looks with the browser zoomed in, because that’s used by some people who don’t know about font size settings.

    • 0x1C3B00DA
      2·
      4 years ago

      +1 for testing zoom levels. I’m a more savvy user, but I use some sites zoomed in just because I like the layout better. It tends to cause sites to render in two columns, instead of three on larger displays which means the main content has more screen real estate.

  • Maya
    4·
    4 years ago

    I was just looking into this because I want to replicate the nostalgia of early 2000s websites I remember, but monitor resolutions are so different now that matching the effect is hard! It seems crazy to be trying to look up old monitor PPI stats to figure out what the visual height of 11pt Arial (or whatever) really showed up as…

  • DessalinesA
    3·
    4 years ago

    Bootstrap uses font-size of 16px (1rem), and a line-height of 1.5. I think they did a lot of research into the best reading font sizes, so that’s probably good to go with.

    • ksynwaOP
      2·
      4 years ago

      hmm this looks good albeit a bit daunting lol

      thanks a lot for sharing. bookmarked.

      • imperator
        2·
        4 years ago

        It’s a deep read, for sure. It’s made easier by the fact the author has a short blurb under the page heading in the upper left that summarizes the entire page you’re on.

  • Maya
    3·
    4 years ago

    Also!!! It turns out you can use the set browser size for reference. You probably want to scale everything with rem instead of px or pt, and then try passing different preferences in the user agent. Chrome is really good at messing with this kind of thing even if you don’t use it normally

    • ksynwaOP
      3·
      4 years ago

      Nice. I will keep in mind the thing aboht rem. For now, I went to the site for Practical Typography (linked in one lf the comments here) and copied their CSS lines pertaining to font sizes.

  • anon8008
    2·
    4 years ago

    Common practise is to use the browser’s default font-size and scale the website using em and rem units (among others).

    E.g. Chrome and Firefox have a default font-size of 16px. This is a good start. If you would like to increase that font size on bigger screens (non-mobile) you can use a media query and scale it up based on screen size.

    When prototyping I often start off with a small screen (portrait phone) as default with a font-size of 1rem and increase it using breakpoints such as these: https://getbootstrap.com/docs/4.5/layout/overview/#responsive-breakpoints

    Example: Serif fonts have extra details which are easier to distinguish at a slightly higher font size. I set the base font-size at 1rem (16px), on tablets and up a font-size of 1.125rem (18px), on desktops we scale it up even further to 1.25rem (20px), etc. I would recommend not to set the body font-size too large, as some people with bad sight or sitting further from their monitor may have their browser set to zoom. Unless I use special typefaces I tend to stick with 16-24px for body font-size. Everything else on the design scales based on that.

    Optionally you can set the body font smaller (e.g. 12px) in your print stylesheet if printing is desired.