Largest font for a mobile device?

HTML & CSS
1

Hi there,

I am designing a main banner section for a website and wondered what the maximum font size should be for a h1 tag on a mobile device? I have set the size to 68px which is on a 8 letter word.

Is this ok, or should it be smaller?

Thanks.

2

The usual standard for a small device is 320px wide.
Try viewing your heading in the browser dev tools at that width. Does it look OK?

3 Likes
3

Thanks. That seems quite small. I will have a play around

:open_mouth:

4

At 68px font-size only 5 letters fit across my mobile and there are smaller screens than mine as Sam mentioned.

Why do you need the text so large and how large are you going to make it on desktop?

Maybe you could look at vw units for font-size with a clamp() to control min and max sizes.

e.g.


font-size: clamp(2rem, 10w, 6rem);

It takes a bit of fiddling around but can produce some good results.

4 Likes
5

Thanks, I will have a play. I tried it smaller and thought it looked too small. :confused:

6

@PaulOB what does clamp do?

7 
clamp(minimum, preferred, maximum);

Details:
https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()

3 Likes
8

Just wanted to toss into the conversation, and @PaulOB already briefly hit on it, you should probably be experimenting with font size units in rem/em rather than px, especially for mobile. Just so that the font sizes will adjust to the various screen sizes and resolutions. :slight_smile:

3 Likes
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.