import { Meta } from '@storybook/addon-docs/blocks';
import { FontSamples } from '../../.storybook/custom/components/Swatches';
import StyleSwitcher from '../../.storybook/custom/components/StyleSwitcher';
import fontStyles from './font-styles.js';

<Meta title="Foundations/Typography" />

# Typography

Radial provides a wide range of type options as a way to adapt for individual brand needs, maintain clear onsite hierarchies and ensure page load performance. These guidelines are meant to help designers and developers to work freely while ensuring best practices are used.

**Type Scale**
Radial uses a [modular scale](https://www.modularscale.com/?18&px&1.125) to give our type purposeful sizing and visual harmony. Using the base body text size of **18px**, a ratio of **8:9** (known as a major second or numerically as **1.125**) is applied to determine the rest of [our scale](https://www.modularscale.com/?18&px&1.125).

Each of our brand themes determines its modular scale by setting these Font Levers:
```css
  /* Font Levers */
  --font-base: 18px;
  --font-ratio: 1.25;
```


<StyleSwitcher />

<FontSamples samples={fontStyles}/>

**Line Heights**
There is no current rule set created for font size and line height. At this time, line heights need to be adjusted manually by designers.

*For the future, we may round the line heights to the nearest multiple of 8 using CSS “line-height-step,” which is currently in development. Potential to delete table below to be replaced with JSX component which pulls programmatically from site tokens.*

**Gothamist**

To be added to/changed for white label when ready.

| Size Name    | Font Size          | Line Height          |
| ------------ | ------------------ | -------------------- |
| Font size 16 | 58.45              | 1                    |
| Font size 15 | 51.96              | 1.1                  |
| Font size 14 | 46.18              | 1.1                  |
| Font size 13 | 41.05              | 1.2                  |
| Font size 12 | 36.49              | 1.2                  |
| Font size 11 | 32.44              | 1.2                  |
| Font size 10 | 28.83              | 1.25                 |
| Font size 9  | 25.63              | 1.2                  |
| Font size 8  | 22.78              | 1.1                  |
| Font size 7  | 20.25              | 1.1                  |
| Font size 6  | 18                 | 1.58                 |
| Font size 5  | 16                 | 1.8                  |
| Font size 4  | 14.222             | 1.4                  |
| Font size 3  | 12.642             | 1.4                  |
| Font size 2  | 11.237             | 1.4                  |                   
| Font size 1  | 9.989              | 1.4                  |                   


**Display Styles**
To create some naming hierarchy around our font scale sizes, we've established some name ranges to make things easier.

 - Anything larger than the scale's base font size (18px) is considered a **Header**
 - **Sub-headers** are an optional secondary header size. Their size lies between headers and body text.
 - Our base font size and one size smaller are both considered **Body Text**
 - Sizes below the body text are **Small Text**

### Theme Typefaces

Radial allows for themes to have a maximum of four typefaces. This keeps loading speeds faster and content more digestible. Typefaces can occupy one of 4 slots:

Whitelabeled Font Family Header
```css
--font-family-header: 'Libre Baskerville', 'Times New Roman', serif;
--letter-spacing-header: normal;
--font-weight-header: 700;
```
Whitelabeled Font Family Subheader
```css
  --font-family-subheader: 'Libre Baskervile', 'Times New Roman', serif;
  --letter-spacing-subheader: normal;
  --font-weight-subheader: 700;
```
Whitelabeled Font Family Body
```css
 --font-family-body: 'Source Sans Pro', Helvetica, Arial, sans-serif;
  --letter-spacing-body: normal;
  --font-weight-body: 400;
```

Whitelabeled Font Family Small
```css
  --font-family-small: 'Source Sans Pro', Helvetica, Arial, sans-serif;
  --letter-spacing-small: 1px;
  --font-weight-small: 400;
```

### Line Length

Wide lines of text can be difficult for users to read and short lines of text can interrupt a reader’s flow. Setting a proper line length will break up body text in a digestible way. For body copy, try to keep line lengths between 60-80 characters long. Make use of a predetermined grid to keep lengths acceptable.

  
See [W3 Page Structure Guidelines](https://www.w3.org/WAI/tutorials/page-structure/styling/) for more information.

## Brand Font Families

### **Whitelabel**
Our Whitelabel uses two typefaces to show a clear hierarchy and to display style variation/font flexibility within a given theme.   **[Libre Baskerville](https://fonts.google.com/specimen/Libre+Baskerville?selection.family=Libre%20Baskerville)** is used as the primary font for headlines and titles.  **[Source Sans Pro](https://fonts.google.com/specimen/Source+Sans+Pro)** is used as our default secondary and tertiary font for body text as well as small headers and info text. The fonts are open source and are freely available for download from [Google Fonts](https://fonts.google.com/).

<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet" />

<table className="sbdocs sbdocs-table">
  <thead>
    <tr>
      <th>Type</th>
      <th>Font & Description</th>
      <th>Example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Whitelabel, Primary</td>
      <td style={{ paddingTop: '20px' }}><span style={{ fontFamily: 'Libre Baskerville', fontWeight: '700', fontSize: '28px' }}>Libre Baskerville</span> <br /> is used as our default primary font for headlines and titles, as well as subheaders which are page headings and section headings </td>
      <td><span style={{ fontFamily: 'Libre Baskerville', fontWeight: '400', fontSize: '18px' }}>Aa</span> <span style={{ fontFamily: 'Libre Baskerville', fontWeight: '700', fontSize: '18px' }}>Aa</span> </td>      
    </tr>
    <tr>
      <td>Whitelabel, Secondary</td>
      <td style={{ paddingTop: '20px' }}><span style={{ fontFamily: 'Source Sans Pro', fontWeight: '400', fontSize: '28px' }}>Source Sans Pro</span> <br /> is used as a secondary font for body text</td>
      <td><span style={{ fontFamily: 'Source Sans Pro', fontWeight: '400', fontSize: '18px' }}>Aa</span> <span style={{ fontFamily: 'Source Sans Pro', fontWeight: '700', fontSize: '18px' }}>Aa</span> <span style={{ fontFamily: 'Source Sans Pro', fontWeight: '400i', fontSize: '18px', fontStyle: 'italic' }}>Aa</span></td>      
    </tr>
  </tbody>
</table>

### **Gothamist**
Gothamist uses three typefaces for its brand, creating a clear and expressive hierarchy while maintaining readability. These typefaces complement each other, while also performing well in their assigned hierarchy. **[Pragati Narrow](https://fonts.google.com/specimen/Pragati+Narrow)** is used as the primary font for headlines and titles. **[Barlow](https://fonts.google.com/specimen/Barlow)** is used as a secondary font for body text. **[B612 Mono](https://fonts.google.com/specimen/B612+Mono)** is used as a tertiary font for small headers and info text. The fonts are open source and are freely available for download from [Google Fonts](https://fonts.google.com/).

<link href="https://fonts.googleapis.com/css2?family=B612+Mono:wght@400;700&amp;family=Barlow:ital,wght@0,400;0,700;1,400&amp;family=Pragati+Narrow:wght@400;700&amp;display=swap" rel="stylesheet" />

<table className="sbdocs sbdocs-table">
  <thead>
    <tr>
      <th>Type</th>
      <th>Font & Description</th>
      <th>Example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Gothamist, Primary</td>
      <td style={{ paddingTop: '20px' }}><span style={{ fontFamily: 'Pragati Narrow', fontWeight: '700', fontSize: '28px' }}>Pragati Narrow</span> <br /> is used as the primary font for headlines and titles, as well as subheaders which are page headings and section headings</td>
      <td><span style={{ fontFamily: 'Pragati Narrow', fontWeight: '400', fontSize: '18px' }}>Aa</span> <span style={{ fontFamily: 'Pragati Narrow', fontWeight: '700', fontSize: '18px' }}>Aa</span> </td>      
    </tr>
    <tr>
      <td>Gothamist, Secondary</td>
      <td style={{ paddingTop: '20px' }}><span style={{ fontFamily: 'Barlow', fontWeight: '400', fontSize: '28px' }}>Barlow</span> <br /> is used as a secondary font for body text</td>
      <td><span style={{ fontFamily: 'Barlow', fontWeight: '400', fontSize: '18px' }}>Aa</span> <span style={{ fontFamily: 'Barlow', fontWeight: '700', fontSize: '18px' }}>Aa</span> <span style={{ fontFamily: 'Barlow', fontWeight: '400i', fontSize: '18px', fontStyle: 'italic' }}>Aa</span></td>      
    </tr>
    <tr>
      <td>Gothamist, Tertiary</td>
      <td style={{ paddingTop: '20px' }}><span style={{ fontFamily: 'B612 Mono', fontWeight: '400', fontSize: '28px' }}>B612 Mono</span> <br /> is used as a tertiary font for small headers and info text. Since this font is always displayed at a very small size, to help with legibility, this font should always be utilized in all caps, with a letter-spacing of 1.25</td>
      <td><span style={{ fontFamily: 'B612 Mono', fontWeight: '400', fontSize: '18px' }}>Aa</span> <span style={{ fontFamily: 'B612 Mono', fontWeight: '700', fontSize: '18px' }}>Aa</span></td>      
    </tr>
  </tbody>
</table>


### **WQXR**
WQXR uses two typefaces to show clear hierarchy and promote the readability of content in our audio focused experience. **[Playfair Display](https://fonts.google.com/specimen/Playfair+Display)** is used as our default primary font for headlines and titles. **[Open Sans](https://fonts.google.com/specimen/Open+Sans)** is used as our default secondary and tertiary font for body text as well as small headers and info text. The fonts are open source and are freely available for download from [Google Fonts](https://fonts.google.com/).

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400&family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet" />

<table className="sbdocs sbdocs-table">
  <thead>
    <tr>
      <th>Type</th>
      <th>Font & Description</th>
      <th>Example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>WQXR, Primary</td>
      <td style={{ paddingTop: '20px' }}><span style={{ fontFamily: 'Playfair Display', fontWeight: '700', fontSize: '28px' }}>Playfair Display</span> <br /> is used as our default primary font for headlines and titles. </td>
      <td><span style={{ fontFamily: 'Playfair Display', fontWeight: '400', fontSize: '18px' }}>Aa</span> <span style={{ fontFamily: 'Playfair Display', fontWeight: '700', fontSize: '18px' }}>Aa</span> </td>      
    </tr>
    <tr>
      <td>WQXR, Secondary</td>
      <td style={{ paddingTop: '20px' }}><span style={{ fontFamily: 'Open Sans', fontWeight: '400', fontSize: '28px' }}>Open Sans</span> <br /> is used as our default secondary and tertiary font for body text as well as small headers and info text. </td>
      <td><span style={{ fontFamily: 'Open Sans', fontWeight: '400', fontSize: '18px' }}>Aa</span> <span style={{ fontFamily: 'Open Sans', fontWeight: '700', fontSize: '18px' }}>Aa</span> <span style={{ fontFamily: 'Open Sans', fontWeight: '400i', fontSize: '18px', fontStyle: 'italic' }}>Aa</span></td>      
    </tr>
  </tbody>
</table>