Style Guide

This page demonstrates the basic typography styles of the theme, including headings, paragraphs, code formatting, lists, blockquotes, tables and other typographic elements.

Heading One Looks Like This

Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed.

Heading Two Looks Like This

The arrangement of type involves selecting typefaces, point size, line length, leading, tracking, and adjusting the space within letters pairs (kerning).

Heading Three Looks Like This

The term typography is also applied to the style, arrangement, and appearance of the letters, numbers, and symbols created by the process.

Heading Four Looks Like This

Type design is a closely related craft, sometimes considered part of typography. Most typographers do not design typefaces.

Heading Five Looks Like This

Typography is the work of typesetters, compositors, typographers, graphic designers, art directors, comic book artists, graffiti artists, and many more.

Heading Six Looks Like This

Until the Digital Age, typography was a specialized occupation. Digitization opened up typography to new generations of previously unrelated designers.

Code Formatting

body {
  margin: 0;
  color: #58585b;
  background: #fafafa;
  line-height: 1.5;
}

Unordered List

  • Pineapple
  • Mango
  • Orange
  • Banana

Ordered List

  1. Tomato
  2. Bell Pepper
  3. Cucumber
  4. Pumpkin

Mixed List

  1. Pineapple
  2. Mango
    • Proteins
      1. Cystine
      2. Histidine
      3. Isoleucine
    • Carbohydrates
      1. Fiber
      2. Starch
      3. Sugars
    • Fats
      1. Monounsaturated
      2. Polyunsaturated
      3. Polyunsaturated
  3. Orange
  4. Banana

Drop Cap

A drop cap is the first character of a document or paper that is the largest letter of that page and takes up several lines or sentences of the first paragraph. Below is a basic example of a drop cap. Drop caps should be sparingly used. It is best used just once where the text starts. The attractiveness of drop caps is such that even a single use calls out attention to the text that follows. A bit of care with that first letter and you may just find readability improving.

To add a drop cap, simply wrap the first letter with a span with a drop cap class

<span class="dropcap">C</span>offee...

Highlight

There are many cases when you need to draw user’s attention to a specific part of the sentence. Highlighting the text may be the answer. Simply wrap the words you need to be highlighted with the  highlight class:

<span class="highlight">Highlighted text</span>

Blockquotes

Sir Winston Leonard Spencer-Churchill was a British statesman who was the Prime Minister of the United Kingdom from 1940 to 1945 and again from 1951 to 1955. Churchill was also an officer in the British Army, a historian, a writer and an artist. He won the Nobel Prize in Literature, and was the first person to be made an honorary citizen of the United States.

Success is not final, failure is not fatal, it is the courage to continue that counts.
Winston Churchill

Churchill was born into the family of the Dukes of Marlborough, a branch of the Spencer family. His father, Lord Randolph Churchill, was a charismatic politician who served as Chancellor of the Exchequer; his mother, Jennie Jerome, was an American socialite. As a young army officer, he saw action in British India, the Sudan, and the Second Boer War. He gained fame as a war correspondent.