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.