# @mskcc/typography

This package provides a comprehensive solution for integrating custom fonts into your project. It includes a reset stylesheet, variable font definitions, and utilities for managing font weights and styles.

## Features

1. **Variable Fonts**: Utilizes MSK Sans variable fonts for both Pro and Consumer versions.
2. **CSS Reset**: Includes a modern CSS reset to ensure consistent styling across browsers.
3. **Responsive Typography**: Defines responsive font sizes and line heights for headings and body text.
4. **Customizable**: Allows easy customization through CSS variables.
5. **CDN Support**: Fonts can be loaded from a CDN for faster loading times.
6. **Local Development**: Supports local development with a script to generate CSS for local use.

## CSS Variables

```css
  --msk-font-weight-light;
  --msk-font-weight-normal;
  --msk-font-weight-medium;
  --msk-font-weight-semibold;
  --msk-font-weight-bold;

  --msk-font-family-base;
  --msk-font-size-base;
  --msk-line-height-base;
  --msk-letter-spacing-base;

  --msk-h1-font-weight;
  --msk-h2-font-weight;
  --msk-h3-font-weight;
  --msk-h4-font-weight;
  --msk-h5-font-weight;
  --msk-h6-font-weight;

  --msk-h1-font-size;
  --msk-h2-font-size;
  --msk-h3-font-size;
  --msk-h4-font-size;
  --msk-h5-font-size;
  --msk-h6-font-size;

  --msk-h1-line-height;
  --msk-h2-line-height;
  --msk-h3-line-height;
  --msk-h4-line-height;
  --msk-h5-line-height;
  --msk-h6-line-height;

  --msk-h1-letter-spacing;
  --msk-h2-letter-spacing;
  --msk-h3-letter-spacing;
  --msk-h4-letter-spacing;
  --msk-h5-letter-spacing;
  --msk-h6-letter-spacing;
```

## Installation

```bash
npm install @mskcc/typography
```

## Usage

### CDN Usage

```html
<link rel="stylesheet" href="cdn-link" />

<!-- or -->

<style>
  @import url('cdn-link');
</style>
```

#### CDN Links

| description         | link                                                                                     |
| ------------------- | ---------------------------------------------------------------------------------------- |
| reset               | `https://cdn.jsdelivr.net/npm/@mskcc/typography@latest/reset.css`                        |
| consumer font       | `https://cdn.jsdelivr.net/npm/@mskcc/typography@latest/msk-sans-consumer.css`            |
| pro font            | `https://cdn.jsdelivr.net/npm/@mskcc/typography@latest/msk-sans-pro.css`                 |
| consumer with reset | `https://cdn.jsdelivr.net/npm/@mskcc/typography@latest/msk-sans-consumer-with-reset.css` |
| pro with reset      | `https://cdn.jsdelivr.net/npm/@mskcc/typography@latest/msk-sans-pro-with-reset.css`      |

### Local Usage

1. Install the package using npm.
2. Import the CSS file in your project:

```css
@import '@mskcc/typography/msk-sans-pro.css';
```

or for the consumer version:

```css
@import '@mskcc/typography/msk-sans-consumer.css';
```

### Using the CSS Variables

Here's an example of applying the MSK font family to a button:

```css
.button {
  font-family: var(--msk-font-family-base);
  font-weight: var(--msk-font-weight-medium);
  font-size: var(--msk-font-size-base);
}
```

This will ensure your button uses the MSK Sans font with consistent styling. You can also combine it with other typography variables for complete control:

```css
.primary-button {
  font-family: var(--msk-font-family-base);
  font-weight: var(--msk-font-weight-semibold);
  font-size: var(--msk-font-size-base);
  letter-spacing: var(--msk-letter-spacing-base);
  line-height: var(--msk-line-height-base);
}
```