對於初次碰網頁設計的平面設計師，會需要的一些網頁字型觀念
對於初次進行網頁設計工作的平面設計師，
若沒有網頁字型的觀念，可能會在工作過程中碰到一些困難。
比如
為何實際切出來的樣子，和我的設計稿有落差？
我在設計稿所使用的字型，為何沒有被採用？
哪樣的文字尺寸閱讀起來最舒適？
首先，若沒有去設定字型，網站通常會顯示「電腦作業系統」的字型。
而Mac和Windows兩者所顯示出的字型是不同的。
也就是說，就算在設計時使用了特殊字型，也無法讓使用者在瀏覽網站時看到，畢竟使用者的電腦不一定有安裝這款字型，除非把特殊的造型字另外用圖片方式呈現。
若希望讓網站更有特色與質感，就像在做VI時要去設定「標誌應用方式、標準色、標準字的呈現」一樣，設計師們必須要為品牌去設定在網站顯示的用字規範。
那這時候就要提到Webfont了。
▉ 關於Webfont
Webfont是指用於網頁設計的字型檔案格式，它可以讓字型在網站上直接載入和顯示，以確保在不同設備和瀏覽器中，字型能依照設計師所規範的樣子呈現，而使用者在瀏覽網站時，也能夠看到一致的字型外觀。
並且在撰寫時要設定顯示的優先順序(比如沒辦法顯示A字體時要顯示的B字體、C字體等等)，在這個情況下，平面設計師在做網頁設計時要考量的就不只是外觀。
還要評估該字型是否能在網站上呈現。
▉ 認識Google Fonts
Google Fonts 是由 Google 提供的一個免費的網頁字型服務。
網站開發人員、切版人員能輕鬆地在其網站上使用、下載各種字型，只需將字型代碼嵌入到網站裡，即可設定好網站的字型。
那，他們都怎麼將字型代碼嵌入到網站呢？
假設想在網頁中使用字體Roboto，可以在HTML中的head寫入以下語法來使用該字體：
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
並於CSS貼入@import
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap')
以上這些語法和字型代碼資訊，都能在Google Fonts找到。
- 選好想要使用的字體，點選右上方藍底白字的Get font按紐。
- 取得字型代碼請點選Get embed code，想要下載使用擇點選Download all，接著就會出現以下畫面，讓人能輕鬆使用該字型。
平面設計師或許不需要了解到如此深入。
但若能自行從Google Fonts上選擇字型，並在執行設計時就規劃使用，
除了能節省彼此時間之外，這更能讓人感到專業。
▉ 舒適的字型尺寸？
這個其實沒有絕對 (廢話XD
要看客戶的使用者客群 (也就是客人的客人)，依照瀏覽者的年齡層去規劃網站字體。
有些公家機關網站會很貼心地讓人可以切換字體顯示，也是為了讓老中青都適用。
設計師可自製類似下表的字體尺寸表，將圖片寬度設定1920px，然後直接把圖片放到瀏覽器上面查看舒適度。
這樣的習慣維持久了，漸漸會有經驗知道要設定哪樣的文字大小最合適。
字體尺寸表樣式參考 - 白底黑字 - 使用的範例字體為Open Sans
字體尺寸表樣式參考 - 黑底白字 - 使用的範例字體為Open Sans
當然，也可以用相同方式去製作手機版本的字體尺寸表、深色底灰色字，去訓練自己對於字體、間距、配色的敏銳度。
▉ 與字型有關的屬性？
光是在「文字」的外觀顯示上，網頁切版師就必須透過CSS的屬性來設定許多事情。
跟字型外觀有關的屬性很多。
比如
我在網頁需要使用哪幾款字型？
一般來說，特殊的字體會建議選一款即可，避免讓網站看起來過於雜亂。
中文網站的情況下，或許可搭配一些淺灰色的英文裝飾文字，讓網站整體層次看起來更豐富些，而全站用字則可寫在同一個CSS內，並在裡面設定顯示順序。
font-family: Roboto,Open Sans,Open Sans,Arial, sans-serif;
在這個例子中，網站字型顯示的優先順序是Roboto、Open Sans、Arial，最後是sans-serif，這是為了讓瀏覽器知道，當某個字型顯示不了的時候要改用哪一款。
要顯示的尺寸、粗細與顏色是？
切版人員能夠利用很多種屬性設定字型顯示的外觀，不用害怕和他們許願。
但在跟他們許願效果之前，設計師可多了解屬性，先認識更多才能將技法吸收進去，並嘗試用屬性關鍵字去搜尋看看，或許能激發更多設計靈感。
font-size: medium;
font-size: 15px;
font-size: 0.5em;
font-weight:bold;
★ 文字效果相關屬性：立體字 / 霓虹字 / 外框字 / 漸層字
★ 延伸閱讀：
文字之間的間距？
行距line-height: 你希望的距離數值與單位;
字距letter-spacing: 你希望的距離數值與單位;
平面的設計檔在變成網頁後，一切都有了數值單位。若設計師有一點基本的屬性概念，就能節省雙方「再大一點」、「再遠一點」的來回溝通時間，讓網站實際切出來的樣子，能和設計稿更為接近。
或許有些人會覺得切版師應該要能自己「感覺」到比例上的不協調。
但就像設計需要經驗累積，切版也同樣需要累積這樣的感覺。
在響應式網站的製作中，提供明確「數值比例」能讓雙方溝通更俐落，完成設計師想要的感覺。
以上，希望這篇文章能為剛開始接觸網頁設計的人有幫助。
若有建議更好的寫法或資源分享，歡迎留言指教互動，謝謝~
你可能也想看
