[Support request] Fonts for mobile

[Sonja]

If i set typographie font and font size, then this settings appears on desktop and on mobile. But is this right? I thought, that on mobile the font size has to adapt to smaller screen size.

[David]

Hi there,

only the H1 and H2 Headings have a mobile font size, the body remains the same across all devices. If you want to adjust it for mobile then we can add this CSS:

@media (max-width: 420px) {
    body {
        font-size: 16px;
    }
}

The usual mobile breakpoint is 360px i up it to 420px to include the Plus size phones.

[Sonja]

Okay, thanks. But why do you have decided, that only the H1 and H2 have a mobile font size? Is it not recommended, to have mobile font size for the body text?

[David]

GP tries to keep things as light as possible. It only introduces extra customiser conditions if there is a great demand from the community.

Body font sizes generally remain the same across devices. I rarely change them.
H1 and H2, the most commonly used headings, and they do vary quite considerably across devices.

Tom has been looking at this for possible future updates. Any opinions or ideas are welcome 🙂

[Sonja]

I am not an expert on such things, but I think, that the font size, line height, etc. should work automaticly for all devices.

What do you think of the golden ratio? (grtcalculator.com) Is this something to build in the theme? Or is this not advisible?

[David]

Golden Ratio typograpghy is a great foundation for setting out your typography requirements. I generally use it for the basis of text rich sites. Particularly if i am using a single font. Or fonts that have the same ‘sizing’.

The tricky part when using different fonts is they can vary wildly in size, unlike traditional typesetting. Which creates a problem when trying a ‘one size fits all’ approach. Also the more ‘creative’ designers like to ignore rules.

Hence the reason we prefer to keep the system simple which in turn provides flexibility for all. If you really want to blow your mind on responsive typography, this is an interesting article:

https://www.smashingmagazine.com/2016/05/fluid-typography/

[Sonja]

Okay, but I think, that I don´t understand the Golden Ratio.

For a new site with GP, i want the Roboto font and have a 900 px container.

If i put these numbers in the Golden Ratio calculator, i get very big fonts with Font Size: 27 and Line Height: 44.

Can this be correct?

I also dont understand these numbers for the settings:

Golden Scale for 27 @ 900
71/101
56/82
44/66
34/53
27/44
21/36

Also, if i take the 27 font size, then this can never work on mobile. How would I calculate this?

[David]

OK, so with that calculator if you don’t specify a font size then it aims to achieve the optimum CPL (characters per line) which is 76. Hence the huge font size. Personally i would work with 18px font size for Roboto.

This would mean – font size / line height / line height in EMs.

H1: 47 / 67 / 1.42
H2: 37 / 54 /1.46
H3: 29 / 44 / 1.51
H4: 23 / 36 / 1.56
Body: 18 / 29 / 1.6

Then for mobile i would probably only change the H1 and H2 and would set them to H3 and H4 sizes respectively.

[Sonja]

Ah, okay, thanks. I thought this tool calculates for me the best font size, so i don´t have to specify.

But how to understand the line height? Because in customizer i have a line height 1,5. Is this a different measure?

[David]

Its designed about readability the optimum width of the container so i generally work with around 700px container width (taking into account padding) to get around 60-70 CPL on a 18px font size. Depending on font that is.

Yes, sorry the line height is based on EM sizes. Which is another web font unit, if you’re body font is 18px then 1 em = 18px. So to get a line height of 29 you would need 1.6 em (that is 29 / 16 ) – i updated the table above 🙂 Personally 1.5 to 1.6 as a standard rule and apply them to all.

[Sonja]

Thanks a lot. This was good explanation and i have learned something 🙂

[David]

I am glad to be of help, its a good day when something new is learnt 🙂

[Author]

Posts