Base Typography
Base Typography is designed in a way where you can add it on top of the Base CSS framework or to your own custom project.
Table of contents
Overview
Base Typography contains styles for headings, copy, blockquotes, codeblocks, lists and all other standard typography.
Installation
If you have an existing project and would like to include the Base typography module, run the following command:
npm install --save @getbase/typographyOnce you have the typography module installed, you can include it in your CSS/LESS/SCSS file with one of the following ways:
CSS Import:
@import url("https://unpkg.com/@getbase/typography/index.css");SCSS Import:
/* Import Base Typography */
@import "~@getbase/typography/scss/index";
/* Your Other Styles */
@import "main"LESS Import:
/* Import Base Typography */
@import "~@getbase/typography/less/index";
/* Your Other Styles */
@import "main"Documentation
Base Typography includes styles for headings (h1 - h6), heading helpers (.fs-1 - .fs-6), links, horizontal lines, and general typography.
Helpers (Applies to SCSS/LESS)
| Helper Class | Purpose | Example | Outcome |
|---|---|---|---|
.fs-1 |
Apply the same font size and line height as a h1
|
<span class="fs-1">Heading</span> |
Applies h1 font size and line height to a span element |
.fs-2 |
Apply the same font size and line height as a h2
|
<span class="fs-2">Heading</span> |
Applies h2 font size and line height to a span element |
.fs-3 |
Apply the same font size and line height as a h3
|
<span class="fs-3">Heading</span> |
Applies h3 font size and line height to a span element |
.fs-4 |
Apply the same font size and line height as a h4
|
<span class="fs-4">Heading</span> |
Applies h4 font size and line height to a span element |
.fs-5 |
Apply the same font size and line height as a h5
|
<span class="fs-5">Heading</span> |
Applies h5 font size and line height to a span element |
.fs-6 |
Apply the same font size and line height as a h6
|
<span class="fs-6">Heading</span> |
Applies h6 font size and line height to a span element |
SCSS
Variables
| Variable | Purpose | Default |
|---|---|---|
$base-background-color |
Color applied to the background body | #fff |
$base-font-family |
Font family applied to body | sans-serif |
$base-font-size |
Font size applied to body | 16px |
$base-line-height |
Line height applied to body | 22px |
$base-font-weight |
Font weight applied to body | 400 |
$base-font-color |
Font color applied to body | #000 |
$base-link-color |
Color applied to links | #000 |
$base-link-hover-color |
Color applied to links on hover | #000 |
$base-link-active-color |
Color applied to links on active | #000 |
$base-heading-font-family |
Font family applied to headings h1 - h6
|
sans-serif |
$base-h1-font-size |
Heading 1 font size | 32px |
$base-h1-line-height |
Heading 1 line height | 38px |
$base-h1-font-weight |
Heading 1 font weight | 700 |
$base-h1-color |
Heading 1 color | #000 |
$base-h2-font-size |
Heading 2 font size | 26px |
$base-h2-line-height |
Heading 2 line height | 32px |
$base-h2-font-weight |
Heading 1 font weight | 700 |
$base-h2-color |
Heading 2 color | #000 |
$base-h3-font-size |
Heading 3 font size | 22px |
$base-h3-line-height |
Heading 3 line height | 28px |
$base-h3-font-weight |
Heading 3 font weight | 700 |
$base-h3-color |
Heading 3 color | #000 |
$base-h4-font-size |
Heading 4 font size | 18px |
$base-h4-line-height |
Heading 4 line height | 24px |
$base-h4-font-weight |
Heading 4 font weight | 700 |
$base-h4-color |
Heading 4 color | #000 |
$base-h5-font-size |
Heading 5 font size | 16px |
$base-h5-line-height |
Heading 5 line height | 22px |
$base-h5-font-weight |
Heading 5 font weight | 700 |
$base-h5-color |
Heading 5 color | #000 |
$base-h6-font-size |
Heading 6 font size | 14px |
$base-h6-line-height |
Heading 6 line height | 20px |
$base-h6-font-weight |
Heading 6 font weight | 700 |
$base-h6-color |
Heading 6 color | #000 |
$base-blockquote-font-family |
Font family applied to blockquotes | sans-serif |
$base-blockquote-font-size |
Font size applied to blockquotes | 18px |
$base-blockquote-line-height |
Line height applied to blockquotes | 24px |
$base-blockquote-line-height |
Line height applied to blockquotes | 24px |
$base-blockquote-font-weight |
Font weight applied to blockquotes | 400 |
$base-blockquote-cite-font-weight |
Font weight applied to a cite within a blockquote |
700 |
$base-code-font-family |
Font family applied to code blocks | monospace |
$base-code-font-size |
Font size applied to code blocks | 13px |
$base-code-line-height |
Line height applied to code blocks | 18px |
$base-code-color |
Font color applied to code blocks | #000 |
$base-code-background-color |
Background color applied to code blocks | #f7f7f7 |
$base-code-border-color |
Border color applied to code blocks | #e7e7e7 |
LESS
Variables
| Variable | Purpose | Default |
|---|---|---|
@base-background-color |
Color applied to the background body | #fff |
@base-font-family |
Font family applied to body | sans-serif |
@base-font-size |
Font size applied to body | 16px |
@base-line-height |
Line height applied to body | 22px |
@base-font-weight |
Font weight applied to body | 400 |
@base-font-color |
Font color applied to body | #000 |
@base-link-color |
Color applied to links | #000 |
@base-link-hover-color |
Color applied to links on hover | #000 |
@base-link-active-color |
Color applied to links on active | #000 |
@base-heading-font-family |
Font family applied to headings h1 - h6
|
sans-serif |
@base-h1-font-size |
Heading 1 font size | 32px |
@base-h1-line-height |
Heading 1 line height | 38px |
@base-h1-font-weight |
Heading 1 font weight | 700 |
@base-h1-color |
Heading 1 color | #000 |
@base-h2-font-size |
Heading 2 font size | 26px |
@base-h2-line-height |
Heading 2 line height | 32px |
@base-h2-font-weight |
Heading 1 font weight | 700 |
@base-h2-color |
Heading 2 color | #000 |
@base-h3-font-size |
Heading 3 font size | 22px |
@base-h3-line-height |
Heading 3 line height | 28px |
@base-h3-font-weight |
Heading 3 font weight | 700 |
@base-h3-color |
Heading 3 color | #000 |
@base-h4-font-size |
Heading 4 font size | 18px |
@base-h4-line-height |
Heading 4 line height | 24px |
@base-h4-font-weight |
Heading 4 font weight | 700 |
@base-h4-color |
Heading 4 color | #000 |
@base-h5-font-size |
Heading 5 font size | 16px |
@base-h5-line-height |
Heading 5 line height | 22px |
@base-h5-font-weight |
Heading 5 font weight | 700 |
@base-h5-color |
Heading 5 color | #000 |
@base-h6-font-size |
Heading 6 font size | 14px |
@base-h6-line-height |
Heading 6 line height | 20px |
@base-h6-font-weight |
Heading 6 font weight | 700 |
@base-h6-color |
Heading 6 color | #000 |
@base-blockquote-font-family |
Font family applied to blockquotes | sans-serif |
@base-blockquote-font-size |
Font size applied to blockquotes | 18px |
@base-blockquote-line-height |
Line height applied to blockquotes | 24px |
@base-blockquote-font-weight |
Font weight applied to blockquotes | 400 |
@base-blockquote-cite-font-weight |
Font weight applied to a cite within a blockquote |
700 |
@base-code-font-family |
Font family applied to code blocks | monospace |
@base-code-font-size |
Font size applied to code blocks | 13px |
@base-code-line-height |
Line height applied to code blocks | 18px |
@base-code-color |
Font color applied to code blocks | #000 |
@base-code-background-color |
Background color applied to code blocks | #f7f7f7 |
@base-code-border-color |
Border color applied to code blocks | #e7e7e7 |
Demo
View page example with the typography stylesheet applied.
Support
- IE10+ and all other modern browsers.
- Please specify browsers you need to support in
package.jsonaccording to browserslist docs.
Authors
Matthew Hartman
License
Code released under the MIT Open Source license.