typo.css is a typography stylesheet designed for better reading experience.
Demo: Typo.css.
Install with bower:
$ bower install typo
If you don't use bower, you can just grab the css file from GitHub. There is no dependency of this project.
For readable content, wrapper them under the .typo class, and everything would be OK now:
<div class="typo">
<h1>Heading</h1>
<p>Paragraph of contents</p>
...
</div>typo.css supports these commonly used tags.
| Tag Name | Description |
|---|---|
| h1 - h6 | headings for title |
| p | paragraph |
| a | anchor links |
| strong b | emphasis in bold style |
| em i | emphasis in italic style |
| img | image |
| figure | figure wrapper for images |
| figcaption | figcaption in figure |
| hr | separator |
| blockquote | style for quotes |
| ul ol li | ordered and unordered list |
| pre | code block |
| code tt | inline code |
| table .. | tables (not well designed) |
| iframe | embed iframe style |
| mark | mark some text |
Headings are tags <h1>, <h2>, <h3>, <h4>, <h5> and <h6>.
Emphasis works on something important or valuable. <b> and <i> are not designed for this purpose, you should always use <strong> and <em>.
Links are the soul of internet.
Images can be wrappered in a <figure> tag:
There is ordered list <ol> and unordered list <ul>.
- Unordered list is tagged in
<ul> - Another item of unordered list
- An ordered list in un ordered list
- Another ordered item
- Unordered list can has unordered list children
- Item of the children
- Another item of the children
- Ordered list is tagged in
<ol> - Each item is tagged in
<li>
typo.css has no target language, however it looks great in both English and Chinese.
MIT.