The Style Guide

Typography is more than just what fonts you use. Typography is everything that has to do with how the text looks—such as font size, line length, color, and even more subtle things like the whitespace around a text. Good typography sets the tone of your written message and helps to reinforce its meaning and context.

Display

Heading One

Secondary Heading

Heading Three

Heading Four

Heading Five & Six

A lead paragraph is a short paragraph set in a larger font size that opens an article. The purpose of a lead paragraph is to give the reader a quick summary of the story and provide a hook to entice further reading.

Paragraphs only need enough space below them to let the reader know they are starting on a new paragraph. Any more space than that is distracting and breaks up the flow of reading. White space is important, but you don’t want huge gaps all down your page.

Are you still making bulleted and numbered lists by manually typing bullets or numbers at the beginning of each line? In the 21st century, this is a task no one should be done by hand.

1. The dining experience. Apart from serving good food, customers look for a good overall experience when they visit a restaurant. When you go out, you want to know that you are eating in a clean environment and getting the best service
2. High quality food. This is the best way to attract more customers to your restaurant. Always taste-test your food so that you know how it tastes and you know your customers will like it.
3. The price factor. We should always price their food right. If your food is overpriced for its taste, customers will definitely lose interest.

Heading Two Formatting

Opening paragraphs often deserve some form of decorative type treatment to help draw the reader in. Two such methods are initial small caps and drop caps. Paragraphs only need enough space below them to let the reader know they are starting on a new paragraph.

“Dining is and always was a great artistic opportunity. Study and love nature, it will never fail you.”

Frank Lloyd Wright, 1959

Any more space than that is distracting and breaks up the flow of reading. White space is important, but you don’t want huge gaps all down your page. These special type of treatments serve to mark a clear beginning to an article and can add a sense of formality. Drop caps have a long history of typography, dating back to the earliest days of typesetting.

Paragraphs only need enough space below them to let the reader know they are starting on a new paragraph. Any more space than that is distracting and breaks up the flow of reading. White space is important, but you don’t want huge gaps all down your page.

Heading Three

Tables are useful for layouts where text needs to be positioned side-by-side or floating at specific locations on the page. If making these is frustrating with the usual layout tools, try using a table.

Type	Font	Description
Humanist	Sabon	Closely connected to calligraphy
Transitional	Baskerville	More abstract and less organic
Modern	Bodoni	Note the thin, straight serifs
Slab Serif	Clarendon	Egyptian typefaces have heavy serifs

To accentuate a text, you simply need to apply to it both methods of emphasis: bold and italic altogether.

You can also highlight a text using the Highlight text style option with any background color. Apply only a text color to apply an alternative highlight styling.

Text Highlights

Highlight only using the text color

Highlight only using the background color

Separators

Decorative: simple ornament used to highlight headlines

Elaborate: sophisticated separator, having together both styles

Simple: a plain separator is used to space out sections.

Blank: a transparent separator (not visible to the user) only used to space out sections using the Space and Sizing component.

Code

The inline code style displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code.

The Keyboard input style represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device.

The Code block represents preformatted text which is to be presented exactly as written in the HTML file. The text is typically rendered using a non-proportional, or monospaced, font. Whitespace inside this element is displayed as written.

pre {
	margin: 0 0 5px;
	font-weight: bold;
	font-size: 16px;
	line-height: 1.5;
}

And that’s a wrap, yo! You survived the tumultuous waters of a proper Style Guide.