Material Design typeface in CSS

Our beloved Roboto typeface has been the standard typography on Android since the Ice Cream Sandwich release. Google recommends using Roboto as main typography for all applications that are built with Material Design language. As it is stated in Google’s Material Design guidelines, Roboto typeface has been “refined extensively to work across the wider set of supported platforms. It is slightly wider and rounder, giving it greater clarity and making it more optimistic.”

Typographic scale

One of the biggest problems that application developers face is that Google’s Material Design guidelines does not explain in detail sp, px, dip and dp scalability units. In official MD guidelines typography size is specified in sp (scaleable pixels) to enable large type modes for accessibility. Many of you may ask why sp but not dp (dp would be more useful working with programs such as Adobe Photoshop or Illustrator) ?
Here is a good explanation from stackoverflow.com:

The dp has constant ratio transition to px: dp = px * ratio. Where ratio will never change on any particular device.
While sp has scalable ratio: sp = px * ratio * scale. Where ratio never changes, but scale is user configurable. This scale can be used by people who need larger font sizes, for example, to use device more comfortably.

Finally, typeface in CSS

Google does not provide any canonical stylesheets or official CSS files for Material Design typography. So, how do we implement the units dp and sp in CSS (px)? You might have this issue building Material Design applications and setting font sizes in CSS. Thankfully, guys at brim.io did an amazing job and seamlessly converted sp version:

to the px/CSS version:

Now you can easily use Roboto typeface in web applications. Here is a short example:

CSS:
.h1 {
font-size:112px;
font-weight:300;
letter-spacing:-5px;
line-height:128px;
}
.h2 {
font-size:56px;
font-weight:400;
line-height:64px;
}
.h3 {
font-size:45px;
font-weight:400;
line-height:64px;
}
.h4 {
font-size:34px;
font-weight:400;
line-height:52px;
}


Result:

Visit brm.io/material-design-type/ to see full set of font sizes.

#development #font #CSS #webdesign #websites #tools #android #app #application #materialdesign #free

#Android #app #application #CSS #development #font #free #materialdesign #tools #webdesign #websites