🎨 Typography page of the Indigo.Design System you will find a collection of type scales that will let you set up your theme's typeface. Although we are using Titillium Web as a default, we really want to give every designer the flexibility to craft his applications with style. Indigo.Design Typography follows the definitions set by the Material Type System and the implementation of the Ignite UI for Angular Typography.
To use the Typography in your project all you need to do is apply one of the Text Styles defined in the library to any text layer. There is a vast selection of type presets with different sizes, colors and alignments incuding:
- 6 Headlines from
Bodysizes for the paragraph content in you interface.
Overlinestyle that can be used for complimentary content.
Use these when creating intricate layouts for articles, blog posts etc. The Text Styles in the Indigo.Design System are meant to help you define a consistent theme and style for all the texts in your designs.
There is also a collection of
Internal styles used within the Components for validation, special cases such as the label of a Button, and data-dense scenarios like the Grid. These styles are not supposed to be inserted in your interface directly but exist to assure typographic consistency for the Components within which they are used.
Typography comes in multiple preset colors, such as
active corresponding to
inactive corresponding to
disabled corresponding to
secondary. There are also type scales with special colors for strings that need to be in
error colors, as well as some additional nuances used by the Indigo.Design Components.
Component Specific Typography
Components, such as Avatar, Button, Grid, Slider and Tooltip use component-specific Typography to accommodate the specifics of the styling used by the respective component e.g. the Avatar needs a larger variety of colors and the Button uses an all caps style.
Changing the Typeface
To change typeface from Titillium Web to another one in Sketch open the Indigo.Design library file and select
Components. Then in the Sketch menu you will notice a group of four buttons, where the second one is a character icon and stands for
Show Text Styles.
After selecting it you will be able to browse all text styles that the Indigo.Design System defines. In the panel on the left make sure you have
All Text Styles chosen and select all styles appearing in the middle area of Sketch by clicking on one of them and pressing
Now, in the panel on the right there is a dropdown allowing you to choose another typeface for all the
Text Styles. With that you are all set, the changes will not only update all
Text Styles, but also propagate to all Components and Patterns automatically.
Text Styles in Sketch use color variables to define the color property of the text. Thus, if you were to change the
primary color as per the steps outlined in the colors topic, all your primary
Text Styles will be automatically updated.
Creating Custom Typographies
The variety of type scales and
Text Styles should be more than sufficient to design various user interfaces. However, you may occasionally need to create an extra style for specially colored heading, for example. If you want to define it globally for all your projects simply create a duplicate from an existing heading, choose the appropriate color for it and name it accordingly. If it is something meaningful only within the scope of your current project start by inserting a new
Text layer in Sketch. Then assign to it the closest
Text Style from the existing ones fed from the library via the
Next, make the adjustments like changing the text color to a different color variables, for example.
Last, click the Create button and give the new style an appropriate name and you are all set.
Our community is active and always welcoming to new ideas.