^Content Typography

All typographic elements are responsive and scale gracefully across devices and viewports.

Responsive font sizes
Breakpoint	xs	sm	md	lg	xl	xxl
Base	16px	17px	18px	19px	20px	21px
`<h1>`	32px	34px	36px	38px	40px	42px
`<h2>`	28px	29.75px	31.5px	33.25px	35px	36.75px
`<h3>`	24px	25.5px	27px	28.5px	30px	31.5px
`<h4>`	20px	21.25px	22.5px	23.75px	25px	26.25px
`<h5>`	18px	19.125px	20.25px	21.375px	22.5px	23.625px
`<h6>`	16px	17px	18px	19px	20px	21px
`<small>`	14px	14.875px	15.75px	16.625px	17.5px	18.375px

Display in rem

To ensure that the user’s default font size is followed, the base font size is defined as a percentage that grows with the user’s screen size, while HTML elements are defined in rem.

Since rem is a multiplier of the HTML document font size, all HTML element’s font sizes grow proportionally with the size of the user’s screen.

Headings#

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Heading group#

Inside a <hgroup>, margins are collapsed, and the :last-child is muted.

Get inspired with CSS

How to use CSS to add glam to your Website?

<hgroup>
  <h2>Get inspired with CSS</h2>
  <p>How to use CSS to add glam to your Website?</p>
</hgroup>

Inline text elements#

Abbr. <abbr>

Bold  

Italic   <cite>

~~Deleted~~ <del>

Inserted <ins>

Ctrl + S <kbd>

Highlighted 

~~Strikethrough~~ <s>

Small 

Text _Sub 

Text ^Sup 

Underline 

Blockquote#

“Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really how it works.”
— Steve Jobs

<blockquote>
  “Design is a funny word. Some people think 
  design means how it looks. But of course, if 
  you dig deeper, it's really how it works.”
  <footer>
    <cite>— Steve Jobs</cite>
  </footer>
</blockquote>

Horizontal rule#

The <hr> tag renders a horizontal line.

Paragraph before the horizontal line.

Paragraph after the horizontal line.

<p>Paragraph before the horizontal line.</p>
<hr />
<p>Paragraph after the horizontal line.</p>

Edit this page on GitHub

Heading anchors

Links with href="#..." inside headings are automatically displayed as anchors:

Heading with anchor

How it works:

h1,
h2,
h3,
h4,
h5,
h6 {
  position: relative;

  a[aria-hidden="true"] {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    padding-right: 0.2ch;
    color: silver;
    text-decoration: none;
    visibility: hidden;
  }
  @media /* to avoid double-tap on touch devices */ (hover: hover) {
    &:hover {
      a[aria-hidden="true"] {
        visibility: visible;
      }
    }
  }
}

Content Typography