Typography

Many Designers like to use English rather than Chinese. One the reason is that Chinese typography is much harder to handle than English. There are so many different characters with different strokes in Chinese.

There are few experience and conclusions about Chinese typography in web design for us to consult. Therefore, We did some setting on font for Chinese base on our own experience in Amaze UI.

Font

Amaze UI mainly use sans-serif fonts, and use monospace font for <code>, <pre> and some other elements.

Font CSS

body {
  font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans","wenquanyi micro hei","Hiragino Sans GB", "Hiragino Sans GB W3", Arial, sans-serif;
}

• Segoe UI - Windows UI Font( Used since Windows Vista);
• Helvetica Neue Font in iOS7 and OSX 10.10 UI ( Has some problems when using center align, so temporarily use Lucida Grande instead）;
• Some Windows users installed Hiragino Sans GB W3, which has some rendering problem on windows. So we put Microsoft YaHei in front of Hiragino Sans GB W3;
• FreeSans - Font in Linux distributions like Ubuntu.

Font Utility Class

In the implementation of Amaze UI, font-family only appear twice in Base style. We also don't recommend you to use too much font-family in your project, but you may use utility classes in Amaze UI instead.

• .am-sans-serif Sans serif font is the main font of Amaze UI.
• .am-serif Serif font is not used in Amaze UI.
• .am-kai Use serif for English text and numbers, and use Kai for Chinese characters. The only difference between .am-kai and .am-serif is on the Chinese characters. Amaze UI use .am-kai in <blockquote>.
• .am-monospace monospace font is used in Amaze UI source code.

This example shows the difference among these fonts.

<p>...</p>

<p class="am-serif">...</p>

<p class="am-kai">...</p>

<p class="am-monospace">...</p>

Technically, Kai is a cursive font, but we use serif for English in .am-kai because cursive fonts in English is too fancy to distinguish. The definition of 5 fonts can be found in W3C Docs。

Webkit Anti-aliasing

What's more, Webkit browsers use anti-aliasing when rendering, so Characters can be slightly thiner in Webkit browsers than other browsers.

2014.10.10 update:-moz-osx-font-smoothing is added in Firefox for OSX since v25 to achieve the similar effect as Webkit.

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

If you don't like it, please reset to the default smooth font.

body {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

<h3>-webkit-font-smoothing: antialiased;</h3>
<p>
  The quick brown fox jumps over the lazy dog. <br/>
  千万不要因为走的太久，而忘记了我们为什么出发。 <br/>
  千萬不要因為走得太久，而忘記了我們為什麼出發。
</p>
<br/>
<div style="-webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto">
  <h3>-webkit-font-smoothing: subpixel-antialiased;</h3>
  <p>
    The quick brown fox jumps over the lazy dog. <br/>
    千万不要因为走的太久，而忘记了我们为什么出发。 <br/>
    千萬不要因為走得太久，而忘記了我們為什麼出發。
  </p>
</div>

Reference：

• -webkit-font-smoothing
• Better font-rendering on OSX

Font Links

Fonts in operating systems

• List of Microsoft Windows fonts
• List of typefaces included with OS X
• Common fonts to all versions of Windows & Mac equivalents
• OS X：Mavericks Fonts
• OS X：Mountain Lion Fonts
• iOS 7：Fonts
• iOS 6：Fonts
• Windows UI 设计文档
• Supported UI Fonts in Windows Phone
• Typography | Android Developers

_Open source projects about Chinese typography

• 「漢字標準格式」——印刷品般的漢字網頁排版框架
• Entry.css - Configurable and readable Chinese text style sheet

Default Styles for Elements

<h1> - <h6>

<h1> - <h6> are bolded and given a margin; <h1> is 1.5 times larger than usual; <h2> is 1.25 times larger；Others are same as usual.

<h1>h1 Title 1</h1>
<h2>h2 Title 2</h2>
<h3>h3 Title 3</h3>
<h4>h4 Title 4</h4>
<h5>h5 Title 5</h5>
<h6>h6 Title 6</h6>

<p>

<p>无论走到哪里，都应该记住，过去都是假的，回忆是一条没有尽头的路，一切以往的春天都不复存在，就连那最坚韧而又狂乱的爱情归根结底也不过是一种转瞬即逝的现实。</p>

<hr>

<hr/>

<blockquote>

source is in <small> element.

<blockquote>
  <p>无论走到哪里，都应该记住，过去都是假的，回忆是一条没有尽头的路，一切以往的春天都不复存在，就连那最坚韧而又狂乱的爱情归根结底也不过是一种转瞬即逝的现实。</p>
  <small>马尔克斯 ——《百年孤独》</small>
</blockquote>

<pre>

More details in Code。

window.addEventListener('load', function() {
    FastClick.attach(document.body);
}, false);

<pre>window.addEventListener('load', function() {
    FastClick.attach(document.body);
}, false);
</pre>

ul/ol

<ul>:

<ul>
  <li>...</li>
  <li>...
    <ul>
      <li>
        <ul>
          <li>...</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<ol>:

<ol>
  <li>...</li>
  <li>...
    <ol>
      <li>
        <ol>
          <li>...</li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

<dl>

<dl>
  <dt>响应式网页设计</dt>
  <dd>自适应网页设计（英语：Responsive web design，通常缩写为RWD）是一种网页设计的技术做法，该设计可使网站在多种浏览设备（从桌面电脑显示器到移动电话或其他移动产品设备）上阅读和导航，同时减少缩放、平移和滚动。</dd>
  <dt>响应式网页设计（RWD）的元素</dt>
  <dd>采用 RWD 设计的网站 使用 CSS3 Media queries，即一种对 @media 规则的扩展，以及流式的基于比例的网格和自适应大小的图像以适应不同大小的设备。</dd>
</dl>

<table>

This is the style after normalize. Find more details in Table Component.

<table>
  <caption>...</caption>
  <thead>
    <tr>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>...</td>
    </tr>
  </tfoot>
</table>

<img>

More details in Image Component。

<img class="am-img-responsive" src="http://7jpqbr.com1.z0.glb.clouddn.com/bing-1.jpg" alt=""/>

Other Elements