Typography

This page represents typographical aspects of this theme. Take care about your typography to make better user experience for your readers. How to achieve that?

  • Learn more about typography, escpecially about the most often used codes, such as <p>, <h1>, <h2>, <h3>, <img> and <a>.
  • This theme has valid XHTML, but if you want to keep it like that, you must learn and follow the XHTML principles. Also, if some of your plugins are not XHTML valid, pages based on this plugin would not be XHTML valid as well (no matter if template itself is valid).
  • Familiarize yourself with CSS styles that comes with this template.
  • Never copy/paste directly from layout text editors, such as Microsoft Word or OpenOffice. Try to paste text in plain editors first (such as Notepad).
  • Use a WYSIWYG editor that comes with WordPress or install a better editor, but always check your code in the editor’s HTML mode.

All typographic elements listed on this page are available through shortcodes that will be incorporated in the WordPress text editor (TinyMCE) after theme installation.

Headings and Paragraphs:

Heading One

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Heading Two

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Heading Three

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Heading Four

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Text highlighted with color marker:

Lorem ipsum [highlight style=’yellow’]dolor sit amet[/highlight], consetetur sadipscing elitr, at accusam aliquyam [highlight style=’green’]diam dolore dolores[/highlight] duo eirmod eos erat, [highlight style=’blue’]et nonumy sed tempor[/highlight] et et invidunt [highlight style=’purple’]justo labore stet[/highlight] clita ea et gubergren, [highlight style=’pink’]kasd magna no[/highlight] rebum. sanctus [highlight style=’orange’]sea sed takimata[/highlight] ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Text Blocks:

[box style=’error’]Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.[/box]
[box style=’info’]Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.[/box]
[box style=’warning’]Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.[/box]
[box style=’typewriter’]Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.[/box]

[box style=’quote’]Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.[/box]

Paragraphs Marked with a Number/Letter:

[dropcap style=’default’]A[/dropcap]orem ipsum dolor sit amet, consetetur sadipscing elitr orem ipsum dolor sit amet, consetetur sadipscing elitr orem ipsum dolor sit amet, consetetur sadipscing elitr. Nam liber tempor cum soluta nobis eleifend option congue nihil. Consetetur sadipscing elitr orem ipsum dolor sit amet, consetetur sadipscing elitr. Nam liber tempor cum soluta nobis eleifend option congue nihil.

[dropcap style=’circle’]B[/dropcap]orem ipsum dolor sit amet, consetetur sadipscing elitr orem ipsum dolor sit amet, consetetur sadipscing elitr orem ipsum dolor sit amet, consetetur sadipscing elitr. Nam liber tempor cum soluta nobis eleifend option congue nihil. Consetetur sadipscing elitr orem ipsum dolor sit amet, consetetur sadipscing elitr. Nam liber tempor cum soluta nobis eleifend option congue nihil.

[dropcap style=’square’]1[/dropcap]Lorem ipsum dolor sit amet, consetetur sadipscing elitr orem ipsum dolor sit amet, consetetur sadipscing elitr orem ipsum dolor sit amet, consetetur sadipscing elitr. Nam liber tempor cum soluta nobis eleifend option congue nihil. Consetetur sadipscing elitr orem ipsum dolor sit amet, consetetur sadipscing elitr. Nam liber tempor cum soluta nobis eleifend option congue nihil.

[dropcap style=’round’]2[/dropcap]Lorem ipsum dolor sit amet, consetetur sadipscing elitr orem ipsum dolor sit amet, consetetur sadipscing elitr orem ipsum dolor sit amet, consetetur sadipscing elitr. Nam liber tempor cum soluta nobis eleifend option congue nihil. Consetetur sadipscing elitr orem ipsum dolor sit amet, consetetur sadipscing elitr. Nam liber tempor cum soluta nobis eleifend option congue nihil.

Unordered and Ordered Lists

Classic ordered list:

[list style=’ordered’]
[list_item]List element[/list_item]
[list_item]List element[/list_item]
[list_item]List element[/list_item]
[/list]

Arrow list:

[list style=’arrow’]
[list_item]List element[/list_item]
[list_item]List element[/list_item]
[list_item]List element[/list_item]
[/list]

Left arrow list:

[list style=’arrowleft’]
[list_item]List element[/list_item]
[list_item]List element[/list_item]
[list_item]List element[/list_item]
[/list]

Calendar list:

[list style=’calendar’]
[list_item]List element[/list_item]
[list_item]List element[/list_item]
[list_item]List element[/list_item]
[/list]

Checklist:

[list style=’checklist’]
[list_item]List element[/list_item]
[list_item]List element[/list_item]
[list_item]List element[/list_item]
[/list]

Deleted items list:

[list style=’delete’]
[list_item]List element[/list_item]
[list_item]List element[/list_item]
[list_item]List element[/list_item]
[/list]

E-mails list:

[list style=’email’]
[list_item]List element[/list_item]
[list_item]List element[/list_item]
[list_item]List element[/list_item]
[/list]

Files list:

[list style=’file’]
[list_item]List element[/list_item]
[list_item]List element[/list_item]
[list_item]List element[/list_item]
[/list]

Heart list:

[list style=’heart’]
[list_item]List element[/list_item]
[list_item]List element[/list_item]
[list_item]List element[/list_item]
[/list]

Information list:

[list style=’information’]
[list_item]List element[/list_item]
[list_item]List element[/list_item]
[list_item]List element[/list_item]
[/list]

Locked items list:

[list style=’lock’]
[list_item]List element[/list_item]
[list_item]List element[/list_item]
[list_item]List element[/list_item]
[/list]

Pencil list:

