Getting Started with Web

View this test page for typography details.

This website is inspired by:

• Paco Coursey
• Shu Ding
• Anthony Fu
• Brian Lovin
• Lee Robinson
• Guillermo Rauch
• Rauno Freiberg
• Tom MacWright
• shadcn
• Eric Zhang

There are many others I forgot to mention, view more on Are.na and GitHub.

The source code is also available.

Web Typography

About web font styling:

html {
  font-synthesis: none;
  font-optical-sizing: auto;
  text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  orphans: 3;
  widows: 3;
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 4;
  -webkit-hyphenate-limit-chars: 8 4 4;
  -webkit-hyphenate-limit-lines: 2;
  -webkit-hyphenate-limit-last: always;
  -webkit-hyphenate-limit-zone: 8%;
  hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  hanging-punctuation: first last;
}

Besides, there’s a handy tool for generating fallback fonts. I mainly use it to adjust font declarations, which guarantees a harmonious pairing between the serif and sans-serif fonts.

// app/layout.tsx

import localFont from "next/font/local";

const font_serif = localFont({
  {/* other codes */}
  declarations: [
    { prop: "size-adjust", value: "108%" },
    { prop: "ascent-override", value: "85%" },
    { prop: "descent-override", value: "22%" },
    { prop: "line-gap-override", value: "0%" },
  ],
  display: "swap",
});

Here’re some tools and guides:

• fonttools
• afdko
• FontForge
• 赫蹏（hètí）
• 孔雀计划：中文字体排印的思路
• React Wrap Balancer
• Web Typography
• The Punctuation Guide
• Hyphenopoly
• The International Phonetic Alphabet in Unicode

With Chinese

This is the font stack setting:

// tailwind.config.js

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: [
          "var(--font-sans)",
          "'HYXinRenWenSong 55W'",
          "FZNewShuSong-Z10",
          "ui-sans-serif",
          "-apple-system",
          "BlinkMacSystemFont",
          "sans-serif",
          "'Apple Color Emoji'",
          "'Segoe UI Emoji'",
          "'Segoe UI Symbol'",
          "'Noto Color Emoji'",
          "emoji",
          "math",
        ],
        serif: [
          "var(--font-serif)",
          "FZNewKai-Z03",
          "ui-serif",
          "serif",
          "fangsong",
        ],
      },
    },
  },
};

中文使用汉仪新人文宋，方正新书宋补全；强调使用方正新楷体。字符集均为 GBK。

使用 Heti 进行标点挤压。我删除了给中英文间手动添加空格的函数，因为英文单词换行后空格会导致无法对齐。

题外

1. 至于 Safari 上的系统字体不能正常显示，已有讨论；
2. 我习惯用 ・ 作间隔号，即片假名中点，保持宽度一致；
3. 使用直角引号目的同上。