" Typography is the art and technique of arranging type to make written language readable and appealing. The arrangement of type involves selecting typefaces, point size, line length, line-spacing (leading), letter-spacing (tracking), and adjusting the space within letters pairs."

-Wikipedia

• By Using Readable Font Face

This method is approaching CSS font family element by adding web based fonts to make content more elegant and readable. This approach is based on CSS3 @font-face element which add custom web fonts, those are not a common system fonts. A great font-face make text more readable and clean, which make the proper visualization of content in any device size.

Example:-

   @font-face  {   
        font-family: ''proxima_nova_rgbold';        
        src: url('proximanova-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('proximanova-bold-webfont.woff') format('woff'),                   
         url('proximanova-bold-webfont.ttf') format('truetype'),               
         url('proximanova-bold-webfont.svg#proxima_nova_rgbold') format('svg');
    }

To implement the font-face, we need to generate a proper kit of Font-face with at least three font files such as- eot, woff, and truetype. It is require because of the diversity of font formats support by the browsers.

We can use online tool to generate this kits. One of the popular Font-face kit generator is Font Squirrels Font-Face Generator.

• Using CSS View-port Units

CSS3 introduced one more new kind of typography units. We can achieve responsive typography by using 'view-port CSS units': vw, vh, vmax, and vmin.

 h1  { font-size: 3vw; }

 'vw'  or 'vh'  *  view-port size/ 100

 Let  see, how it works : 3*1200/100 = 36 px

• Using media queries

The last and very well-known approach to make text responsive is CSS3 Media Queries.

This method is an adaptive approach of setting different breakpoints as per the device width by implementing media queries.

For Example-

Setting "h2 tag" font-size for different screen sizes by setting different breakpoints.

    body  { font-size: 100%; }

    ------------------------------------------------------------------

    h2 { font-size:26px ; }

    ------------------------------------------------------------------

    @media screen and (max-width: 480px)  { 
        h2 { font-size: 15px; }
    }

   ------------------------------------------------------------------

    @media screen and (max-width: 768px)  { 
        h2 { font-size: 24px; }
    }

    ------------------------------------------------------------------

    @media screen and (min-width: 960px)  { 
        h2 { font-size: 30px; }
    }