This page covers the details related to typography, how to edit it and how to style it with ease.
In order to change the typography of the whole system, simply navigate to the Body element and in the selector panel, select
Body (All Pages)Here you can select the default typography to be used across the whole system. Note that this will apply the type style to all elements, if you are using two different sets of typography, you can simply alter the requirements below.
We have provided global typography styles that match the class system you will see outline below. We recommend you simply add text fields by giving them a class name, such as H2 Title 600 Body Normal 600 Detail 400 You can review all details of this system below.
As described in the project documentation, you can simply add these classes to elements to inherit their styles.
By default we provide some basic spacing classes that can help you quickly add padding and margin as combo-classes.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
As described in the project documentation, you can simply add these classes to elements to inherit their styles.
By default we provide some basic spacing classes that can help you quickly add padding and margin as combo-classes.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Body Large 400
Body Large 600
Body Large 800
Body Normal 400
Body Normal 600
Body Normal 800
Body Small 400
Body Small 600
Body Small 800
Detail 400
Detail 600
Detail 800