RWD Typography
Lasts days I have been working in another interesting Responsive Web Design and Mobile First project where the client required to create a fluid font to auto adapt to the environment, problem was they have like 10 different environments, and what that’s mean is “10 different font sizes” to work with.
Of course we can create 10 @media queries and define the specific font-size, but want to make it better.
An option is to use the fittext js library to create a fluid font increasing and decreasing depending on the side of the screen, but we are going to rely on javascript for delivering the content, our core and business goal. We want to make it progressive orientate.
Another approach is using the media queries v4 definition measures: vm, vh and vmin.
The vw unit
The vw unit (viewport width) is equal to 1/100th or 1% of the width of the viewport.
The vh unit
Similar to vw, the vh unit (viewport height) is equal to 1/100th or 1% of the height of the viewport.
The vmin unit
This unit is 1/100th or 1% of the minimum value between the height and the width of the viewport.
Posible solution
The best solution is always depending on your project, for our project the best approach was a preprocessor. You end up using variables and increasing the font-size within the @media queries
DEMO
On this demo I’m using fittext.js, ’em’, ‘rem’, ‘vw’, px, % and other relative unit measures.
Click to view the example on full-screen
Note: Trick is, you need to reload the page in order to the ‘vw’ make the change
DEMO
Using pre-processors to store the values on variables and increase them
LINK FULL SCREEN DEMO
Change the screen with to view the effect
<hr>
Browser support
Currently, these units are only supported in Chrome 20+, IE9+ and Safari 6. To follow-up on browser implementations, take a look at http://caniuse.com/viewport-units.
Get the software (there are few ways to install the preprocessor):