
Other Font Presentations and
Font Style Design
意涵-文字視覺-的設計 其他字特徵的呈現與配樣式
Web Design: Context/Text/Context - Epistemological/Digital Aesthetics
- Formation Methodology
網站/網頁設計:意涵/文字實作-知識美學/數位美學之建構方法
The meaning of your content should be supported by the visual imagination of your font style.
網站/網頁設計:意涵/文字:屬於美學的統一元素,包括字碼設定,字的預設,字的呈現:字體+字級+字比率+字變化+字間距+字顏色,字的編號,字的位置-方塊模型與定位,層疊樣式表(Cascading Style Sheets, CSS)應用等。
字比率:表現協調
字變化:表現強調部分
基本變化
動畫
字位置:平衡對比
縮排與定位鈕
字間距:清析美觀
外框字與內框字
字距
行距
字顏色:選色與配色
字顏色另以專題系列介述如下:
數位色彩系統與數位調色盤
色彩心理學
TX選色與四大配色定律
中文基本字型基本字型通常就是第一內文,既以穩重理性為主,當以明體為首選。 但明體是外框字、有角字,小字會黏在一起,非常不易閱讀,在排版專業上必須作進一步處理。 對政府部門而言,缺乏排版專業,不便也不會去深思許多技術問題,而必然以易讀為優先,性格等美學感受為後,所以行政院明訂「政府文書格式」的字型為「楷書」。 而在網路應用上,除了以上技術問題外,還有:內碼、系統字型、各種瀏覽器配合、CSS語法維護、國際化通用能力…更多考量。 楷書並不是網頁設計的「最佳」基本字型,但在易讀、技術、法令、國際化的綜合權衡下,卻是當前「最適」的基本字型,這也是本社群在 html5/CSS3 之前,以楷書為基本字型的原因。唯在html5/CSS3 成熟之後,可以考量變更。 |
網頁配樣式 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.
中文 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 方塊模型線上實作練習
URL Encoding
網址編碼特規‧網址%字串
在網址上經常看到一連串以%連結的字串,這是 URL Encoding 網址編碼的特別規範,目的是讓特殊符號與非英文字,也能夠作為網址。
它的格式,是由 % 再加 2 個代碼組成。
常用URL Encoding
網址編碼%字串
以下是 URL Encoding 網址編碼的轉換編輯器,也可以將%字串轉回為文字。
URL Encoding
網址編碼轉換線上實作練習




