How can I make my fonts responsive???

Member Avatar


How can I make my fonts responsive???


You mean changing font-size by using percentage base on the media-queries?

Something like this:

@media screen and (max-width: 480px) {

font-size: 50%;


I have make my responsive font for my website , you can try this.
body {font-size:100%}

h1 { font-size:6.2em;font-weight:500; }

1 <div class="row">
2 <div class="twelve columns text-center">
 4 </div><!-- End Tagline -->
5nn</div><!-- End Row -->

If you really want a good responsive font sizes, I would recommend using em instead of px. There's actually a simple formula for this.

target(initial px size) / content(usually 16) = result

So let's say your font size you want to achieve in pixels is 14. With most browser windows, the base font size is 16. In order to achieve this just simply use your formula.

target (14px) / content (16px) = result (0.875em)

So instead of setting your font-size to 14px - use 0.875em.

instead of using px or pic use em and % for your font size

use percentage like this :
font-size : 90%