Fonts and Typography |
|
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 styleThis 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 styleThis 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 styleThis 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>
Content arranged in 3 columnsExample: <div class=”grid3”><div class=”grid-col”>…</div>...<div class=”grid-col grid-lastcol”>…</div></div>
Content arranged in 4 columnsExample: <div class=”grid4”><div class=”grid-col”>…</div>...<div class=”grid-col grid-lastcol”>…</div></div>
Standard text stylesPreformatted textThis 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 textThis 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 symbolThis is special drop cap symbol styling for magazine / newspaper text paragraph. Example: <p class="dropcap">This is the text with dropcap symbol </p>. Highlighted textThis is styling for highlighted information and keyword expression in search result page. Example: <span class="highlight">Text to be highlighted </span>. Advanced text stylesAlert textThis 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 textThis 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 textThis 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 textThis 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 textThis 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 textLink stylingIconize linksThis 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 extensionJSN 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 URIJSN Epic can do more than just file extension detection. It can detect protocol type to assign icons to links to instant messengers, email, etc.
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 stylingTabular 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 styleExample: <table class="plainrows"><thead>...</thead><tbody>...</tbody><tfoot>...</tfoot></table>
Color Stripes table styleExample: <table class="colorstripes"><thead>...</thead><tbody>...</tbody><tfoot>...</tfoot></table>
Grey Stripes table styleExample: <table class="greystripes"><thead>...</thead><tbody>...</tbody><tfoot>...</tfoot></table>
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 stylingJSN Epic offers 5 standard and 6 advanced list styles for virtually all kind of information you might want to outline. Standard ListUnordered listThis is styling for standard unordered list. Example: <ul>...</ul>.
Ordered listThis is styling for standard ordered list.Example: <ol>...</ol>.
Arrow ListRed arrow listThis is styling for list with red arrow bullets. Example: <ul class="arrowlist-red">...</ul>.
Blue arrow listThis is styling for list with blue arrow bullets. Example: <ul class="arrowlist-blue">...</ul>.
Green arrow listThis is styling for list with green arrow bullets. Example: <ul class="arrowlist-green">...</ul>.
Icon ListArticle icon listThis style is perfect to present a list of articles on your site.
Folder icon listThis style is perfect to present a list of resources on your site.
Image icon listThis style is perfect to present a list of photos on your site.
Online icon listThis style is perfect to present a list of online resources you want to point out.
Star icon listThis style is perfect to present a list of hot stuffs on your site.
User icon listThis style is perfect to present a list of users of community on your site.
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||