Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Relatives font sizes in css

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 299
    Comment on it

    Hi Readers,
    In this blog, I am going to discuss relatives font size in CSS as per screen resolution.
    Being a ui developer one should have proper knowledge about all the measurement units while making a responsive design using CSS.


    First of all we should know the difference between different measuring units we use,here's the following :
    1in == 96px;
    1cm == 37.8px;
    1mm == 0.1cm == 3.78px;
    1em == 16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm;
    1vw = 1% of viewport width
    1vh = 1% of viewport height
    1vmin = 1vw or 1vh;
    1vmax = 1vw or 1vh;
    1pt =  1/72 in;
    1pc = 12pt;

     

    You can use any of the above mentioned measurement but usually 'px' is preferred as best measuring unit when we have to use it for CSS design.
    This measuring unit is provided for device pixels as it is a non-linear angular measurement i.e CSS design isn't dependent on screen pixels.
    There are different kind of measuring units like 'in','cm', 'pt', 'pc'  and 'mm' are physical measurement but when we use them is css they are  mapped to a pixel.  
    whereas in css, such as 'em', 'rem' are relative measurement units.
    'ex' is a type of measuring unit which is measured on the basis of x-height of the current font.
    ch is a type of measuring unit which is measured on the basis of the width of the  zero (0) character.
    Note:em doesn't change when we change the font-family whereas ex and ch units change when we change the font family.

     

    How to decide which font size is suitable for users to read the text in  mobile view?

    We can't predefine any fixed font size while designing a responsive design because  text view not only depends on font-size but also on font weight and font-family, that's why while making a responsive design we should always keep in mind that only responsive view is not important for a good design but readable font size as per screen resolution also plays a vital role.

     

    for example:

    In mobile view we can't keep font-size of text less than 8px, because 8px is the minimum font-size limit for any user to read text clearly and properly without any pressure on his/her eyes but that doesn't mean that 8px font-size will be readable always, because as mention above font view of different font-family is different.
    word spacing and line height also play important role while designing responsive design with clear readable text.

 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: