Typography

Furatto offers a simple reset for most used elements, such as ul, p, h1,h2... and so much more...

Typography

To keep Furatto as clean and extensible as possible, we did not add any typographic styles over what's on Normalize. This means that you get many elements, such as headings, lists, which style is easy to override.

Headings

Headings from 1 to 6. Font size decreases from 36px to 14px.

Body copy

Furatto comes with global default settings font-size is 14px with a line-height of 1.6px.

Emphasis, small & strong

Alignment classes

In Furatto is really easy to align text with the alignment classes.

       
  <p class="text-center">Center text</p> 
       
     

       
  <p class="text-justify">Justified text</p> 
       
     

       
  <p class="text-right">Right text</p> 
       
     

Emphasis classes

Convenient emphasis classes for a more meaningful end.

       
  <p class="text-muted">.text-muted</p> 
       
     

       
  <p class="text-error">.text-error</p> 
       
     

       
  <p class="text-success">.text-success</p> 
       
     

Lists

List comes in many flavors, ordered lists, unordered lists. Thanks to Normalize all these elements have a basic styling and cross-browser consistency. you can extend them in your application.

Blockquotes

We modified the default render for blockquote in order to make it a bit prettier.

    
  <blockquote>
    <h4>A header</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>            
  </blockquote>
    
  

The blockquote comes with 3 modifier class names, primary, success and danger.

Available sass variables

Feel free to customize the default values for the typography by overwriting our sas variables.

  
$typography-line-height: 1.6 !default;
$typography-reset: true !default;

// Paragraphs settings
$paragraph-font-weight: inherit !default;
$paragraph-font-size: px-to-rems(14) !default;
$paragraph-line-height: 1.5 !default;
$paragraph-text-rendering: optimizeLegibility !default;

//Lists
$list-font-size: $paragraph-font-size !default;
$list-line-height: $paragraph-line-height !default;
$list-margin-bottom: px-to-rems(20) !default;
$list-margin-left: px-to-rems(15) !default;

//Data lists
$data-list-margin-bottom: px-to-rems(20) !default;
$data-list-line-height: 1.2 !default;
$data-list-font-weight: bold !default;
$data-list-data-margin-left: px-to-rems(10) !default;

// Anchors settings
$anchor-color: #0088cc !default;
$anchor-text-decoration: none !default;
$anchor-text-decoration-hover: underline !default;

// Headings settings
$headings-margin-top: 0.35714286rem !default;
$headings-margin-bottom: px-to-rems(16) !default;
$headings-font-weight: 400 !default;
$headings-line-height: 1.4 !default;
$headings-text-rendering: optimizeLegibility !default;
$headings-color: #222 !default;
$h1-font-size: px-to-rems(36) !default;
$h2-font-size: px-to-rems(28) !default;
$h3-font-size: px-to-rems(25) !default;
$h4-font-size: px-to-rems(20) !default;
$h5-font-size: px-to-rems(16) !default;
$h6-font-size: px-to-rems(14) !default;

//small settings
$small-color: #ecf0f1 !default;
$small-font-size: 60% !default;

//hr settings
$hr-color: #DDD !default;
$hr-style: solid !default;
$hr-border-width: 0.07142857rem !default;
$hr-margin-top: px-to-rems(22) !default;
$hr-margin-bottom: $hr-margin-top !default;

//Blockquote
$blockquote-color: #777 !default;
$blockquote-background: lighten(#EFEFEF, 5%) !default;
$blockquote-line-height: 1.8em !default;
$blockquote-border-width: 5px !default;
$blockquote-border-style: solid !default;
$blockquote-border-color: #DDD !default;
$blockquote-padding-left: 1.5em !default;
$blockquote-padding-right: $blockquote-padding-left !default;
$blockquote-padding-top: 1rem !default;
$blockquote-padding-bottom: $blockquote-padding-top !default;
$blockquote-border-primary-color: lighten(#3498d9, 20%) !default;
$blockquote-border-success-color: lighten(#2ECC71, 20%) !default;
$blockquote-border-danger-color: lighten(#E74C3C, 20%) !default;

//Media queries
$medium-screen: 70.85714286rem !default;
$medium-screen-max: 70.78571429rem !default;
$medium-screen-range: "(min-width: #{$medium-screen}) and (max-width: #{$medium-screen-max})" !default;