@mskcc/typography
v0.0.3
Published
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.
Downloads
285
Keywords
Readme
@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
- Variable Fonts: Utilizes MSK Sans variable fonts for both Pro and Consumer versions.
- CSS Reset: Includes a modern CSS reset to ensure consistent styling across browsers.
- Responsive Typography: Defines responsive font sizes and line heights for headings and body text.
- Customizable: Allows easy customization through CSS variables.
- CDN Support: Fonts can be loaded from a CDN for faster loading times.
- 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
<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
- Install the package using npm.
- 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';
Using the CSS Variables
Here's an example of applying the MSK font family to a button:
.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:
.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);
}