Archived topic
Best practices for typography
4 replies · Started by Lisa on February 9, 2022
Are there guidelines or "best practices" to use when setting up typography?
I see that I can use px, em, rem, or percentage - is there a better one to use to keep my GP site responsive?
Also wondering if there is a way to set up typography for laptop, and then set up for mobile based on what I chose for laptop. Like - can I say - just use the laptop display but at X% for mobile.
If there's a good guide out there that you can point me to so I can - for once and for all!! - understand what I'm shooting for with typography and can just set-it-and-forget-it (and keep my site speed up!), I would be forever grateful for that intel.
THANK YOU!
Hi there,
we only have our official docs inc. YT Video to share regarding typography:
https://docs.generatepress.com/article/dynamic-typography-overview/
Best Practices - there are many and vary from one designer/developer to another.
And that includes which units you choose from. And in that regard they can ALL apply the same responsive behaviours.
If you don't like Maths and want a quick and easy way to understand what the font size is then stick to Pixels.
If you like Maths and Typescales then use REMs:
By default ALL browsers have a default REM value. In all Modern Browsers that is generally 16px.
In the typescale site its referred to as the Base Size.
In GP Customizer > Typography you can change its value by using the HTML Element in Add Typography.
So heres why you may want to use REMs.
Lets Add Typography > HTML Element and set the font sizes in Pixels as such:
18px (D), 17px (Tablet), 16px (Mobile)
Now when we add Typography > Body we can just set the Desktop size to 1 REM
It will now be respond to the various rem sizes on each screen size, 18px > 17px > 16px.
Repeat that for your headings :)
Advantage of that is you don't have to individually set each Tablet and Mobile font size for every element.
Disadvantage can be - its not easy to tell what font size ACTUALLY is at a glance....
Thanks David, it is helpful to me as well. Regards.
Thanks so much David. Super helpful.
Need to say it: I am loving Generate Press! All of it - from my site built on GP to the support I have access to.
Thanks again!
Really glad to hear that!!
