How to reduce text size on your responsive website or email

Today’s topic is,

How to reduce text size on your responsive website or email

In this tutorial, I would like to show you how to reduce text size or increase the same when one of your web application is viewed on a Mobile devices with Responsive environment.

So, how do we reduce text size when responsive?

Reduce text size when responsive - PepFry

Reduce text size when responsive

It is very simple. Before you go through this tutorial, please have a look at my previous tutorial on Responsive techniques.

1. You need to have you media query within the style sheet or your embedded styles.
2. Set it to a max-width of 480px – Only, if you applications is built for an iPhone. Else feel free to change to the maximum width
of your targeted device. Even you can write multiple media queries.

I’ll take up this scenario, where you have access to only Embedded styles.

Wherein, you have a paragraph of text in the regular version[Desktop version] [The non-responsive version] with huge font-size and line-height as seen below:

But, when you display the same text on a mobile device – it might look very huge. In-order to avoid that, we’ll set a default font-size and line-height for the same paragraph which much smaller and which looks good to go with Mobile devices when its responsive.

Please see below for the query and the style that you have to embed.

If you have more than 1 device to target, then here you go:

In the above styles – you might see ‘!important‘. It is very important to be placed there always. Else the font-size won’t be reduced to you requirement.

You will also see that – Color doesn’t have !important. Because, it wasn’t used in the inline style before. So, no need to apply !important.

Because,

The <p> tag contains inline styles which is the top most prioritized styles among the 3 types.

Here is the hierarchy of consideration of styles

What !important does?

It is telling that instead of considering the styles that has been written inline within the paragraph, consider the styles that has been embedded into the media query. !important – Is telling the parser that the styles that has been embedded into the media query is important than any other style for that particular element in the whole web page.

See the screenshots for your reference:

1. Regular non-responsive version

Reduce text size when responsive regular - PepFry

Reduce text size when responsive – regular version

2. Responsive version @ max-width of 800px

Reduce text size when responsive 800px - PepFry

Reduce text size when responsive @ max-width of  800px

2. Responsive version @ max-width of 480px

Reduce text size when responsive 480px - PepFry

Reduce text size when responsive @ max-width of 480px

Hope that clears the doubt. If there anything with regards to this tutorial “How to reduce text size when responsive” – please let me know.

This is one of the way to accomplish the task. There are several dynamic way out  which will be highly integrated with dynamic elements and properties. As far as I see this – this is the better and the simple way to accomplish your requirement. Few are listed below:

The above sites tell you the alternative and dynamic ways to reduce text size or vice-verse.

Any question – please write back to me, I’ll try to answer it asap. Hope to see your positive suggestions as well.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">