QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Bitcoin BankingBuy, Sell, Store and Earn Interest
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Responsive Typography Techniques

Responsive Typography Techniques

responsive-typography

One of the most important components of responsive design is responsive typography. Web designers have many different approaches to implement responsive typography. Some designers use external libraries and some do it natively. In this post I will discuss all native techniques used by web designers to get responsive typography.


There are basically three ways to get responsive typography: CSS Media Queries, CSS Responsive Units and CSS Relative units.

Responsive Typography Using CSS Media Queries

A responsive website is designed to fit across multiple screen sizes using media queries. Similarly we can use the media queries to declare different font size for different screen sizes.

An example of responsive heading using media queries:

            /* viewport-width >= 1200 */
            @media screen and (min-width: 1200px)
            {
                h1
                {
                    font-size: 100px;
                }
            }
           
            /* viewport-width >= 992px and viewport-width <= 1199px */
            @media screen and (min-width: 992px) and (max-width: 1199px)
            {
                h1
                {
                    font-size: 80px;
                }
            }
           
            /* viewport-width >= 768px and viewport-width <= 991px */
            @media screen and (min-width: 768px) and (max-width: 991px)
            {
                h1
                {
                    font-size: 60px;
                }
            }
           
            /* viewport-width <= 767 */
            @media screen and (max-width: 767px)
            {
                h1
                {
                    font-size: 40px;
                }
            }

Responsive Typography Using CSS Responsive Units

There are some CSS units which depend on viewport size. Therefore they scale according to the viewport size.

These units are: vw, vh, vmin and vmax.

1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger

An example of responsive heading using using CSS responsive units:

            h1
            {
                font-size: 5vw;
            }

CSS responsive units are not yet supported by all browsers. Therefore its very risky to use it. All websites I have seen till now use media queries to implement responsive typography.

CSS Relative Units with CSS Media Queries

em and rem are called css relative units.

em is relative to the font size of parent element. 1em is equal to the current font size of parent element. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 10 px, then ‘2em’ is 20 px. We can achieve responsive typography by just changing the parent element’s font size using css media queries for different viewport sizes.

<!doctype html>
<html>
<head>
<style>
@media screen and (min-width: 1200px)
            {
                body
                {
                    font-size: 12px;
                }
            }
           
            /* viewport-width >= 992px and viewport-width <= 1199px */
           @media screen and (min-width: 992px) and (max-width: 1199px)
           {
               body
               {
                   font-size: 10px;
               }
           }
           
           /* viewport-width >= 768px and viewport-width <= 991px */
           @media screen and (min-width: 768px) and (max-width: 991px)
           {
               body
               {
                   font-size: 8px;
               }
           }
           
           /* viewport-width <= 767 */
           @media screen and (max-width: 767px)
           {
               body
               {
                   font-size: 6px;
               }
           }

h1
{
   /*parent element is body*/
   font-size: 2em;
}

h2
{
   font-size: 1.5em;
}

h3
{
   font-size: 1.3em;
}
</style>
</head>
<body>
<h1>Hello</h1>
<h2>Hello</h2>
<h3>Hello</h3>
</body>
</html>

Problem with em is that em sizing is nested(depends on parent element). Thus, if you have elements with 1.5em and then nest some HTML with elements that also have an em declaration, their sizing multiplies.

rem is the rescue to em. rem is relative to the font size of HTML tag(root element). Therefore its not nested. It works the same way as em unit. But the problem with rem is that its not supported by some old browsers. So if you are using it then don’t forget to provide a backup or else use this polyfill for rem unit called as REM Unit.

<!doctype html>
<html>
<head>
<style>
@media screen and (min-width: 1200px)
            {
                html
                {
                    font-size: 12px;
                }
            }
           
            /* viewport-width >= 992px and viewport-width <= 1199px */
            @media screen and (min-width: 992px) and (max-width: 1199px)
            {
                html
                {
                    font-size: 10px;
                }
            }
           
            /* viewport-width >= 768px and viewport-width <= 991px */
            @media screen and (min-width: 768px) and (max-width: 991px)
            {
                html
                {
                    font-size: 8px;
                }
            }
           
            /* viewport-width <= 767 */
            @media screen and (max-width: 767px)
            {
                html
                {
                    font-size: 6px;
                }
            }

h1
{
    /*relative to html tag*/
    font-size: 2rem;
}

h2
{
    font-size: 1.5rem;
}

h3
{
    font-size: 1.3rem;
}
</style>
</head>
<body>
<h1>Hello</h1>
<h2>Hello</h2>
<h3>Hello</h3>
</body>
</html>

Jun 5, 2014Narayan Prusty
Create Raining Effect using JavaScriptWordPress Custom Meta Boxes Tutorial
Comments: 0

    Leave a Reply Cancel reply

    To create code blocks or other preformatted text, indent by four spaces:

        This will be displayed in a monospaced font. The first four
        spaces will be stripped off, but all other whitespace
        will be preserved.
        
        Markdown is turned off in code blocks:
         [This is not a link](http://example.com)
    

    To create not a block, but an inline code span, use backticks:

    Here is some inline `code`.

    Narayan Prusty

    I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

    Image6 years ago 1 Comment Web Development
    Share this
    0
    GooglePlus
    0
    Facebook
    0
    Twitter
    0
    Linkedin
    • Responsive Typography Using CSS Media Queries
    • Responsive Typography Using CSS Responsive Units
    • CSS Relative Units with CSS Media Queries
    • Hello
    • Hello
    Related Articles
    • Web Typography Best Practices and Style Guide Tutorial
    • Media Queries Tutorial
    • Facebook Style Chat Box Popup using JavaScript and CSS
    • iPhone 6 Media Query
    • Styling Text using CSS
    Our Sponsor
    Freelance: I am available
    @narayanprusty
    Hi, I am a full-stack developer - focusing on JavaScript, WordPress, Blockchain, DevOps, Serverless and Cordova. You can outsource your app development to me.





    Will get back to you soon!!!
    WordPress
    ReactJS
    Meteor
    Blockchain
    Serverless
    Kubernetes
    DevOps
    DB & Storage
    Ejabberd
    Let's get started
    My Books

    2014 - 2015 © QNimate
    All tutorials MIT license