Small Tabs › Style Guide


Typography


Small Tabs employs the Champion and Sentinel Screen Smart web fonts from Hoefler&Co. as its primary typefaces. A basic Helvetica Neue font stack is also used for smaller interface text and labels.

Headings

H1: It is a Period of Civil War

H2: It is a Period of Civil War

H3: It is a Period of Civil War

H4: It is a Period of Civil War

H5: It is a Period of Civil War
H6: It is a Period of Civil War
Paragraphs & Lists

It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.

During the battle, Rebel spies managed to steal secret plans to the Empire’s ultimate weapon, the Death Star, an armored space station with enough power to destroy an entire planet.

Pursued by the Empire’s sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy…

Unordered Lists

Ordered Lists

  1. This is the first item in an ordered list.
  2. This is the second item in an ordered list.
  3. This is the third item in an ordered list.
  4. This is the fourth item in an ordered list.

Nested Lists

  1. This is the first item in an ordered list.
    • This is the first nested item within the first item.
    • This is the second nested item within the first item.
    • This is the third nested item within the first item.
  2. This is the second item in an ordered list.
  3. This is the third item in an ordered list.
  4. This is the fourth item in an ordered list.
Text Attributes

This is a text link

Strong is used to indicate strong importance

This text has added emphasis

The b element is stylistically different text from normal text, without any special importance

The i element is text that is set off from the normal text

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation

This text is deleted and This text is inserted

This text has a strikethrough

Superscript®

Subscript for things like H2O

This small text is small for for fine print, etc.

Abbreviation: HTML

Keybord input: Cmd

This text is a short inline quotation

This is a citation

The dfn element indicates a definition.

The mark element indicates a highlight

This is what inline code looks like.

This is sample output from a computer program

The variarble element, such as x = y