4

I've been trying to find a good way to define my font sizes, or to get some orientation on what sizes should I use when defining the font sizes for a responsive website (from small mobile phones to FullHd monitors).

I've been using (as a guide) the Google Material Style Guide, but (if I'm not wrong) it's focused on mobile only screen, which isn't very helpful.

What I've been doing is to define some use cases where I'll be using the fonts, and start to define the font size from the body with 16px as base, then I ended up with something like this:

  • Small/Caption: 12px
  • Body: 16px (base)
  • Icons: 18px
  • Subheading: 20px
  • Heading: 24px
  • Jumbo/Hero title: 34px

Note: I'm not asking about using px, em, pt, %, rem, etc.. I'm converting the font size to rem after the definition. But I need to have something to base my design on.

I know the base is recomended to be 16px for body text and I also know I should keep in mind line height, letter spacing, font weight, keep consistency across the pages, etc.. But I don't know if the method I'm using is correct, or acceptable, or where can I find a better orientation to define the font size of my design. I want to make it better for the users and also create a visual hierarchy or what is text, title, etc..

Also, I've noticed a lot of web sites using at least 2 different font family, one for titles and other types of text. Is it still a thing?

Just in case, the fonts I'm working with is Open Sans for title and Roboto slab for the other texts.

Improve this question
2
  • Material design is not focused on Mobile only. Check this section.
    – Alvaro
    Commented Jan 30, 2017 at 16:50
  • @Alvaro what i meant to say is, the whole guide uses mobile/app examples, also using units for mobile, instead of px, em or rem it's using dp/sp. This is why I tought it was focused on mobile.
    – CelsomTrindade
    Commented Jan 30, 2017 at 16:58

2 Answers 2

Reset to default
3

This will very much depend on other factors, such as style, mood, your target audience and so on, but a reasonable choice was always to use 14px for regular text, although nowadays the trend has changed to 16px with pretty huge line spacing. Please note the word trend, because I didn't choose it randomly.

Now, should you follow the trend? Well... it depends. If the site is one that will stand for years like that, I won't recommend it, because it will be dated next year or so. But if you know this can be changed in the future, then yes, go for it, this is one of those "benign" trends that are supported by research, so you can play safe on 16px and huge gaps between lines and lots of spacing

Just in case, here you have some insight on font sizes and UX:

Please note that BASED ON TESTING, I don't necessarily agree with everything that is said on those articles. However these articles will provide you a good start point. And in the end.... test, test, test!

PS: Just like Alvaro accurately pointed out, Material Design is not only about mobile, you can see the font sizes they recommend and the bigger ones are clearly for desktop. Although I agree they should make a more specific distinction on which font is better for which device

Improve this answer
1
  • I have in mind that the target audience have a big influence on the design, and therefore on the way I choose the font, style, etc.. But at my job most of the projects (more than 70%) are focused on corporate websites or e-commerce, so I'll have a solid information to base my decisions now. Thanks for the greate content you provided, this will help me a lot.
    – CelsomTrindade
    Commented Jan 31, 2017 at 11:46
0

Get a copy of the late Joseph Müller-Brockmann's Grid Systems in Graphic Design (Raster-systeme für die visuele Gestaltung). You can learn all you need to know from that book, and it will never grow stale.

Improve this answer
6
  • 1
    Could you copy and paste some of the relevant material into your post. As it is it's more of a comment than an answer.
    – Mayo
    Commented Jan 30, 2017 at 20:03
  • @Mayo I'm not sure that's legal. Or right. Would it be acceptable if MMacD further explained why the book is a worthy read rather than lifting sections of it that risk impacting sales of something that's obviously a work of love, passion, dedication, care and consideration?
    – Confused
    Commented Jan 31, 2017 at 12:07
  • 1
    Explaining is perfect but quotes are perfectly legal. They're covered under "Fair Use" which permits limited use of copyrighted materials.
    – Mayo
    Commented Jan 31, 2017 at 13:36
  • Limited use is for the purpose of criticism and commentary, right? Does it cover actual use of the content for its original intended usage? @mayo
    – Confused
    Commented Jan 31, 2017 at 15:36
  • 1
    @Confused - I'm not an attorney but this is commentary. If quotes such as this were against the law then a lot of posts on stackexhange, slashdot, quora and other places would be violations of the law.
    – Mayo
    Commented Jan 31, 2017 at 17:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.