Table of contents

Typography

To provide a jump start on your layout, SFUMATO will reset your browser behavior and tune your typography. This includes font sizes and leading, list and table styles, and more.

Highlights

  • Default mobile font size prevents form zooming
  • Tables formatted to present data cleanly
  • Headline sizes that clearly denote heirarchy
  • Line spacing focused on readability
  • Properly spaced and indented lists
  • Ordered lists that display nested numbers
  • Preformatted text and code blocks that look great and scroll horizontally on mobile
  • Inline code blocks that fit with your text flow

Below are examples of the default styles for various elements.

Headlines

<h6> Heading 6
<h5> Heading 5

<h4> Heading 4

<h3> Heading 3

<h2> Heading 2

<h1> Heading 1

Mixed content

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sample Topic Headline

This is a subhead

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

— Johnny Appleseed

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • Superscript itemsup
  • Subscript itemsub
  • Small text for fine print.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

Lists

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

Ordered List

  1. list item 1 showing proper indentation, wrapping, and item spacing when the content of the list item is too long.
  2. list item 1
    1. list item 2
    2. list item 2
      1. list item 3
      2. list item 3
    3. list item 2
    4. list item 2
  3. list item 1
  4. list item 1

Unordered List

  • list item 1 showing proper indentation, wrapping, and item spacing when the content of the list item is too long.
  • list item 1
    • list item 2
    • list item 2
      • list item 3
      • list item 3
    • list item 2
    • list item 2
  • list item 1
  • list item 1

Tables

Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 4 Table Heading 5
Table Footer 1 Table Footer 2 Table Footer 3 Table Footer 4 Table Footer 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
scrollable

HTML
scrollable

Code

This demo site also uses Prism to syntax highlight the source code examples. 

                                                    
                                                        <p>
                                                            Hello, World!
                                                        </p>
scrollable

Inline code can look like this: <p>hello</p>.

HTML

                                            
                                                <div sf-code>
                                                    <div sf-code-inner>
                                                        <div sf-code-content>
                                                            <pre>
                                                                <code class="language-markup">
                                                                    <p>
                                                                        Hello, World!
                                                                    </p>
                                                                </code>
                                                            </pre>
                                                        </div>
                                                    </div>
                                                    <div><i class="fas fa-long-arrow-alt-left"></i> scrollable</div>
                                                </div>
scrollable