Typography

The typography included with Onyx is carefully optimized for readability and functionality. Included with the general typographic set are numerous bonus styles such as captions, callouts, and iconic presets you can insert in your articles at any time.

This is an H1 Headline

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from “de Finibus Bonorum et Malorum” by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

This is an H2 Heading

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from “de Finibus Bonorum et Malorum” by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

This is an H3 Subheading

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from “de Finibus Bonorum et Malorum” by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

This is an H4 Subheading

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from “de Finibus Bonorum et Malorum” by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

This is an H5 Subheading

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from “de Finibus Bonorum et Malorum” by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

List Style Examples:

Unordered List Example:

  • List Item One
    • Sublevel List Item A
    • Sublevel List Item B
    • Sublevel List Item C
  • List Item Two
  • List Item Three
  • List Item Four

Ordered List Example:

  1. List Item One
    1. Sublevel List Item A
    2. Sublevel List Item B
    3. Sublevel List Item C
  2. List Item Two
  3. List Item Three
  4. List Item Four

Check List Example:(<ul class= “check”>)

  • Checklist Item 1
  • Checklist Item 2
  • Checklist Item 3

Caption List Example:(<ul class= “captionlist”>)

  • Caption list Item 1
    • this is a sub-level list item in an unordered list with a class of ul.captionlist.
  • Caption list Item 2
    • this is a sub-level list item in an unordered list with a class of ul.captionlist.
  • Caption list Item 3
    • this is a sub-level list item in an unordered list with a class of ul.captionlist.

 

Caption Styles

Caption Title This is an additional typography style which can be used in this template. The code is simply <div class="caption"><span class="caption-title">Caption Title</span> Your text here..</div>
Caption Title This is an additional typography style which can be used in this template. The code is simply <div class="caption green"><span class="caption-title">Caption Title</span> Your text here..</div>
Caption Title This is an additional typography style which can be used in this template. The code is simply <div class="caption red"><span class="caption-title">Caption Title</span> Your text here..</div>
Caption Title This is an additional typography style which can be used in this template. The code is simply <div class="caption blue"><span class="caption-title">Caption Title</span> Your text here..</div>

Icon Classes

This is an alert style that can easily be displayed within your content by inserting the code below. This may help to serve your users with system error messages.- link color test

The dialog above is shown by entering: <div class="note alert">YOUR TEXT</div>

This is a informational style that can easily be displayed within your content by inserting the code below. This may help to accent additional information within an article.- link color test

The dialog above is shown by entering: <div class="note info">YOUR TEXT</div>

This is a warning style that can easily be displayed within your content by inserting the code below. This may help to serve warnings before proceeding with specified steps. - link color test

The dialog above is shown by entering: <div class="note warn">YOUR TEXT</div>

This is an acceptance style that can easily be displayed within your content by inserting the code below. You may wish to display this style when outlining success messages.- link color test

The dialog above is shown by entering: <div class="note accept">YOUR TEXT</div>

This is a CD/DVD style that can easily be displayed within your content by inserting the code below. You might use this style if outlining a band member or video credits. - link color test

The dialog above is shown by entering: <div class="note cd">YOUR TEXT</div>

This is a coffee style that can easily be displayed within your content by inserting the code below. You might use this to offer your readers the chance to donate or buy you a cup of coffee :) - link color test

The dialog above is shown by entering: <div class="note coffee">YOUR TEXT</div>

The dialog above is shown by entering: <div class="note email">YOUR TEXT</div>

This is a download style that can easily be displayed within your content by inserting the code below. You might use this to dispay file download links. Sample Download A | Sample Download B

The dialog above is shown by entering: <div class="note download">YOUR TEXT</div>

This is an idea style that can easily be displayed within your content by inserting the code below. You might use this to outline additonal tips in instructional articles. - link color test

The dialog above is shown by entering: <div class="note idea">YOUR TEXT</div>

This is an photo style that can easily be displayed within your content by inserting the code below. You might use this to give proper photo credits where credit is due- link color test

The dialog above is shown by entering: <div class="note photo">YOUR TEXT</div>

This is an secure style that can easily be displayed within your content by inserting the code below. You might use this to tell your readers that something is protected or secured. - link color test

The dialog above is shown by entering: <div class="note secure">YOUR TEXT</div>

This is an author style that can easily be displayed within your content by inserting the code below. You might use this to give author/book review credit. - link color test

The dialog above is shown by entering: <div class="note author">YOUR TEXT</div>

This is an search style that can easily be displayed within your content by inserting the code below. You might use this to remind your readers to search the forums before asking questions. - link color test

The dialog above is shown by entering: <div class="note search">YOUR TEXT</div>

This is an comment style that can easily be displayed within your content by inserting the code below. You might use this to highlight a comment made or to notify your users that comments are available. - link color test

The dialog above is shown by entering: <div class="note comment">YOUR TEXT</div>

This is an comment style that can easily be displayed within your content by inserting the code below. You might use this to notify your readers that time is running out!. - link color test

The dialog above is shown by entering: <div class="note time">YOUR TEXT</div>

This is an tools style that can easily be displayed within your content by inserting the code below. You might use this style to alert your readers of technical specifications. - link color test

The dialog above is shown by entering: <div class="note tools">YOUR TEXT</div>

The dialog above is shown by entering: <div class="note twitter">YOUR TEXT</div>

I decided to take a calligraphy class to learn how to [learn calligraphy]. I learned about serif and sans-serif typefaces, about varying the space between different letter combinations, about what makes great typography great. It was beautiful. Historical. Artistically subtle in a way that science can't capture. And I found it fascinating.

— Steve Jobs

Form Elements