What do you use for the base font size?

8 months ago from , Web Developer @ rakun.ie

I'm a designer/developer and just introduced myself to responsive typography (and the rem, em in general). So, I am wondering what works for you as the best font size for your website for mobile, medium and large screen size.

*at the moment I have 16px for mobile, 20px for medium & 24px for large screens

11 comments

  • Taurean BryantTaurean Bryant, 8 months ago

    I set html to 10px, then set everything else in rem units. eg. body would be 1.6rem, it makes it all extremely easy to calculate.

    4 points
  • Freckley FrecklesonFreckley Freckleson, 8 months ago

    It indeed does depend. If you're working on a data-heavy website then between 13 and 15px, if it's a website that allows for space to play with then 16px. Mobile I'm not as confident with.

    1 point
  • Dirk HCM van BoxtelDirk HCM van Boxtel, 8 months ago

    It depends. (Gosh, it's a good thing I love those two words!)

    Really depends on the width of the site. Font-size should be such that your paragraph blocks should be about 50-90 characters wide, if you want to optimise readability.

    .edit: adjusted the numbers a wee bit (down from 75-120!)

    1 point
    • Levi Whalen, 8 months ago

      I believe that is too long actually. Studies have shown that the optimal length is 50-60 characters wide -- with some exceptions up to 75. Read more about the study from Baymard Institute -> https://baymard.com/blog/line-length-readability

      :)

      3 points
      • Larry IoannidisLarry Ioannidis, 8 months ago

        Thank you for sharing the link. Really good read.

        0 points
      • Dirk HCM van BoxtelDirk HCM van Boxtel, 8 months ago

        And that's fine! Over time I've found different (contradicting) sources on the matter too and honestly, I believe it has a lot to do with other factors as well. It's all about how easily you interpret the words on the screen, so anything can distract:

        • Multiple columned layouts
        • Images next to text
        • What the font looks like (weight, style, family, etc)
        • How big your paragraphs are

        And if we go technically, I bet the length of the words you use changes how we read it too. If you think about it, it's all just about interpreting shapes. Sometimes more shapes can be beneficial, sometimes it makes it harder to distinguish individual elements (words, sentences, paragraphs).

        Point remains - ensure there's not too many characters on a line by making width depend on the number of characters :)

        This is where I think talent will trump knowledge. At some point you run out of knowledge or have contradicting sources, and you'll have to make a judgement call!

        1 point
    • Larry Ioannidis, 8 months ago

      Thank you. Interesting input.

      1 point
  • Ibrahim NergizIbrahim Nergiz, 8 months ago

    16px for all screens :)

    0 points
  • Stefano TirloniStefano Tirloni, 8 months ago

    it depends on the font you're using.. for example, fonts with a small x-height should be "bigger"

    0 points