A simple typography stylesheet for readable content.


Textretty is a tiny typography css library. It can be used wherever any readable content is, such as your blog post and a document.

Additionally, textretty provide you with some simple class to construct a page container, which helps you create a single document page (just like the one you are reading) with no extra css.

Get Started

Get the lastest version with git.

$ git clone https://github.com/BigCoke233/textretty.css.git

Or you can just grab the textretty.min.css file in the main branch.

You can also get textretty.css with jsDelivr CDN, this method does not require to install.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/BigCoke233/textretty.css/dist/textretty.min.css">

说明:jsDelivr 在中国大陆地区无法访问


Textretty only works in the element with textretty class.

    <!-- ...... -->
    <link rel="stylesheet" href="textretty.css">
    <!-- ...... -->
    <!-- ...... -->
    <article class="textretty">
      <!-- your content goes here -->
    <!-- ...... -->

To build a single document page as mentioned, you need textretty-container.

<main class="textretty textretty-container">
      <h1>Document Title</h1>
      <p>Information like publish date and category.</p>
      <!-- your content goes here -->
      <p>Copyright &copy; 2022 Textretty</p>

If you find the container being too wide or slim, replace textretty-container with the ones below.

It is notable that all the containers have their padding defined as 2em.


This following table shows every defined html tag that textretty supports and its standard usage. You are supposed to follow them.

Tag NameDescripiton
strong, bText in bold
em, iText in italic
del, sDeleted text
aAnchor link
preCode block (should be used with code in it)
codeInline code
kbdText on keyboards
olOrdered list
ulUnordered list
liList item
tableJust table
trRows of table
thHeadings of table
tdCells of table
theadThe header of a table
tbodyThe body content of a table
tfootThe footer of a table
blockquoteQuotions (block displayed)
hrDivider / Separator
headerThe header of an article/document
footerThe footer of an article/document


Paragraph is defined by <p>. Every <p> tag is a paragraph. But remember two lines in one <p> tag is not two paragraph but just to sentences.

<!-- I'm a paragraph -->
  <p>The text in a paragraph.<p>
  <!-- I'm just a paragraph but not two -->
  <p>The text in line 1.<br>
  The text in line 2.</p>

You can emphasize some important parts of a paragraph with bold and italic styles. <strong> and <b> are used for bold text while <em> and <i> are used for italic text.

However, <strong> and <em> mean the text is really important and you're emphasizing it. <b> and <i> just make the text bold or italic and don't has certain meanings.


Ordered list is constructed with <ol>, <li> is the list items.

  1. I'm a item of the ordered list.

  2. I'm a item of the ordered list.

  3. I'm a item of the ordered list.

    1. I'm a item of another ordered list inside the ordered list.
    2. I'm a item of another ordered list inside the ordered list.
  4. I'm a item of the ordered list.

  5. I'm a item of the ordered list.

Unordered list is constructed with <ul>, <li> is the list items.


Here's the best method to construct a table.

        <th>Table Heading</th>
        <th>Table Heading</th>
        <th>Table Heading</th>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>
        <td>Table Cell</td>


Ususally, every <img> should be put into a <p> tag.

<p><img src="example.png"></p>


Or, put it in a <figure> tag so that you can add a caption to it.

    <img src="example.png" />
    <figcaption>I'm a caption</figcaption>
From the movie Weathering With You.


When quoting some passages from others, you should put the quoted text into a <blockquote>.

    <p>I'm the quotation.</p>

It will be like this:

If it requires a uniform, it's a worthless endeavor.