Methods for setting font size based on screen size

This topic has 1 reply, 2 voices, and was last updated 7 years, 7 months ago by Sebastian.

Author	Posts

Norm6257 August 24, 2017 at 5:01 pm	Heads up! this post was created when Microthemer was at version 5. The current version is 7. Some references to the interface may be out of date. Hi… I have a site design that looks good on a desktop. This question is regarding how to change font size based on the screen size. On the desktop view, I have h1 set to a font size of 40px which looks good there for my purposes. But when viewed on a mobile device the font size of 40px is too large so I would like to set it smaller. What are the best methods for setting the h1 font size smaller when viewed on a mobile?
Sebastian August 25, 2017 at 9:02 am	Hey, If you have created a selector for the h1 and set font-size to 40px via the All Devices tab, the simplest option would be to click on the Tablet or Phone tab and set the font-size to something lower. Maybe a gradual decline from Tablet to Phone. Another option is to focus on Typography more globally. You could create a folder called Typography, and then create broad selectors for all headings inside it. By broad, I mean just the h1, h2 stuff. Rather than e.g. .sidebar h3. You can then set the font-size of text at different screens sizes site-wide, using the responsive tabs as I explained above. Does that make sense and possible?

Author

Posts

Norm6257 August 24, 2017 at 5:01 pm

Heads up! this post was created when Microthemer was at version 5. The current version is 7. Some references to the interface may be out of date.

Hi… I have a site design that looks good on a desktop. This question is regarding how to change font size based on the screen size.

On the desktop view, I have h1 set to a font size of 40px which looks good there for my purposes. But when viewed on a mobile device the font size of 40px is too large so I would like to set it smaller.

What are the best methods for setting the h1 font size smaller when viewed on a mobile?

Sebastian August 25, 2017 at 9:02 am

Hey,

If you have created a selector for the h1 and set font-size to 40px via the All Devices tab, the simplest option would be to click on the Tablet or Phone tab and set the font-size to something lower. Maybe a gradual decline from Tablet to Phone.

Another option is to focus on Typography more globally. You could create a folder called Typography, and then create broad selectors for all headings inside it. By broad, I mean just the h1, h2 stuff. Rather than e.g. .sidebar h3. You can then set the font-size of text at different screens sizes site-wide, using the responsive tabs as I explained above.

Does that make sense and possible?

You must login or register to reply to this topic.

Methods for setting font size based on screen size

Support