Skip to main content

Typography

Typography is a crucial element of our design system, ensuring readability and visual harmony across all applications. This section offers an overview of font formats based on a modular scale, which helps maintain consistency and balance. Expand the rows to preview each font and see detailed information on its usage and specifications.

Typography - Code

Typography component​

We use utility CSS classes to style text. Theme changes will apply to texts automatically (e.g. change color). The ix-typography component allows consistent formatting with easy to adapt properties.

API for ix-typography​

Properties​

Mixins​

We provide additional SCSS mixins which can be used to create valid custom typography classes.

@import '@siemens/ix/scss/mixins/font';

.my-class-name {
  @include typography-h3;
}
<span class="my-class-name">
  Lorem ipsum dolor sit amet consectetur. Et pulvinar arcu placerat tristique.
  Velit ipsum donec pulvinar erat donec turpis ultrices. Scelerisque pharetra
  sed sapien diam lorem. Risus quis in faucibus tempor. Hendrerit at cursus
  suspendisse neque adipiscing at at eu.
</span>

<!-- Same result as: -->
<ix-typography format="h3">
  Lorem ipsum dolor sit amet consectetur. Et pulvinar arcu placerat tristique.
  Velit ipsum donec pulvinar erat donec turpis ultrices. Scelerisque pharetra
  sed sapien diam lorem. Risus quis in faucibus tempor. Hendrerit at cursus
  suspendisse neque adipiscing at at eu.
</ix-typography>