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:
Font size H1
H2 font size in CSS
H3 font size in CSS
H4 font size in CSS
Visit brm.io/material-design-type/ to see full set of font sizes.
#development #font #CSS #webdesign #websites #tools #android #app #application #materialdesign #free
