Responsive Font Size CSS


As a layout and CSS specialist I often receive layout designs drawn up in Photoshop or Illustrator from various marketing or design companies who work for my clients.

Yesterday I received the first design layout that has been conceived for both desktop and mobile simultaneously. Although tablets and smart phones are second nature now, we still need to remember they have only been around for a few years. This is all new territory.

Its interesting to consider the amount of time needed to implement new technologies on websites. The introduction of new devices with a mirage of viewport sizes and resolutions really does literally add double the amount of coding time when building a website. Provision of the design in 2 different formats for desktop and mobile shows the clients are starting to accept that web design has a new (expensive) stage involved.

Responsive Web Design (RWD) is constantly developing, so (as long as i’m getting paid my hourly rate) I love to find new implementations and ways to achieve my clients needs using the latest code.

Today I have discovered real scaling text. A font-size attribute that will literally scale the text in front of the users eyes as they drag their browser window in/out.

Its all to do with the new CSS3 unit of measurement VW or Viewport Width. This is a new value that is part of the Viewport Sized Typography rules.

A VW declaration would look something like font-size:2.5vw; This would mean the font size would be 2.5% of the viewport width.

Of course you’ll need a bit of Jquery to make the transitions smooth. Get the code from CSS Tricks

Don’t forget to check out my website if you need a freelance layout and css specialist www.myfineleaf.com.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s