「內容第一」的設計策略被越來越多的設計師知曉和認可。「如何設計出好看的字體?」,則成了設計的一個重要環節。字體設計並不簡單,特別是針對新入行的設計師而言。為了讓你在嘗試字體設計的過程中更便利,著名設計師 Oliver Reichenstein 在這篇文章中介紹了 12 個字體工具。<article>
<p>這篇文章,將介紹 12 個字體工具,希望能幫你捕捉更多的字體設計靈感。好好利用這些工具,可以設計出更好的產品,讓你的產品在聚光燈下閃閃發光。這 12 個字體工具大概可以分為 4 個方面:</p>
<ul>
<li>字體選擇</li>
<li>字體搭配與樣式</li>
<li>層次構建</li>
<li>靈感與趣味來源</li>
</ul>
<h3>字體選擇</h3>
<p>字體設計第一步,就是要選擇設計需要的字體。字體選擇非常重要,它可以影響你向用戶傳達的資訊內容。</p>
<h4>1. <a href="https://fonts.google.com/">Google Fonts</a></h4>
<p>你是不是在找免費字體呢? Google Fonts 就是不錯的選擇,而且 Google Fonts 目前提供了 850 多種免費字體。</p>
<p>如果不進行篩選的話,在這麼多收錄字體中,很難選擇你喜歡的字體。好在 Google Fonts 提供分類篩選功能,用戶可以根據不同類別和字體視覺屬性(如字重)進行小範圍挑選。</p>
<p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://images.ifanr.cn/wp-content/uploads/2018/08/1-48.jpg" sizes="(max-width: 800px) 100vw, 800px" srcset="https://images.ifanr.cn/wp-content/uploads/2018/08/1-48.jpg 800w, https://images.ifanr.cn/wp-content/uploads/2018/08/1-48-360x176.jpg 360w, https://images.ifanr.cn/wp-content/uploads/2018/08/1-48-768x375.jpg 768w" alt=" 做圖總是找不到好看的字體?這 12 個實用工具,送你用不盡的免費字體" width="600" height="293" /></p>
<h4>2. <a href="https://www.calligraphr.com/">Calligraphr </a></h4>
<p>找不到適合產品的字體?不妨試試自創一套字體。通過 Calligraphr,你可以將手寫轉化成非常適用的向量字體,供你用在產品設計中。</p>
<p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://images.ifanr.cn/wp-content/uploads/2018/08/2-44.jpg" sizes="(max-width: 800px) 100vw, 800px" srcset="https://images.ifanr.cn/wp-content/uploads/2018/08/2-44.jpg 800w, https://images.ifanr.cn/wp-content/uploads/2018/08/2-44-360x172.jpg 360w, https://images.ifanr.cn/wp-content/uploads/2018/08/2-44-768x367.jpg 768w" alt=" 做圖總是找不到好看的字體?這 12 個實用工具,送你用不盡的免費字體" width="600" height="287" /></p>
<h4>3. <a href="https://fontface.ninja/">FontFace Ninja</a></h4>
<p>在網路上看到好看的字體,你有沒有想過「它用了什麼字體?」。雖然你可以通過瀏覽器的開發者工具找到具體字體名稱,但我有更簡單的辦法。</p>
<p>在 Google Chrome 瀏覽器中,添加 FontFace Ninja 插件。瀏覽網頁時,「哪裡不懂點哪裡」,還可以把喜歡的字體標記下來。</p>
<p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://images.ifanr.cn/wp-content/uploads/2018/08/3-5.gif" sizes="(max-width: 381px) 100vw, 381px" srcset="https://images.ifanr.cn/wp-content/uploads/2018/08/3-5.gif 381w, https://images.ifanr.cn/wp-content/uploads/2018/08/3-5-360x219.gif 360w" alt=" 做圖總是找不到好看的字體?這 12 個實用工具,送你用不盡的免費字體" width="600" height="365" /></p>
<h4>4. <a href="http://emotype.webflow.io/">Emotype </a></h4>
<p>Emotype 根據情緒將字體分成了 4 類:自信(confident)、熱情(welcoming)、獨特(unique)和素淨(neutral)。如果你想在產品中傳達某種情緒,不妨試試 Emotype。</p>
<p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://images.ifanr.cn/wp-content/uploads/2018/08/4-28.jpg" sizes="(max-width: 800px) 100vw, 800px" srcset="https://images.ifanr.cn/wp-content/uploads/2018/08/4-28.jpg 800w, https://images.ifanr.cn/wp-content/uploads/2018/08/4-28-360x167.jpg 360w, https://images.ifanr.cn/wp-content/uploads/2018/08/4-28-768x357.jpg 768w" alt=" 做圖總是找不到好看的字體?這 12 個實用工具,送你用不盡的免費字體" width="600" height="279" /></p>
<h3>字體搭配與樣式</h3>
<p>為產品選擇最合適的字體,是個不小的挑戰。很多情況下,你可能會選擇不止一種字體。</p>
<p>所以,你需要保證所選的字體搭配合理。不同類型字體要相輔相成、相得益彰。這樣,才能讓用戶的閱讀體驗更加友好。</p>
<h4>5. <a href="https://archetypeapp.com/">Archetypeapp</a></h4>
<p>如果你在尋找相互匹配的字體群,不妨試試 Archetypeapp。借助 Archetypeapp,設計師可以在瀏覽器中即時設計字體,現場體驗不同字體設計和行距樣式帶來的視覺感受。</p>
<p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://images.ifanr.cn/wp-content/uploads/2018/08/5-28.jpg" sizes="(max-width: 800px) 100vw, 800px" srcset="https://images.ifanr.cn/wp-content/uploads/2018/08/5-28.jpg 800w, https://images.ifanr.cn/wp-content/uploads/2018/08/5-28-360x162.jpg 360w, https://images.ifanr.cn/wp-content/uploads/2018/08/5-28-768x345.jpg 768w" alt=" 做圖總是找不到好看的字體?這 12 個實用工具,送你用不盡的免費字體" width="600" height="269" /></p>
<h4>6. <a href="http://fontjoy.com/">Font Joy </a></h4>
<p>Font Joy 的宣傳口號是「字體匹配如此簡單」。Font Joy 將深度學習應用於字體搭配,你只需要輕擊幾次鼠標就可以完成體驗:</p>
<ul>
<li>點擊生成(Generate)按鈕,即可生成新的字體搭配。</li>
<li>點擊鎖定圖標,即可鎖定你想保留的字體。</li>
<li>點擊編輯圖標,即可手動選擇字體。</li>
</ul>
<p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://images.ifanr.cn/wp-content/uploads/2018/08/6-21.jpg" sizes="(max-width: 800px) 100vw, 800px" srcset="https://images.ifanr.cn/wp-content/uploads/2018/08/6-21.jpg 800w, https://images.ifanr.cn/wp-content/uploads/2018/08/6-21-360x178.jpg 360w, https://images.ifanr.cn/wp-content/uploads/2018/08/6-21-768x379.jpg 768w" alt=" 做圖總是找不到好看的字體?這 12 個實用工具,送你用不盡的免費字體" width="600" height="296" /></p>
<h3>層次構建</h3>
<p>搭配好字體後,就可以進一步設計字體層次了。層次構建主要體驗在標題和正文不同字體大小的視覺關係。恰當的層次,能讓用戶更容易理解不同內容之間的關係,提高可讀性。</p>
<h4>7. <a href="https://material.io/design/typography/">Material Design Type Scale</a></h4>
<p>Material Design Type Scale 包含 13 種字體樣式,用以輔助產品及內容的不同需求。</p>
<p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://images.ifanr.cn/wp-content/uploads/2018/08/7-17.jpg" sizes="(max-width: 755px) 100vw, 755px" srcset="https://images.ifanr.cn/wp-content/uploads/2018/08/7-17.jpg 755w, https://images.ifanr.cn/wp-content/uploads/2018/08/7-17-360x217.jpg 360w" alt=" 做圖總是找不到好看的字體?這 12 個實用工具,送你用不盡的免費字體" width="600" height="362" /></p>
<h4>8. <a href="http://www.modularscale.com/">Modularscale</a></h4>
<p>通過 Modularscale,你可以生成一系列模組化層次的數字。使用體驗就好比使用直尺一樣。</p>
<p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://images.ifanr.cn/wp-content/uploads/2018/08/8-15.jpg" sizes="(max-width: 800px) 100vw, 800px" srcset="https://images.ifanr.cn/wp-content/uploads/2018/08/8-15.jpg 800w, https://images.ifanr.cn/wp-content/uploads/2018/08/8-15-360x160.jpg 360w, https://images.ifanr.cn/wp-content/uploads/2018/08/8-15-768x341.jpg 768w" alt=" 做圖總是找不到好看的字體?這 12 個實用工具,送你用不盡的免費字體" width="600" height="266" /></p>
<h4>9. <a href="https://type-scale.com/">Type Scale </a></h4>
<p>Type Scale 也是一個類似層次工具,你需要做的只是輸入相關參數即可。</p>
<p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://images.ifanr.cn/wp-content/uploads/2018/08/9-20.jpg" sizes="(max-width: 800px) 100vw, 800px" srcset="https://images.ifanr.cn/wp-content/uploads/2018/08/9-20.jpg 800w, https://images.ifanr.cn/wp-content/uploads/2018/08/9-20-360x181.jpg 360w, https://images.ifanr.cn/wp-content/uploads/2018/08/9-20-768x386.jpg 768w" alt=" 做圖總是找不到好看的字體?這 12 個實用工具,送你用不盡的免費字體" width="600" height="302" /></p>
<h3>靈感與趣味來源</h3>
<p>產品設計過程中,靈感也非常重要。沒有靈感,產品可能沒什麼創意。作為設計師,應該多花時間從不同事物中尋找靈感,而且,並不一定要從數字設計中尋找靈感。</p>
<h4>10. <a href="https://www.typewolf.com/">Typewolf </a></h4>
<p>Typewolf 的資源非常豐富,你可以從中發現網站和海報設計的靈感。推薦查看「每日之站(Site of the day)」,獲得每日劑量的靈感。</p>
<p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://images.ifanr.cn/wp-content/uploads/2018/08/10-10.jpg" sizes="(max-width: 800px) 100vw, 800px" srcset="https://images.ifanr.cn/wp-content/uploads/2018/08/10-10.jpg 800w, https://images.ifanr.cn/wp-content/uploads/2018/08/10-10-360x174.jpg 360w, https://images.ifanr.cn/wp-content/uploads/2018/08/10-10-768x371.jpg 768w" alt=" 做圖總是找不到好看的字體?這 12 個實用工具,送你用不盡的免費字體" width="600" height="290" /></p>
<h4>11. <a href="https://www.typographicposters.com/">Typographic posters</a></h4>
<p>Typographic posters 收錄了大量的海報作品,其作品來自全球各地的設計師之手。</p>
<p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://images.ifanr.cn/wp-content/uploads/2018/08/11-23.jpg" sizes="(max-width: 800px) 100vw, 800px" srcset="https://images.ifanr.cn/wp-content/uploads/2018/08/11-23.jpg 800w, https://images.ifanr.cn/wp-content/uploads/2018/08/11-23-360x180.jpg 360w, https://images.ifanr.cn/wp-content/uploads/2018/08/11-23-768x383.jpg 768w" alt=" 做圖總是找不到好看的字體?這 12 個實用工具,送你用不盡的免費字體" width="600" height="299" /></p>
<h4>12. <a href="http://type.method.ac/">Kerntype </a></h4>
<p>Kerntype 不只是工具,還是個小遊戲。遊戲玩法很簡單,你只需要調整字母間距,實現最佳的視覺體驗。這個遊戲能培養和提高你在字體間距設計方面的能力。</p>
<p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://images.ifanr.cn/wp-content/uploads/2018/08/ezgif.com-optimize-1.gif" sizes="(max-width: 850px) 100vw, 850px" srcset="https://images.ifanr.cn/wp-content/uploads/2018/08/ezgif.com-optimize-1.gif 850w, https://images.ifanr.cn/wp-content/uploads/2018/08/ezgif.com-optimize-1-360x235.gif 360w, https://images.ifanr.cn/wp-content/uploads/2018/08/ezgif.com-optimize-1-768x501.gif 768w" alt=" 做圖總是找不到好看的字體?這 12 個實用工具,送你用不盡的免費字體" width="600" height="391" /></p>
<p><br /> 文章授權譯自 <a href="https://uxplanet.org/12-helpful-typography-tools-ea0d808eb70b">12 Helpful Typography Tools</a></p>
<ul>
<li>本文授權轉載自:<a href="https://www.ifanr.com/app/1090290">ifanr</a></li>
</ul>
</article><a href="http://www.facebook.com/TKbang">加入T客邦Facebook粉絲團</a><img src="http://feeds.feedburner.com/~r/techbang/~4/NfPAqxA1t2g" height="1" width="1" alt=""/>