文字規範 (Typography)

新提案
→
封閉測試
→
公開測試
→
已穩定

成熟度說明

新提案：未完成開發、請勿使用。
封閉測試：開發暫時性完成，可使用。可能仍有親和力或其他使用上問題待透過實測發現。
公開測試：開發暫時性完成，歡迎使用。具有完整親和力報告。
已穩定：開發完成、歡迎使用。應無任何親和力或使用上問題。

說明

文字大小：現代網站最常使用的預設文字大小為16px或18px，考量政府網站需有較好的可近性，預設文字大小設為18px。
行距：一般而言中文行距介於1.5em到2em之間，設定1.7em最為舒適，故我們文字段落(p標籤)行距設定為1.7em。

標題

h1 國家資通安全研究院 36px

h2 國家資通安全研究院 32px

h3 國家資通安全研究院 28px

h4 國家資通安全研究院 24px

h5 國家資通安全研究院 20px

h6 國家資通安全研究院 18px

HTML

<h1>h1 國家資通安全研究院 36px</h1>
<h2>h2 國家資通安全研究院 32px</h2>
<h3>h3 國家資通安全研究院 28px</h3>
<h4>h4 國家資通安全研究院 24px</h4>
<h5>h5 國家資通安全研究院 20px</h5>
<h6>h6 國家資通安全研究院 18px</h6>

文字段落

段落一國家資通安全研究院國家資通安全研究院國家資通安全研究院 18px

段落二國家資通安全研究院國家資通安全研究院國家資通安全研究院國家資通安全研究院國家資通安全研究院國家資通安全研究院國家資通安全研究院國家資通安全研究院

段落三國家資通安全研究院

HTML

<p>段落一 國家資通安全研究院
    國家資通安全研究院
    國家資通安全研究院 18px</p>
<p>段落二 國家資通安全研究院 國家資通安全研究院 國家資通安全研究院
    國家資通安全研究院 國家資通安全研究院 國家資通安全研究院 國家資通安全研究院
    國家資通安全研究院</p>
<p>段落三 國家資通安全研究院</p>

CSS

.heading1~.heading6：這些 class 是對標題標籤 h1 到 h6 的別名，方便在 HTML 中使用這些 class 來套用到對應的標題樣式，而不需要直接使用標題標籤。例如，使用 .heading1 可以得到與 h1 相同的樣式。
.fs1~.fs6：這些 class 專門用來設定與標題 h1 到 h6 的相同的字體大小，但不包含字體粗細（font-weight）。例如，.fs1 設定與 h1 相同的字體大小，但不會改變其字體粗細。