Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
58 lines (49 sloc) 2.03 KB
/*
---
name: Typography
category: Foundations/Variables
tag: variables
---
Defines all typography related variables for the project. Currently, the new selected font family
is [Interstate](https://store.typenetwork.com/foundry/fontbureau/fonts/interstate/regular).
This typography must be imported before the bitnami-ui require statement.
Interstate is a paid font family, so we need to use it through
[Typekit](https://typekit.com/fonts/interstate). If you don't want to use Interstate due
to this restrictment, you can use the fallback font families:
[Fira Sans](https://fonts.google.com/specimen/Fira+Sans) and
[Hind](https://fonts.google.com/specimen/Hind). This is an free font family and can be lodaded
from Google Fonts:
```
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:300,400,700|Hind:300,400,700" rel="stylesheet">
```
If any of these font families are available, the UI fallbacks to OS typographies.
```scss
// Font families
$type-os-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$type-headings: 'Interstate', 'Fira Sans', $type-os-fallback;
$type-body: 'Interstate', 'Hind', $type-os-fallback;
$type-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
// Fix the line-heights
$line-heights: (
-1: $size-unit,
0: $size-unit,
1: $size-unit * 1.5,
2: $size-unit * 2,
3: $size-unit * 3,
);
```
*/
// Font families
$type-os-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
$type-code-fallback: 'Liberation Mono', Menlo, Courier, monospace;
$type-headings: 'Interstate', 'Fira Sans', #{$type-os-fallback} !default;
$type-body: 'Interstate', 'Hind', #{$type-os-fallback} !default;
$type-code: 'SFMono-Regular', Consolas, #{$type-code-fallback} !default;
// Fix the line-heights
$line-heights: (
-1: $size-unit,
0: $size-unit,
1: $size-unit * 1.5,
2: $size-unit * 2,
3: $size-unit * 3,
) !default;
You can’t perform that action at this time.