Typography is more than just what fonts you use. Typography is everything that has to do with how 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

Main Heading One

Secondary Heading

Heading Three

Heading Four

Meta Large

Meta Small

---

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.

We paid a lot of attention to getting the basics of our typography right in the new WordPress Blog theme. The purpose of this page is to help determine what default settings are with CSS and to make sure that all possible elements are included. For example, we looked at headings. Lovely headings.

---

Between me and the above paragraph, there is a horizontal rule. 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 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. These special type 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.

 

Blockquotes are a great way to display and format quotations. Insert beautiful quotes.Martha Steward

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 doing by hand.

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 highlight a text, you simply need to wrap it into a <span> with the class “highlight”. This can be done in the Text editor view.

Two Column Layout

To split the text into a two columns layout you simply need to wrap it into a div container with class “twocolumn”. Having multiple columns allows for a very versatile ad grid, and, traditionally, newspapers were in the business of selling ads.babies in slings around front.There is a general rule that one line of unjustified text should have around 9-12 words. For justified text, these numbers are around 10-15 words. Since some words are longer and some shorter this is not a perfect measurement. Small columns of text are easier to read than large ones. Imagine a newspaper-sized line that stretched across an entire page. It would be very easy to skip a line. For justified text, these numbers are around 10-15 words. Since some words are longer and some shorter this is not a perfect measurement must ask yourself how to easily achieve these numbers? Don’t worry it is easy, you won’t have to count the characters one by one.

---

Some themes come with button styles built into the theme, which you can apply to a regular link by switching to HTML view in the post or page editor and adding the theme’s special CSS style class — “.button” — to the link, which is also known as an anchor tag.

Button

This is what the HTML for the button on the demo looks like:

<a class="button" href="#">Button</a>

The pre tag styles large blocks of code.

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.