Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[OP#169] Variable Font Instructions #247

Merged
merged 2 commits into from
Dec 16, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 63 additions & 2 deletions src/stories/Tokens/Typography/FontFamily.mdx
Original file line number Diff line number Diff line change
@@ -6,9 +6,11 @@ import { DesignTokenDocBlock } from 'storybook-design-token'

# Font Family

The Font Family token can be used to change the font used when displaying text
Font Family tokens can be used to change the font used when displaying text.

Noto Sans and Noto Serif are both loaded via the Google Fonts CDN with Noto Sans as the default.
Optics loads fonts via the Google Fonts CDN. For instructions and further learning, see [Google Fonts](https://fonts.google.com/)

The default font is set to Noto Sans with an alternate option set to Noto Serif.

```css
@import 'https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&family=Noto+Serif:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap';
@@ -29,6 +31,65 @@ html {
}
```

## Variable Fonts

Optics supports variable fonts. Variable fonts are a single font file that contains multiple variations of a font. This allows you to adjust various axes that the font makes available such as the weight, width, slant, and other properties.

Optics uses Noto Sans as a default which has three axes of variations: weight, width, and italic. You can adjust these axes using the font-weight, font-stretch, and font-style tokens.

```css
.my-selector {
font-family: var(--op-font-family); // Defaults to "Noto Sans"
font-optical-sizing: {auto|none};
font-weight: {100 to 900}; // Any value will work, though it is recommended to use the existing weight tokens or define a component specific value.
// E.G. font-weight: var(--op-font-weight-bold);
font-style: {normal|italic};
font-variation-settings:
"wdth" {62.5 to 100};
// or
font-stretch: {62.5% to 100%};
}
```

If you are using a custom font, you can adjust the axes of the font by using the font-variation-settings property. The values for the axes are specific to the font you are using. You can find the available axes and their values in the font's documentation.

For example: [Roboto Flex](https://fonts.google.com/specimen/Roboto+Flex) has the following axes.

```css
// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 1000
// <grade>: Use a value from -200 to 150
// <slant>: Use a value from -10 to 0
// <width>: Use a value from 25 to 151
// <thick stroke>: Use a value from 27 to 175
// <thin stroke>: Use a value from 25 to 135
// <counter width>: Use a value from 323 to 603
// <uppercase height>: Use a value from 528 to 760
// <lowercase height>: Use a value from 416 to 570
// <ascender height>: Use a value from 649 to 854
// <descender depth>: Use a value from -305 to -98
// <figure height>: Use a value from 560 to 788

.roboto-flex-<uniquifier> {
font-family: 'Roboto Flex', sans-serif;
font-optical-sizing: auto;
font-weight: <weight>;
font-style: normal;
font-variation-settings:
'slnt' <slant>,
'wdth' <width>,
'GRAD' <grade>,
'XOPQ' <thick stroke>,
'XTRA' <counter width>,
'YOPQ' <thin stroke>,
'YTAS' <ascender height>,
'YTDE' <descender depth>,
'YTFI' <figure height>,
'YTLC' <lowercase height>,
'YTUC' <uppercase height>;
}
```

## Available tokens and their definitions

<DesignTokenDocBlock categoryName="Font Family" viewType="card" />