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.

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 網址編碼轉換線上實作練習