Material Admin uses Roboto as the standard typeface. Roboto 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.
Roboto supports the languages that use the Latin, Greek, and Cyrillic scripts.
Too many type sizes and styles at once can wreck any layout. A typographic scale has a limited set of type sizes that work well together along with the layout grid. The basic set of styles are based on a typographic scale of 12, 13, 15, 20, 24 and 34.
Sometimes you need to scale up or down the text. There are 7 classes you can use for this purpose.
Text xxxx-large
Text xxx-large
Text xx-large
Text x-large
Text large
Text regular
Text small
Text x-small
The weight styles are available through classes so you can use it easily.
When you combine the different font classes with the heading classes, you can get the following Material Design styles.
| h1 .text-xxxl .text-light |
Display 4 |
| h2 .text-xxl |
Display 3 |
| h3 .text-xxl .text-normal |
Display 2 |
| h1 | Display 1 |
| h2 | Headline |
| h3 | Title |
| h4 | Subhead |
| Default | Body |
| .text-caption | Caption |
The default font-size is 13px, with a line-height of 24px.
This is applied to the <body> and all paragraphs.
In addition, <p> (paragraphs) receive a bottom margin of half their computed line-height (12px by default).
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor strong.
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
This line of text is meant to be treated as fine print.
Make a paragraph stand out by adding .lead.
It will increase font-size, line-height and the bottom margin.
The font receives a thin weight weight.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor.
For quoting blocks of content from another source within your document.
Add a <footer> for identifying the source.
Any man who reads too much and uses his own brain too little falls into lazy habits of thinking.
Don't wait around for other people to be happy for you. Any happiness you get you've got to make yourself.
Convey meaning through color with the emphasis classes. These may also be applied to links and will darken on hover.
The weight styles are available through classes so you can use it easily.
If a line of text is too long, the user’s eye will have a hard time focusing on the text. This is because the length makes it difficult to get an idea of where the line starts and ends. Furthermore it can be difficult to continue from the correct line in large blocks of text.
To regulate the length of a line of text, you can use the text columns classes. As the screen becomes smaller, there will be fewer columns. Therefore, the text remains readable.
Alex Anistor
Alicia Adell.text-columns-sm will divide the text in the following columns:
Duo semper accumsan ea, quidam convenire cum cu, oportere maiestatis incorrupte est eu. Soluta audiam timeam ius te, idque gubergren forensibus ad mel, persius urbanitas usu id. Civibus nostrum fabellas mea te, ne pri lucilius iudicabit. Ut cibo semper vituperatoribus vix, cum in error elitr. Vix molestiae intellegat omittantur an, nam cu modo ullum scriptorem.
Quod option numquam vel in, et fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Dicant vituperata consequuntur at sea, mazim commodo
Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Dicant vituperata consequuntur.
.text-columns will divide the text in the following columns:
Duo semper accumsan ea, quidam convenire cum cu, oportere maiestatis incorrupte est eu. Soluta audiam timeam ius te, idque gubergren forensibus ad mel, persius urbanitas usu id. Civibus nostrum fabellas mea te, ne pri lucilius iudicabit. Ut cibo semper vituperatoribus vix, cum in error elitr. Vix molestiae intellegat omittantur an, nam cu modo ullum scriptorem.
Quod option numquam vel in, et fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Dicant vituperata consequuntur at sea, mazim commodo
Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Dicant vituperata consequuntur.
.text-columns-lg will divide the text in the following columns:
Duo semper accumsan ea, quidam convenire cum cu, oportere maiestatis incorrupte est eu. Soluta audiam timeam ius te, idque gubergren forensibus ad mel, persius urbanitas usu id. Civibus nostrum fabellas mea te, ne pri lucilius iudicabit. Ut cibo semper vituperatoribus vix, cum in error elitr. Vix molestiae intellegat omittantur an, nam cu modo ullum scriptorem.
Quod option numquam vel in, et fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Dicant vituperata consequuntur at sea, mazim commodo
Per at postea mediocritatem, vim numquam aliquid eu, in nam sale gubergren. Fuisset delicatissimi duo, qui ut animal noluisse erroribus. Ea eum veniam audire. Dicant vituperata consequuntur.
