For our sans-serif font-family, we use the humanist typeface Open Sans, designed by Steve Matteson and licensed under the Apache License, Version 2.0.
| Property | Description | Core token | Value |
|---|
font-family | Default font family sans-serif | font-family-sans | 'Open Sans', sans-serif |
font-family | Default font family monospaced | font-family-mono | Source Code Pro', monospace |
In order to add contrast between typographic elements in the UI, Halstack uses four different and well balanced font-weight values.
| Property | Description | Core token | Value |
|---|
font-weight | Set font weight as light (300) | font-weight-light | 300 |
font-weight | Set font weight as regular (400) | font-weight-regular | 400 |
font-weight | Set font weight as semibold (600) | font-weight-semibold | 600 |
font-weight | Set font weight as bold (700) | font-weight-bold | 700 |
As we approached the foundational elements with simplification and standardization in mind, the typographic scale is one of the most important elements to create hierarchy. Our type scale provides eight relative values based on a root font size of 16px, making it scalable and accessible.
| Property | Description | Core token | Value (rem) |
|---|
font-size | Set the font size as 12px | font-scale-01 | 0.75 |
font-size | Set the font size as 14px | font-scale-02 | 0.875 |
font-size | Set the font size as 16px | font-scale-03 | 1 |
font-size | Set the font size as 20px | font-scale-04 | 1.25 |
font-size | Set the font size as 24px | font-scale-05 | 1.5 |
font-size | Set the font size as 32px | font-scale-06 | 2 |
font-size | Set the font size as 48px | font-scale-07 | 3 |
font-size | Set the font size as 60px | font-scale-08 | 3.75 |
| Property | Description | Core token | Value |
|---|
font-style | Set font style as italic | font-style-italic | italic |
font-style | Set font style as normal | font-style-normal | normal |
We calibrate our letter-spacing at large scales to provide a better legibility and readability of our text.
| Property | Description | Core token | Value(em) |
|---|
letter-spacing | Set letter spacing as -0.025em | font-tracking-tight-02 | -0.025 |
letter-spacing | Set letter spacing as -0.0125em | font-tracking-tight-01 | -0.0125 |
letter-spacing | Set letter spacing as 0em | font-tracking-normal | 0 |
letter-spacing | Set letter spacing as 0.025em | font-tracking-wide-01 | 0.025 |
letter-spacing | Set letter spacing as 0.05em | font-tracking-wide-02 | 0.05 |
letter-spacing | Set letter spacing as 0.1em | font-tracking-wide-03 | 0.1 |
We use a ratio of 1:1.5 as a standard line-height value. A body font of 16px (1rem) returns a value of 24px (1.5rem), which is the main reference measurement for the vertical organization.
| Property | Description | Core token | Value(em) |
|---|
line-height | Set line height as 1em | font-leading-compact-03 | 1 |
line-height | Set line height as 1.25em | font-leading-compact-02 | 1.25 |
line-height | Set line height as 1.365em | font-leading-compact-01 | 1.365 |
line-height | Set line height as 1.5em | font-leading-normal | 1.5 |
line-height | Set line height as 1.715em | font-leading-loose-01 | 1.715 |
line-height | Set line height as 2em | font-leading-loose-02 | 2 |
| Property | Description | Core token | Value |
|---|
text-transform | Preserve default value | font-transform-initial | initial |
text-transform | Transform text to lowercase | font-transform-lowercase | lowercase |
text-transform | Transform text to uppercase | font-transform-uppercase | uppercase |
| Property | Description | Core token | Value |
|---|
text-decoration | Unset all present decorations | font-decoration-no-line | none |
text-decoration | Underline the text | font-decoration-underline | underline |
text-decoration | Put a strikethrough the text | font-decoration-line-through | line-through |
| Property | Description | Core token | Value |
|---|
text-align | Centers the text. | text-align-center | center |
text-align | Align the text to the right. | text-align-right | right |
text-align | Align the text to the left. | text-align-left | left |
| Property | Description | Core token | Value |
|---|
display | Displays an element as a block element. | display-block | block |
display | Displays an element as an inline element. | display-inline | inline |
| Property | Description | Core token | Value |
|---|
text-overflow | The text is clipped and not accessible. | text-overflow-clip | clip |
text-overflow | Render an ellipsis ("...") to represent the clipped text. | text-overflow-ellipsis | ellipsis |
text-overflow | Set the property as unset. | text-overflow-unset | unset |
| Property | Description | Core token | Value |
|---|
white-space | Whitespace is preserved by the browser. Text will only wrap on line breaks. | text-whiteSpace-pre | pre |
white-space | Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. | text-whiteSpace-normal | normal |
white-space | Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a 'br' tag is encountered. | text-whiteSpace-nowrap | nowrap |
white-space | Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks. | text-whiteSpace-pre-line | pre-line |
white-space | Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks. | text-whiteSpace-pre-wrap | pre-wrap |
