- This topic has 3 replies, 2 voices, and was last updated 5 months, 2 weeks ago by David.
August 4, 2020 at 5:41 pm #1387609moy
I have been improving my skills on graphic designing for last couple of years but I never focused much on typography, due to which I am a bit confused, as for the first time I am designing a website.
For Last few days, I am searching for the best typography size for a website. Most of the bloggers are saying that, for content, typography 16 is best for mobile and for desktop it’s 14/13/12, but I noticed that
Most of the brand websites use similar typography pattern which I mentioned below.
a) navigation and footer widget typography is smaller than content typography size.
b) content typography size is around 14/13, even button typography size is different.
c) header typography H1 – 36, h2 – 32, h3 – 28, h4 – 24
d) mobile typography is around 16 but not smaller than 14
e) tags typography is smaller than 13
f) footer typography smaller than most all – maybe around 8 or 10
For Example –
each of these sites has different typography yet the typography is almost similar. there are so many varieties of typography, yet those are so beautiful.
(If I’m not mistaken, these are the settings widely used in websites. I tried to use these settings but in my website, I’m unable to adjust best typography settings, I feel like I can improve it more.)
I know this is outside of generatepress but a suggestion from professional is much more reliable than searching blogs. So I thought asking you would be much better. what I observed and what I read in many blogs about typography size is somewhat different.
So if you don’t mind, will you be able to give me your opinion regarding “what typography size should I use in content & headings in desktop and mobile?” I am using “open sans” for content, for widget navigation and footer – roboto, for headings – Montserrat. I used the typography size I mentioned above.August 5, 2020 at 3:44 am #1387987DavidStaffCustomer Support
Typography is a very subjective matter and there are a huge amount of variables to consider.
Best to start with font pairing. Personally i try use a maximum of 2 fonts for the global typography. That third font not only introduces more server requests but can really break typographical flow.
Choosing the right font pair can be tricky – fonts.google.com provides regular pairings for each font. But for good visual flow using fonts with a similar X-height really helps.
This tool is great for filtering google fonts to find x-height pairings:
Once you have your pairings you can use a typescale formula:
Major-third is nice for blogging.
Font size – you should never really drop below 16px for any ‘content’ – personally i like 18px as my body content. Smaller then 16px and you’re at risk of making your content hard to read especially for those with visual impairment. Reserve smaller fonts if you must for meta only.
And finally for optimization you can remove variants you don’t need – this will reduce extra requests:
Hope this helps.August 5, 2020 at 5:36 am #1388071moy
thank you soo much, this helps a lot. It’s much more informative than usual blogs about typography. thanksAugust 5, 2020 at 6:27 am #1388129
- You must be logged in to reply to this topic.