Default Theme Dark Theme
Tornado Logo
Tornado has become Phenix Design System

» Typography

Tornado Typography Style [ Fonts, Text Coloring, Heading, Global Text, Lists, Designed Block, Responsive Unites, and much more… ]

Sass Customize

in order to edit the Typography Elements you can use the css Selectors to overide the theme or you can edit it with sass src/SCSS/elements/_typography.scss

Font Families

Tornado Uses Roboto Google Font as Primary English Font Family and Almari for RTL Arabic Version , and the Third font is Tornado Font Icon for icons Glyphs.

/* Using Titles Font */
.Selector { font-family:var(--primary-font); }

/* Using Text Font */
.Selector { font-family:var(--secondary-font); }

/* Using Tornado Icons Font */
.Selector { font-family:var(--icons-font); }
CSS Fonts Usage Example

Headlines and Paragraphs

A Header Provides a Short Summary of Content , HTML Typography Headers are Sized With REM to Give Your Design a Responsive Headlines. in The Example’s Below You will See All Heading Level Size’s and Also Paragraphs With Defferent Sizes That Can Be Used as a Content for Head Titles.

Header Lvl.1 With Large Text

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores. 

<h1>Header Lvl.1 With Large Text</h1>
<p class="large-text">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores. </p>

Header Lvl.2 With Default Text

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.

<h2>Header Lvl.2 With Default Text</h2>
<p class="large-text">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.</p>

Header Lvl.3 With Meduim Text

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.

<h3>Header Lvl.3 With Meduim Text</h3>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.</p>

Type Header Lvl.4 With Small Text

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.

<h4>Type Header Lvl.4 With Small Text</h4>
<p class="small-text">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.</p>
Header Lvl.5 With Small Text

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti .

<h5>Header Lvl.5 With Small Text</h5>
<p class="small-text">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti .</p>
Header Lvl.6 With Small Text

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium. 

<h6>Header Lvl.6 With Small Text</h6>
<p class="small-text">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium. </p>

HTML Default Lists

HTML5 Default Listing Tags With Tornado Theme Applayed on it for More Flexible Lists.

Ordered List
  1. Tornado v2 Ordered List
  2. More Flexible Elements
  3. Builded With Sass
    1. Nested Ordered List Item
  4. Multi Languages Support [RTL]
    • Nested Unordered List Item
  5. Modern Userinterface Design
  6. Awesome Typography Styling
Unordered List
  • Tornado v2 Unordered List
  • More Flexible Elements
  • Builded With Sass
    • Nested Unordered List Item
  • Multi Languages Support [RTL]
  • Modern Userinterface Design
    1. Nested Ordered List Item
  • Awesome Typography Styling
Description List
Carousel
black hot drink
Tabs System
a quite lovely city
Accourdion System
white cold drink
Popup Modals
Sometimes can be a lovely city 
<!-- Ordered List -->
<ol>
    <li>Tornado v2 Ordered List</li>
    <li>More Flexible Elements</li>
    <li>Builded With Sass
        <ol>
            <li>Nested Ordered List Item</li>
        </ol>
    </li>
    <li>Multi Languages Support [RTL]
        <ul>
            <li>Nested Unordered List Item</li>
        </ul>
    </li>
    <li>Modern Userinterface Design</li>
    <li>Awesome Typography Styling</li>
</ol>

<!-- Unordered List -->
<ul>
    <li>Tornado v2 Unordered List</li>
    <li>More Flexible Elements</li>
    <li>Builded With Sass
        <ul>
            <li>Nested Unordered List Item</li>
        </ul>
    </li>
    <li>Multi Languages Support [RTL]</li>
    <li>Modern Userinterface Design
        <ol>
            <li>Nested Ordered List Item</li>
        </ol>
    </li>
    <li>Awesome Typography Styling</li>
</ul>

<!-- Description list -->
<dl>
    <dt>Carousel</dt>
    <dd>black hot drink</dd>

    <dt>Tabs System</dt>
    <dd>a quite lovely city </dd>

    <dt>Accourdion System</dt>
    <dd>white cold drink</dd>

    <dt>Popup Modals</dt>
    <dd>Sometimes can be a lovely city </dd>
</dl>

Blockquotes Themes

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. Abdullah , Source Name 
<blockquote>
    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. 
    <span class="quote-name">Abdullah , Source Name</span>
</blockquote>
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. Abdullah , Source Name 
<blockquote class="theme-2">
    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. 
    <span class="quote-name">Abdullah , Source Name</span>
</blockquote>
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. Abdullah , Source Name 
<blockquote class="theme-3">
    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. 
    <span class="quote-name">Abdullah , Source Name</span>
</blockquote>
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. Abdullah , Source Name 
<blockquote class="theme-4">
    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. 
    <span class="quote-name">Abdullah , Source Name</span>
</blockquote>

Typography Utilities

Class Name element description
rtl Any Elements Force Element Direction to RTL
ltr Any Elements Force Element Direction to LTR
color-inherit Any Elements Changing text Color to the Parent txt Color.
xLarge Size
display-h0 Any Elements Larger Size Text [ 5rem ]
display-h1 Any Elements Larger Size Text [ 4rem ]
display-h2 Any Elements Larger Size Text [ 3rem ]
display-h3 Any Elements Larger Size Text [ 2rem ]
Paragraph Size
large-text Any Elements Larger Size Text [ 1.125rem ]
meduim-text Any Elements Normal Size Text [ 1rem | 16px ]
small-text Any Elements Smaller Size Text [ 0.875rem ]
Font Style
tx-uppercase Any Elements Make The Text Uppercase
tx-capitalize Any Elements Make The First Letter of Every Word Capital
tx-line-through Any Elements Create Line Through The Text
Alignment
tx-align-start Any Elements Align The Text To The Page Direction Start Point
tx-align-end Any Elements Align The Text To The Page Direction End Point
tx-align-right Any Elements Align The Text To The Right
tx-align-center Any Elements Align The Text To The Center
tx-align-left Any Elements Align The Text To The Left
tx-align-justify Any Elements Justify and Align Text For The Line To Start and End on The Same End Point
tx-nowrap Any Elements Making Endless 1 Line Text and Hide the Flowing Text.
line-height
lineheight-1 Any Elements Text Lineheight 100% of the Size.
lineheight-130 Any Elements Text Lineheight 130% of the Size.
lineheight-150 Any Elements Text Lineheight 150% of the Size.
lineheight-160 Any Elements Text Lineheight 160% of the Size.

Copyright (c) 2016-present, Tornado UI Licensed under the terms of the MIT License.