Fonts and Typography

Print

The Smart Choice CMS 3 font styles for major website types. Each font style is actually a combination of 2 font types: one for content text, another for heading text and main navigation text. Font style is configured by template parameter Template Font.

 

 

Business / Corporation Website font style

This is the combination of Verdana (for heading text) and Arial (for content text). The alternative fonts for Mac OS users are Geneva and Helvetica respectively.

This compact neat font style is excellent choice for business oriented websites as well as corporate websites. The combination of Verdana and Arial font type looks very natural and common for most of users since they are most popular font types used on the Internet.

 

Personal / Blog Website font style

This is the combination of Georgia (for heading text) and Trebuchet MS (for content text). The alternative fonts for Mac OS users are serif and Helvetica respectively.

This font style is little bigger then normal which make it perfect choice for small websites like personal or blog websites. The combination of Georgia and Trebuchet MS makes content very easy to read and the looks impressive.

 

Online News / Magazines font style

This is the combination of Palatino Linotype (for heading text) and Times New Roman (for content text). The alternative fonts for Mac OS users are Palatino and Times respectively.

This font style utilizes another very popular font called Times New Roman. This font is widely used in printing industry and in some of extremely popular online news website like The New York Times. If you want to run online news / magazine website, it's worth to try this font combination.

 

Ultimate content styling (Heading 1)

After years of website design & development we are convinced that typography is one of the most important aspect of online presentation. JSN Epic was created with extreme focus on typography and we believe it contains the most comprehensive content presentation capability. Headings, text, links, tables, images, everything was designed with high level of refinement.

JSN Epic Free supports only some very basic typography. JSN Epic PRO supports all typography features shown on this page.

Text styling (Heading 2)

Text columns division (Heading 3)

It?s pretty common situation when you need to arrange your content in multiple columns. The easiest way is to create a table and insert content text there, but it?s not the best method. Your content will not accessible to search engine and screen reader. JSN Epic offers you accessible method to create multiple column content.

Content arranged in 2 columns (Heading 4)

Example: <div class=”grid2”><div class=”grid-col”>…</div><div class=”grid-col grid-lastcol”>…</div></div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam nec odio. Vivamus turpis metus, feugiat sit amet, pulvinar sed, tincidunt sit amet, massa.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam nec odio. Vivamus turpis metus, feugiat sit amet, pulvinar sed, tincidunt sit amet, massa.

Content arranged in 3 columns

Example: <div class=”grid3”><div class=”grid-col”>…</div>...<div class=”grid-col grid-lastcol”>…</div></div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam nec odio. Vivamus turpis metus, feugiat sit amet, pulvinar sed, tincidunt sit amet, massa.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam nec odio. Vivamus turpis metus, feugiat sit amet, pulvinar sed, tincidunt sit amet, massa.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam nec odio. Vivamus turpis metus, feugiat sit amet, pulvinar sed, tincidunt sit amet, massa.

Content arranged in 4 columns

Example: <div class=”grid4”><div class=”grid-col”>…</div>...<div class=”grid-col grid-lastcol”>…</div></div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam nec odio.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam nec odio.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam nec odio.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam nec odio.

Standard text styles

Preformatted text

This is styling for preformatted text enclosed in tag <pre>.
You can use this style to present text with preserved spaces and line break.
a.readon {
  color: #404040;
}

Quote text

This is styling for quote text enclosed in tag <blockquote>. You can use this style to quote somebody’s speech, idea, etc. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Drop cap symbol

This is special drop cap symbol styling for magazine / newspaper text paragraph. Example: <p class="dropcap">This is the text with dropcap symbol </p>.

Highlighted text

This is styling for highlighted information and keyword expression in search result page. Example: <span class="highlight">Text to be highlighted </span>.

Advanced text styles

Alert text

This is styling for alert or warning text paragraph requiring user's attention. Example: <p class="alert">Alert text</p>. You can use tag <div> instead of tag <p>.

Info text

This is styling for regular information text paragraph. Example: <p class="info">Information text</p>. You can use tag <div> instead of tag <p> as well.

Download text

This is styling for download information text paragraph. Example: <p class="download">Download information text</p>. You can use tag <div> instead of tag <p> as well.

Tip text

This is styling for useful information like tips, hint or help text paragraph. Example: <p class="tip">Tip text</p>. You can use tag <div> instead of tag <p> as well.

Comment text

This is styling for comment text paragraph. Example: <p class="comment">Comment text </p>. You can use tag <div> instead of tag <p> as well.

Attachment text

This is styling for attachment information text paragraph. Example: <p class="attachment">Attachment text </p>. You can use tag <div> instead of tag <p> as well.

Link styling

Iconize links

This is one more very cool and unique feature of JSN Epic – link’s destination analyzer and automatic icon assignment. This feature utilizes modern CSS2 specification and allows you to have links with meaningful icons assigned without any modification in XHTML code.

Iconize links based on file extension

JSN Epic is able to detect links to various popular file extensions and assign icons accordingly. Currently JSN Epic supports 34 file types and it is truly amazing.

Iconize links for e-Mail & Messaging URI

JSN Epic can do more than just file extension detection. It can detect protocol type to assign icons to links to instant messengers, email, etc.

  • This e-mail address is being protected from spambots. You need JavaScript enabled to view it This e-mail address is being protected from spam bots, you need JavaScript enabled to view it
  • Call by Skype link (callto:)
  • MSN Messenger link (msnim:)

Note: This feature works in most browsers except old IE5, IE6. For these cases you can still apply icons to the link you want by specifying appropriate class attribute for the link tag. More details can be found in JSN Epic PRO Configuration Manual delivered in PRO template package.