[list style=’pencil’]
[list_item]List element[/list_item]
[list_item]List element[/list_item]
[list_item]List element[/list_item]
[/list]

List of persons:

[list style=’person’]
[list_item]List element[/list_item]
[list_item]List element[/list_item]
[list_item]List element[/list_item]
[/list]

RSS links list:

[list style=’rss’]
[list_item]List element[/list_item]
[list_item]List element[/list_item]
[list_item]List element[/list_item]
[/list]

Shopping items list:

[list style=’shop’]
[list_item]List element[/list_item]
[list_item]List element[/list_item]
[list_item]List element[/list_item]
[/list]

Songs playlist:

[list style=’song’]
[list_item]List element[/list_item]
[list_item]List element[/list_item]
[list_item]List element[/list_item]
[/list]

Yellow stars list:

[list style=’star’]
[list_item]List element[/list_item]
[list_item]List element[/list_item]
[list_item]List element[/list_item]
[/list]

White stars list:

[list style=’star2′]
[list_item]List element[/list_item]
[list_item]List element[/list_item]
[list_item]List element[/list_item]
[/list]

Trashed items list:

[list style=’trash’]
[list_item]List element[/list_item]
[list_item]List element[/list_item]
[list_item]List element[/list_item]
[/list]

Tweaks list:

[list style=’tweak’]
[list_item]List element[/list_item]
[list_item]List element[/list_item]
[list_item]List element[/list_item]
[/list]

Unlocked items list:

[list style=’unlock’]
[list_item]List element[/list_item]
[list_item]List element[/list_item]
[list_item]List element[/list_item]
[/list]

Warning list:

[list style=’warn’]
[list_item]List element[/list_item]
[list_item]List element[/list_item]
[list_item]List element[/list_item]
[/list]

 

Inset Styles:

Block TitleDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisi.To make such block of text, wrap it into a span with a class of inset-left. Optionally, inside this span you can add another span with class of inset_title for title. Here’s an example: <span class=”inset_left”><span class=”inset_title”>Title</span>…your text goes here…</span>. In a similar way, you can align the block of text to the right. Use inset_right, instead of inset_left. Block TitleDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisi. If you need to change width or something else in those blocks, you can edit classes .inset_left and .inset_right in CSS stylesheet template_css.css.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisi. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisi.

Buttons:

[button url=’#’ size=’small’ style=’blue-light’] Button text [/button] [button url=’#’ size=’small’ style=’blue’] Button text [/button] [button url=’#’ size=’small’ style=’blue-dark’] Button text [/button] [button url=’#’ size=’small’ style=’cyan’] Button text [/button] [button url=’#’ size=’small’ style=’green-light’] Button text [/button] [button url=’#’ size=’small’ style=’green’] Button text [/button] [button url=’#’ size=’small’ style=’green-dark’] Button text [/button] [button url=’#’ size=’small’ style=’orange’] Button text [/button] [button url=’#’ size=’small’ style=’purple’] Button text [/button] [button url=’#’ size=’small’ style=’red-light’] Button text [/button] [button url=’#’ size=’small’ style=’red’] Button text [/button] [button url=’#’ size=’small’ style=’red-dark’] Button text [/button] [button url=’#’ size=’small’ style=’grey-light’] Button text [/button] [button url=’#’ size=’small’ style=’grey-dark’] Button text [/button] [button url=’#’ size=’small’ style=’black’] Button text [/button]

[button url=’#’ size=’medium’ style=’blue-light’] Button text [/button] [button url=’#’ size=’medium’ style=’blue’] Button text [/button] [button url=’#’ size=’medium’ style=’blue-dark’] Button text [/button] [button url=’#’ size=’medium’ style=’cyan’] Button text [/button] [button url=’#’ size=’medium’ style=’green-light’] Button text [/button] [button url=’#’ size=’medium’ style=’green’] Button text [/button] [button url=’#’ size=’medium’ style=’green-dark’] Button text [/button] [button url=’#’ size=’medium’ style=’orange’] Button text [/button] [button url=’#’ size=’medium’ style=’purple’] Button text [/button] [button url=’#’ size=’medium’ style=’red-light’] Button text [/button] [button url=’#’ size=’medium’ style=’red’] Button text [/button] [button url=’#’ size=’medium’ style=’red-dark’] Button text [/button] [button url=’#’ size=’medium’ style=’grey-light’] Button text [/button] [button url=’#’ size=’medium’ style=’grey-dark’] Button text [/button] [button url=’#’ size=’medium’ style=’black’] Button text [/button]

[button url=’#’ size=’large’ style=’blue-light’] Button text [/button] [button url=’#’ size=’large’ style=’blue’] Button text [/button] [button url=’#’ size=’large’ style=’blue-dark’] Button text [/button] [button url=’#’ size=’large’ style=’cyan’] Button text [/button] [button url=’#’ size=’large’ style=’green-light’] Button text [/button] [button url=’#’ size=’large’ style=’green’] Button text [/button] [button url=’#’ size=’large’ style=’green-dark’] Button text [/button] [button url=’#’ size=’large’ style=’orange’] Button text [/button] [button url=’#’ size=’large’ style=’purple’] Button text [/button] [button url=’#’ size=’large’ style=’red-light’] Button text [/button] [button url=’#’ size=’large’ style=’red’] Button text [/button] [button url=’#’ size=’large’ style=’red-dark’] Button text [/button] [button url=’#’ size=’large’ style=’grey-light’] Button text [/button] [button url=’#’ size=’large’ style=’grey-dark’] Button text [/button] [button url=’#’ size=’large’ style=’black’] Button text [/button]

Image with caption:

skies customize

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Be the first to comment on "Typography"

Leave a comment

Your email address will not be published.


*