Typography

Great care has been taken to ensure proper spacing, vertical rhythm, and typographic style throughout Tailcoat.

2.1 _config.scss Back To Top

Font Families

Tailcoat uses two main font stacks:

$body-font:    "Lucida Grande", "Segoe UI", "Arial", sans-serif !default;
$header-font:  "Avenir LT W01 65 Medium", Arial, Helvetica, sans-serif !default;

The "body" font stack is made up of the default fonts from several different devices, giving body text a "native" look on most devices and saving on rendering time by avoiding a web font. The "header" font stack has variations is weight, and is provided through a fast fonts subscription.

There are multiple sass variables that represent these font stacks (set in the config):

$body-font
$header-light
$header-font
$header-bold

You can also use the these variables as static classes to give elements a specific font-stack, see Font Family Classes for more.

.body-font - Lucida Grande
.header-light - Avenir LT W01 35 Light
.header-font - Avenir LT W01 65 Medium
.header-bold - Avenir LT W01 85 Heavy

Amazingly few discotheques provide jukeboxes.

default

Amazingly few discotheques provide jukeboxes.

.body-font

Amazingly few discotheques provide jukeboxes.

.header-light

Amazingly few discotheques provide jukeboxes.

.header-font

Amazingly few discotheques provide jukeboxes.

.header-bold

<p class="leader-1 large">
    Amazingly few discotheques provide jukeboxes.
</p>

2.1.1 _config.scss Back To Top

Font Sizes

Base font-size and line-height can be set in this config section. Default is 16px/24px.

Defaults

$relative-font-sizing - true
$base-font-size - 16px
$base-line-height - 24px

2.2 _elements.scss Back To Top

Headers

By default, headers are set in Avenir LT Medium. This can be easily changed with the $header-font config variable. Default header styles can be seen below:

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

<h3>Header 3</h3>

Modifiers

.divider - add a light gray border under the header
.icon-globe - add any icon class to give the header padding and that icon
.bold - sets the font to the bolder option created in config
.light - sets the font to the lighter option created in config
.gray - sets the color to the gray base color
.inline - header will be inline instead of block

Header 3

default

Header 3

.divider

Header 3

.icon-globe

Header 3

.bold

Header 3

.light

Header 3

.gray

Header 3

.inline

<h3>Header 3</h3>

2.3 _elements.scss Back To Top

Paragraphs

Paragraph style is very simple. In order to maintain a good vertical flow a bottom margin is applied by default. There is one modifier to remove this default. See style guide 12.5 (Configuration - Typography) to learn about font stacks and default sizes. Obviously, inline elements such as b, strong, dfn, q, and small are all styled by default as well.

Modifiers

.no-trailer - eliminates default margin-bottom
.large - larger font-size
.light - use the light option of the header font

Great care has been taken to ensure proper spacing, vertical rhythm, and typographic style throughout the style guide.

default

Great care has been taken to ensure proper spacing, vertical rhythm, and typographic style throughout the style guide.

.no-trailer

Great care has been taken to ensure proper spacing, vertical rhythm, and typographic style throughout the style guide.

.large

Great care has been taken to ensure proper spacing, vertical rhythm, and typographic style throughout the style guide.

.light

<p>Great care has been taken to ensure proper spacing, vertical rhythm, and typographic style throughout the style guide.</p>

2.4 _elements.scss Back To Top

Blockquotes

Blockquotes will receive a left border, margin, and a lighter color.

Everything is designed.
Few things are designed well.

default

<blockquote>
  Everything is designed.<br>
  Few things are designed well.
</blockquote>

2.5 _elements.scss Back To Top

Links

A link's default text-decoration property is none, although this can be set in the config. See style guide 11.6.4 to learn about setting default colors of links.

Modifiers

.no-color - removes the link color in favor of the normal body color.

Link default

Link .no-color

<a href="#">Link</a>

2.6 _elements.scss Back To Top

Lists

<li> elements inside an <ul> receive a list-style-type of none, and a subtle bullet background image by default.

<dl> elements can also be given a glass of .inline to stack them left.

.inline - displays the list inline
.bulleted - adds a blue bullet to each list item
.compact - removes the padding and margin from unordered lists
.compact.inline - removes the padding and margin and displays inline

One
Two
Three

default

One
Two
Three

.inline

One
Two
Three

.bulleted

One
Two
Three

.compact

One
Two
Three

.compact.inline

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

2.6.1 _elements.scss Back To Top

Ordered Lists

<ol> inside the content-area class will receive a "numbered list" style. You can also use the .numbered class on any <ol> to use these styles.

.numbered - uses the numbered list style

One
Two
Three

default

One
Two
Three

.numbered

<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ol>

2.7 _elements.scss Back To Top

Mark

Mark elements will receive a small text size, and be in all uppercase by default

.blue - make the mark blue

Beta default

Beta .blue

<mark>Beta</mark>

2.8 _elements.scss Back To Top

Code

Code blocks should be written as a <code> tag within a <pre> tag. the <code> tag can also be used inline as needed.

<pre id="curl">
  <code>
    Sample code
  </code>
</pre>

Here is an example of the alert function

alert("Hello World");

default

<p>Here is an example of the <code>alert</code> function</p>
<pre><code>alert("Hello World");</code></pre>

2.9 _elements.scss Back To Top

Small

The <small> tag will be sized slightly smaller and given a gray color.

<small>Copyright &copy; 2013</small>

2.10 _elements.scss Back To Top

Horizontal Rules

All <hr /> tags are styled by default with top and bottom margin, and a 1px gray line.

default

<hr />

2.11 _modifiers.scss Back To Top

Font Family Classes

You can also use the these static classes to give elements a specific typeface:

.body-font - Lucida Grande
.header-light - Avenir LT W01 35 Light
.header-font - Avenir LT W01 65 Medium
.header-bold - Avenir LT W01 85 Heavy

Amazingly few discotheques provide jukeboxes.

default

Amazingly few discotheques provide jukeboxes.

.body-font

Amazingly few discotheques provide jukeboxes.

.header-light

Amazingly few discotheques provide jukeboxes.

.header-font

Amazingly few discotheques provide jukeboxes.

.header-bold

<p class="leader-1 large">
    Amazingly few discotheques provide jukeboxes.
</p>

2.12 _modifiers.scss Back To Top

Simple Type Modifiers

There are also a few static classes that can help you quickly style the text.

.center-text - center the text of that element and all elements inside it
.white-text - makes the text of that element and all nested elements white
.red-text - adds the "caution" color to that text element
.error-text - adds the "caution" color to that text element
.green-text - adds the "success" color to that text element
.success-text - adds the "success" color to that text element
.show-visited-links - makes all anchors inside purple if visited
.overflow-ellipsis - force no-wrap on an element, and apply overlfow ellipsis

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.

default

.center-text

.white-text

.red-text

.error-text

.green-text

.success-text

.show-visited-links

.overflow-ellipsis

<p class=" leader-1 no-trailer">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.</p>
<p class=" no-trailer"><a href="/">Read More</a></p>