Table styling

Tabular data is very common type of information to be presented on the web. By default tables look ugly and not much readable. With JSN Epic you have 3 table styles to present virtually any kind of tabular data you have.

Plain Rows table style

Example: <table class="plainrows"><thead>...</thead><tbody>...</tbody><tfoot>...</tfoot></table>

Table header Column header 1 Column header 2 Column header 3 Column header 4 Column header 5
Table footer Footer data
Row header 1 Lorem ipsum Dolor sit amet Consectetuer adipiscing Aliquam quis urna Sed felis
Row header 2 Nullam nec odio Vivamus turpis metus Feugiat sit amet Class aptent Ad litora torquent
Row header 3 Pulvinar sed Tincidunt sit amet Massa Dolor sit amet Consectetuer adipiscing
Row header 4 Vivamus turpis metus Feugiat sit amet Class aptent Ad litora torquent Nullam nec odio
Row header 5 Massa Dolor sit amet Tincidunt sit amet Pulvinar sed Consectetuer adipiscing

Color Stripes table style

Example: <table class="colorstripes"><thead>...</thead><tbody>...</tbody><tfoot>...</tfoot></table>

Table header Column header 1 Column header 2 Column header 3 Column header 4 Column header 5
Table footer Footer data
Row header 1 Lorem ipsum Dolor sit amet Consectetuer adipiscing Aliquam quis urna Sed felis
Row header 2 Nullam nec odio Vivamus turpis metus Feugiat sit amet Class aptent Ad litora torquent
Row header 3 Pulvinar sed Tincidunt sit amet Massa Dolor sit amet Consectetuer adipiscing
Row header 4 Vivamus turpis metus Feugiat sit amet Class aptent Ad litora torquent Nullam nec odio
Row header 5 Massa Dolor sit amet Tincidunt sit amet Pulvinar sed Consectetuer adipiscing

Grey Stripes table style

Example: <table class="greystripes"><thead>...</thead><tbody>...</tbody><tfoot>...</tfoot></table>

Table header Column header 1 Column header 2 Column header 3 Column header 4 Column header 5
Table footer Footer data
Row header 1 Lorem ipsum Dolor sit amet Consectetuer adipiscing Aliquam quis urna Sed felis
Row header 2 Nullam nec odio Vivamus turpis metus Feugiat sit amet Class aptent Ad litora torquent
Row header 3 Pulvinar sed Tincidunt sit amet Massa Dolor sit amet Consectetuer adipiscing
Row header 4 Vivamus turpis metus Feugiat sit amet Class aptent Ad litora torquent Nullam nec odio
Row header 5 Massa Dolor sit amet Tincidunt sit amet Pulvinar sed Consectetuer adipiscing

Detailed information about how to apply table styles can be found in template documentation shipped with PRO template package or in JSN Epic tutorial page.

List styling

JSN Epic offers 5 standard and 6 advanced list styles for virtually all kind of information you might want to outline.

Standard List

Unordered list

This is styling for standard unordered list. Example: <ul>...</ul>.

  • Lorem ipsum dolor sit amet
  • Consetetur sadipscing elitr
  • Sed diam voluptua

Ordered list

This is styling for standard ordered list.Example: <ol>...</ol>.

  1. Lorem ipsum dolor sit amet
  2. Consetetur sadipscing elitr
  3. Sed diam voluptua

Arrow List

Red arrow list

This is styling for list with red arrow bullets. Example: <ul class="arrowlist-red">...</ul>.

  • Lorem ipsum dolor sit amet
  • Consetetur sadipscing elitr
  • Sed diam voluptua

Blue arrow list

This is styling for list with blue arrow bullets. Example: <ul class="arrowlist-blue">...</ul>.

  • Lorem ipsum dolor sit amet
  • Consetetur sadipscing elitr
  • Sed diam voluptua

Green arrow list

This is styling for list with green arrow bullets. Example: <ul class="arrowlist-green">...</ul>.

  • Lorem ipsum dolor sit amet
  • Consetetur sadipscing elitr
  • Sed diam voluptua

Icon List

Article icon list

This style is perfect to present a list of articles on your site.
Example: <ul class="iconlist-article">...</ul>.

  • Lorem ipsum dolor sit amet
  • Consetetur sadipscing elitr
  • Sed diam voluptua

Folder icon list

This style is perfect to present a list of resources on your site.
Example: <ul class="iconlist-folder">...</ul>.

  • Lorem ipsum dolor sit amet
  • Consetetur sadipscing elitr
  • Sed diam voluptua

Image icon list

This style is perfect to present a list of photos on your site.
Example: <ul class=" iconlist-image">...</ul>.

  • Lorem ipsum dolor sit amet
  • Consetetur sadipscing elitr
  • Sed diam voluptua

Online icon list

This style is perfect to present a list of online resources you want to point out.
Example: <ul class="iconlist-online">...</ul>.

  • Lorem ipsum dolor sit amet
  • Consetetur sadipscing elitr
  • Sed diam voluptua

Star icon list

This style is perfect to present a list of hot stuffs on your site.
Example: <ul class="iconlist-star">...</ul>.

  • Lorem ipsum dolor sit amet
  • Consetetur sadipscing elitr
  • Sed diam voluptua

User icon list

This style is perfect to present a list of users of community on your site.
Example: <ul class=" iconlist-user">...</ul>.

  • Lorem ipsum dolor sit amet
  • Consetetur sadipscing elitr
  • Sed diam voluptua