用戶體驗現在作為很多工作的重中之重，設計師們更要把用戶體驗放在第一位，如果你曾經嘗試過想把你的板面調整到最適合閱讀的狀態，就會知道多么令人抓狂。但是懶人總是會創造出新科技，國外開發者為我們帶來了今天要講的協助設計網頁排版及字型等相關屬性的便利工具。

Type Anything 前段時間登上國外媒體網站后深獲好評，這是一項非常方便的在線工具，功能設計很簡單，主要提供一段文章模板（里頭包含 H1、H2 標題和文字），用戶透過快速按鈕來切換字型、文字大小、行高、字重、邊緣等相關屬性，預覽效果。

當調整到你覺得最舒服的排版后，一鍵將 CSS 程序代碼輸出就能套用至自己網站。

STEP 1

開啟 Type Anything 后，左側是調整工具，右側為默認的文章模板，你也可以把自己的文章復制貼上，透過這項在線服務來進行排版調整，從網頁瀏覽器上實時看到效果。

STEP 2

它跟一般的文本編輯器有點相似，選取文字段落后可將它切換為 H1、H2 或 H3 標題，或加入粗體、斜體及底線效果，在設定完標題及內文位置后，利用左側來進行樣式編輯。

STEP 3

Type Anything 能切換調整不同的字型組合，輸入字型名稱就能實時搜尋 Google Fonts 里收錄的免費字型，不過這里目前還無法使用中文字型，因此你可以先選擇任一字型，最后導出 CSS 后再進行細部修改。提供免費的中文網頁字型服務包括：

STEP 4

從 Type Anything 左側工具欄來進行排版的細節調整，包括字號、字重、行高、透明杜、頂部距離、底部距離、字距和全部顯示為大寫小寫等設定值。

最后，點選右上角的「Get the Code」就會產生剛才的排版 CSS 樣式表單，之后應該知道該怎么做了吧？此外，Type Anything 會加載由 Google Fonts 提供的網頁字型，若你是使用中文字型，可以將它做適當調整。