RWD Typography
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.
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: 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.
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
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.
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
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
<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):
PC Windows
MAC OSX
http://incident57.com/codekit/
A non Preprocessor solution using “calc()”
Support
calc() all mayor browsers, but Android
Final result
calc() is a very good option, I love the way it works. But is not fully supported, even so, we can always work on fall back, or just use Preprocessors instead, without any javascript.
Wanna talk about it:@leolaneseltd