Hack Design (1) part 1


  • 透過13個步驟學習 Web 字型學
  1. 知道你要使用的 fonts(字型) 能夠達成什麼事。可能有些你想使用的字,但你使用的字型卻不支援。輔助使用網站 https://typecast.com/
  2. 備援機制。當字型不被支援時,要能使用備援的字型。而不被支援的部分,可能整段都要使用備援字型,這樣整體看起來才不會奇怪。
  3. 知道數字的尺寸。不同的字型的數字有不同尺寸,有的可能等寬,有的可能對齊中線,而有的可能與大寫字母等高。
  4. 字型的樣式不支援就不要用。有的字型不支援 bold(粗體),而瀏覽器會透過將字偏移的方式把字加粗,這樣看起來會很奇怪。(註:繁體中文其實也不支援 italic(斜體)的。) 另外,使用 and 來取代 &,這麼做的用意是,如果你想要用粗體來做 emphasis(強調),就可以透過 css 直接使用。
  5. 承第4點,如果真的要用就用好一點XD。例如要用小字時,選擇更粗的字型,然後再給字多一點空間。
  6. 複製字時要注意。有的可能不是 utf-8 編碼,貼上時可能就會變成不同的字。使用純文字貼上吧!
  7. 學習使用 HTML entities。
  8. 使用正確的引用。一般使用括號、單雙引號,但每個國家做引用的符號不同。
  9. 知道如何使用破折號。破折號有兩種,短的通常用來連接斷字,或是表示兩個字的相對性;長的用來表達想法的轉折。正規用法來看,破折號前後是不加空格的,但也有設計師會加上空白,避免破折號碰到字。
  10. 不要使用 fixed-size,而是使用可縮放的 ems。
  11. 掌控你的斷行。要注意使用者可以縮放頁面。
  12. 注意空白部分。字與字之間的空白<詞的<句的。
  13. 走得更遠。去看更多書吧!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.