Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Typography for Responsive Design or RWD Typography

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 364
    Comment on it

    Typography for Responsive Design or RWD Typography

    Hello Friends,

    As we all know that, Responsive Design is a very popular technique and most using concept in web design. A responsive design giving us a flexible layout by adjusting images and the other sections. But what about typography of a web page? Shouldn't we need font automatically adjust as per the different resolutions and device orientation.

    So Today I am sharing some method to help us to achieve a more readable typography regardless of device orientation or different resolution.

    What is Typography?

    " 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

    Basically the creation of Responsive Web Design centered on 2 key techniques.

    1. Fluid Grids
    2. Adaptive Layouts

    Unfortunately, these 2 techniques only helps to maintain the scaling and size of the specific design content like images, layout and videos to fit with the device or orientation. But when we move on to 'typography' of any design, it will not change. so to resolve the typography responsive problem, there are few methods we can adopt.

    Responsive Typography Methods -

    • Fluid Typography With CSS3 Elements

    • Responsive typography with REMs

    • Modern Scaling for Web Typography

    In this blog, I'll talk about Fluid Typography through CSS3 Elements. I'll cover entire points related to this method.

    1. Fluid Typography through CSS3 Elements

    The first method to implement typography is CSS3 Element. CSS3 new feature helps to set the font style, type, size proportionally to the device size or screen orientation. There are few elements which comes in this categories.

    • 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.

    Unit

    Description

    vw

    stands for view-port width

    vh

    Stands for view-port height

    vmin

    equal to the smaller of 'vw' or 'vh'

    vmax

    Equal to the larger of 'vw' or 'vh'

    "The view-port percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly."

    1vw = Equal to 1% of the width of the initial containing block.
    1vh = Equal to 1% of the height of the initial containing block.
    1vmin = Equal to the smaller of vw or vh
    1vmax = Equal to the larger of vw or vh.

     W3C Values and Units Module Level 3

    For Example-

    As per the above details, below example clears the point that if width of view-port is 1200px, then the font-size of the h1 will be 36px.

     h1  { font-size: 3vw; }
    

    Formula is -

     '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; }
        }
    

    End of this Session

    In this session, we covered the overview of Typography and details relevant points of Fluid Typography through CSS3 Elements. In next session, we talk about another methods of Responsive typography.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: