TYPOGRAPHY

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

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); }

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 Different Sizes That Can Be Used as a Content for Head Titles.

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

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

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

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

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

<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 Applied on it for More Flexible Lists.

<!-- 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

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

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

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

<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