Typography
Users spend a significant amount of time interacting with our application by reading. In data rich applications, typographic density and clarity have crucial roles to play. A clear hierarchy of text styles is important to allow for easier navigation.
Roboto
Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.
- Bold
- Regular
- Italic
Type Scale
A typographic scale is important to building the means of creating balanced and harmonious font sizing.
H1
26px, Roboto Regular
No Problem can be solved from the same level of consciousness that created it.
h1 {
font-family: "Roboto";
font-size: 26px;
line-height: 32px;
color: #3d454e;
}H2
22px, Roboto Medium
No Problem can be solved from the same level of consciousness that created it.
h2 {
font-family: "Roboto";
font-size: 22px;
line-height: 27px;
color: #3d454e;
}H3
18pt, Roboto Regular
No Problem can be solved from the same level of consciousness that created it.
h3 {
font-family: "Roboto";
font-size: 18px;
line-height: 20px;
color: #3d454e;
}Body
14pt, Roboto Regular
No Problem can be solved from the same level of consciousness that created it.
body {
font-family: "Roboto";
font-size: 14px;
line-height: 18px;
color: #3d454e;
}Highlight Bold
14pt, Roboto Bold
strong {
font-family: "Roboto";
font-size: 14px;
line-height: 18px;
font-weight: bold;
color: #3d454e;
}Italic
14pt, Roboto Italic
em {
font-family: "Roboto";
font-size: 14px;
line-height: 18px;
font-style: italic;
color: #3d454e;
}Caption
12pt, Roboto Regular
small {
font-family: "Roboto";
font-size: 12px;
line-height: 16px;
letter-spacing: 0.5px;
color: #3d454e;
}