@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

  --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

npm install @mskcc/typography

Usage

CDN Usage

Add the following link tag to your HTML file:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@mskcc/typography@latest/msk-sans-pro.css"
/>

or for the consumer version:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@mskcc/typography@latest/msk-sans-consumer.css"
/>

Local Usage

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

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

or for the consumer version:

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

File Structure

• src/: Contains SCSS source files
• fonts/: Contains font files
• scripts/: Contains build and utility scripts
• examples/: Contains example HTML files demonstrating usage