Typography
Color
You can set a color for text. You can pick a color from color-picker, or by typing color value in HEX or RGBA format inside color-picker.
Font family
Font can be set from the Fonts dropdown.
At Zero One, you can use a wide variety of font families such as Noto sans jp and Lato.
Weight
The thickness can be set from Weight dropdown in Typography.
Kind of thickness
There are five types of thickness, from thin to thick: Light, Normal, Medium, Semi Bold, Bold.
Size
The font size can be set using Size input in Typegraphy. The font size is represented by px, rem, em,%.
Text alignment
You can change the text layout on the left, center, right or justify using buttons showed below:
Text decoration
Text decoration sets the appearance of decorative lines on text.
Normal
This is the initial setting. Makes the text decoration normal.
Italic
A typeface with letters slanted slightly to the right. Italic type is used to emphasize words as well as for decoration. Most, but not all, fonts have an italic typeface.
Underline
An underline is a section of text in a document where the words have a line running beneath them.
Strikethrough
Strikethrough is a typographical presentation of words with a horizontal line through their center, resulting in text like this.
Line height / distance
Line height
Represents line-height CSS property. It specifies the height of a line. Units are positive Integers.
Letter spacing
Represents letter-spacing CSS property. It increases or decreases the space between characters in a text. Units are positive Integers.
Selectable
Represents CSS user-select property. controls whether the user can select text. This doesn't have any effect on content loaded as part of a browser's user interface, except in textboxes.
Letter case
Represents CSS text-transform property. It specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. It also can help improve legibility for ruby.
Line wrap
Represents CSS text-overflow and white-space property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis ('…'), or display a custom string.
Learn more about text-overflow and white-space
Last updated