網頁配樣式 Font Style Design

網頁上如何根據文字的功能、性格、重要性…，設計不同的字型，稱為配樣式 Font Style Design。

這裡的，Style 不是廣義的「風格」，而是字各種特徵設計後的總稱，狹義、專義的「樣式」。

Page Font Default 網頁基本字型的預設

Set up your default font by the step as follows.

在網頁編輯器中，必須設定網頁基本中文。

由於當前中文環境的限制，除了新細明與標楷外，其他各種樣式在使用者端，可能均以新細明呈現，不利閱讀，故在可見的未來，宜一律預設為「標楷」。

Tools-Page Options

在視覺設計巳由 CSS 成為主流的今日，其他字的預設應均在.css 檔案中設定。

Text Size 中文內文字級設定

中文內文字級設定，以常用單位分，適當設計如下：

內文字級設定以px為單位

中文內文字級設定以 16px 為佳。

內文字級設定以pt為單位

Under 800*600 screen : 12-14 pt (or 16-20 px)

Under 1024*768 screen : 14-18 pt

For public presentation: above 20 pt

It is a good idea to design 2 basic text style: one in moderate, the other in soft.

Title Size 標題字級設定

中文標題字級設定，通常為內文字級的倍數，適當設計如下：

General range: text size * 1.2~2.5

一般標題（h6~h1)：1.2~2.5 倍

Emphasizing range: text size * 2.5-8

強調標題（使用者自訂標題）：2.5-8 倍

If a size is larger than 'text size * 8', it indicates something dramatic.

特用標題，如超過8倍，通常有戲劇化突顯目的，如作為重大廣告等。

Banner Size 橫幅字級設定

中文橫幅字級設定，以常用單位分，適當設計如下：

中文橫幅字級設定以px為單位

中文橫幅字級設定，相當於標題1（h1）：

35~40 px 為佳。

中文橫幅字級設定以pt為單位

24~28 pt 為佳。

It is a good idea to use Arial Narrow for English.

Proportional Size

Many browsers may use proportional size, so the final display may be different from your design.

Such as: 12pt = small, 18pt = large...etc.

Positioning: Box Model 字的空間：方塊模型與定位

The positioning of text and all other objects stand on the idea of "box model".

Content 表示文字與其他所有物件，其定位定義，都以「方塊模型」為準。

Margin, Padding 為透明區，而 Border 可以設計顏色。

Box model 方塊模型線上實作練習

box model

URL Encoding 網址編碼特規‧網址%字串

在網址上經常看到一連串以%連結的字串，這是 URL Encoding 網址編碼的特別規範，目的是讓特殊符號與非英文字，也能夠作為網址。

它的格式，是由 % 再加 2 個代碼組成。

常用URL Encoding 網址編碼%字串

以下是 URL Encoding 網址編碼的轉換編輯器，也可以將%字串轉回為文字。

URL Encoding 網址編碼轉換線上實作練習

Other Font Presentations and Font Style Design
意涵-文字視覺-的設計其他字特徵的呈現與配樣式

Web Design: Context/Text/Context - Epistemological/Digital Aesthetics - Formation Methodology

網站/網頁設計:意涵/文字實作-知識美學/數位美學之建構方法

字比率：表現協調

字變化：表現強調部分

字位置：平衡對比

字間距：清析美觀

字顏色：選色與配色

數位色彩系統與數位調色盤

色彩心理學

TX選色與四大配色定律

中文基本字型

網頁配樣式 Font Style Design