Content

Typography

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

Responsive font sizes
Breakpointxssmmdlgxlxxl
Base16px17px18px19px20px21px
<h1>32px34px36px38px40px42px
<h2>28px29.75px31.5px33.25px35px36.75px
<h3>24px25.5px27px28.5px30px31.5px
<h4>20px21.25px22.5px23.75px25px26.25px
<h5>18px19.125px20.25px21.375px22.5px23.625px
<h6>16px17px18px19px20px21px
<small>14px14.875px15.75px16.625px17.5px18.375px

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

Italic <i> <em> <cite>

Deleted <del>

Inserted <ins>

Ctrl + S <kbd>

Highlighted <mark>

Strikethrough <s>

Small <small>

Text Sub <sub>

Text Sup <sup>

Underline <u>

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