I have been working in another interesting Responsive Web Design and Mobile First challenge 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. That’s way CSS is an important part of the performance.
Another approach is using the media queries v4 definition measures: pt, px, %, 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.
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
Let’s see what we can do so far:
On this demo I’m using fittext.js, ’em’, ‘rem’, ‘vw’, px, % and other relative unit measures.
Note: Trick is, you need to reload the page in order to the ‘vw’ make the change
Now, let’s see using just preprocessors (LESS in this case)
Using pre-processors to store the values on variables and increase them
LINK FULL SCREEN DEMO
Change the screen with to view the effect
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):
A non Preprocessor solution using “calc()”
Wanna talk about it:@leolaneseltd