Typography

Learn more about the typography that is used in Neumorphism UI

Neumorphism UI uses Nunito Sans from Google fonts by default. You can change the font by importing another font from Google Fonts and changing the $font-family-base Sass variable value from _variables.scss.

Headings

h1. Neumorphism UI heading

h2. Neumorphism UI heading

h3. Neumorphism UI heading

h4. Neumorphism UI heading

h5. Neumorphism UI heading
h6. Neumorphism UI heading
<h1>h1. Neumorphism UI heading</h1>
<h2>h2. Neumorphism UI heading</h2>
<h3>h3. Neumorphism UI heading</h3>
<h4>h4. Neumorphism UI heading</h4>
<h5>h5. Neumorphism UI heading</h5>
<h6>h6. Neumorphism UI heading</h6>

Display headings

Use .display-1-*, .display-2-* (eg. .display-1-lg, .display-2-sm) to increase the font size of text elements based on screen size.

Display 1

Display 2

Display 3

Display 4

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

Paragraphs

Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.

My favorite things in life don’t cost any money. It’s really clear that the most precious resource we all have is time.

<p>Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.</p>
<p>My favorite things in life don’t cost any money. It’s really clear that the most precious resource we all have is time.</p>

Lead Paragraphs

Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.

<p class="lead">Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.</p>

Inline modifiers

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

Blockquotes

"Themesberg makes beautiful products to help people with creative ideas succeed. Our company empowers millions of people."
Jason Doe
<blockquote class="blockquote text-center">
    "Themesberg makes beautiful products to help people with creative ideas succeed. Our company empowers millions of people."
<footer class="blockquote-footer mt-3 text-primary">Jason Doe</footer>
</blockquote>

Lists

Unordered list

  • Minutes of the last meeting
  • Do we need yet more meetings?
  • Any other business
    • Programming
    • Web Design
    • Database
  • Something funny
<ul>
    <li>Minutes of the last meeting</li>
    <li>Do we need yet more meetings?</li>
    <li>Any other business
        <ul>
            <li>Programming</li>
            <li>Web Design</li>
            <li>Database</li>
        </ul>
    </li>    
    <li>Something funny</li>
</ul>

Ordered list

  1. Minutes of the last meeting
  2. Do we need yet more meetings?
  3. Any other business
    1. Programming
    2. Web Design
    3. Database
  4. Something funny
<ol>
    <li>Minutes of the last meeting</li>
    <li>Do we need yet more meetings?</li>
    <li>Any other business
        <ol>
            <li>Programming</li>
            <li>Web Design</li>
            <li>Database</li>
        </ol>
    </li>    
    <li>Something funny</li>
</ol>