Simple
Typography
with Sass

Make Type Simply Beautiful

Making the type on your blog beautiful with ease. Using Sass variables to calculate line heights, font sizes, margins and paddings. You create the amazing content and simply make it beautiful.

Get Started
  • Go to the git repo: Simple Typography with Sass.
  • Copy the .scss files to your codebase.
  • Make sure to @import these files into your own codebase.
  • Done 🚀
Sass files:
  • style.scss
    • Simple Typography Settings - All settings for your type.
  • _mixins.scss
    • REM mixin to calculate all font sizes across type.
  • _reset.scss
    • Eric Meyer’s CSS Reset.

Headers


Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Lists


  • Item 1
    • Item 1
    • Item 2
  • Item 2
  • Item 3
  • Item 4
  1. Item 1
    1. Item 1
    2. Item 2
  2. Item 2
  3. Item 3
  4. Item 4

Code Block


header {
    width:100%;
    height:100vh;
}

/* 1vw = 1% of viewport width */
/* 1vh = 1% of viewport height */

Paragraphs


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit inventore rerum, ad eos ex harum, debitis adipisci ut laboriosam placeat at fugiat earum, impedit quidem dicta repellendus vitae! Esse, quos.

Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Blockquotes


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cras mattis consectetur purus sit amet fermentum.

Image Caption


Fig1. - A view of the pulpit rock in Norway.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non totam cumque numquam eligendi a vitae ex. Dolorum hic itaque consequuntur mollitia nisi voluptatem in est, soluta eos molestias. Suscipit, consectetur.

Table


Header Header Header
Content Content Content
Content Content Content
Content Content Content
Content Content Content

Header 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit inventore rerum, ad eos ex harum, debitis adipisci ut laboriosam placeat at fugiat earum, impedit quidem dicta repellendus vitae! Esse, quos.

Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Header 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit inventore rerum, ad eos ex harum, debitis adipisci ut laboriosam placeat at fugiat earum, impedit quidem dicta repellendus vitae! Esse, quos.

  • Item 1
    • Item 1
    • Item 2
  • Item 2
  • Item 3
  • Item 4
  1. Item 1
    1. Item 1
    2. Item 2
  2. Item 2
  3. Item 3
  4. Item 4

Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione molestiae optio quod praesentium doloremque, at facere hic nostrum?

Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Fig1. - A view of the pulpit rock in Norway.

Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Header Header Header
Content Content Content
Content Content Content
Content Content Content
Content Content Content

Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Git Repo