The Digitec Galaxus online shops use four type scales. Each has a different purpose, and allow us to have more control over how content behaves in relation to user intent.

#UI Typography

UI Typography is the basis. It applies to most text in the UI.

#Product Typography

Product Typography is only applied to brands, prices and names. This is mostly used in product tiles and on the product detail page.

#Magazine Typography

Magazine Typography is only used for the content that appears in magazine articles. Only content written by the article’s author uses this system. Other content still uses the UI Typography.

#Teaser Typography

Teaser Typography is only used in magazine teasers. It is the bridge between the longer form content consumption and the more common browsing parts of our websites.

#Examples

typography-schema

#UI Typography: Type Scale

The UI Type Scale is the basis from which the other scales are derived. It contains a simple set of text sizes and a default weight style for each of the scale’s steps. Designers need to avoid using weights marked as such.

DS UI Type Scale Table