在人類發展曆史過程中，文字作為信息傳播的載體，有着承上啟下的重要意義。而漢字，是世界上使用時間最久、空間最廣、人數最多的文字。從距今大約六千年前，就開始誕生了具有整齊規範、初步具有文字特征的圖形符号。
而到了後期，漢字分别經曆了篆體、隸書、楷書等多元化的發展，百花齊放。而自從雕版印刷術的盛行之後，刻字用的雕刻刀所雕出來的字體因為橫細豎粗，醒目易讀，得到了廣泛的運用，由于活字印刷的時候首尾會有墨殘留，所以故意會留一部分裝飾來溢墨。
而到了後期，這個裝飾也得以保留下來，對這個字體進行優化過後，就是至今我們仍在廣泛使用的宋體。在當今，特别是在Windows系統中，宋體仍占有很大的一席之地。
後來人們又通過模仿宋體字體結構，對字體進行了調整，改成了筆畫粗細一緻，纖細狹長的印刷字體，也就是今天我們稱之為“仿宋體”的字體。
與此同時，“黑體”誕生了，因為字體醒目大方，粗細一緻，結構醒目嚴密，字形端正，容易閱讀，所以也就是我們今天，在界面設計中，所用到的最多的字體。現代漢字的黑體是在現代印刷術傳入東方後依據西文無襯線體中的黑體所創造的，所以按照西文的說法，也可以把黑體稱作為無襯線體，把宋體叫做為有襯線體。
到了現代，随着互聯網的興起，LED屏幕中的字體也得到了較大的發展。
在早期時代中，顯示屏效果較差，分辨率低，屏幕顔色較少，而漢字筆畫較多，黑體小字體的清晰度較差，所以一般主要用于文章重要标題。而宋體在為了匹配低分辨率下的像素栅格，對字體進行了調整，調整後的字體能在低分辨率下的小點陣中得以良好的顯示，辨識度較高，在開啟了ClearType之後，字體的被識别性能得到良好的保證，所以在互聯網初期階段中，有襯線體在互聯網中一直處于霸主地位。
直到後面屏幕顯示效果的進步，黑體才慢慢得以盛行，在屏幕分辨率較高的情況下，黑體已經能得到較好的識别效果，因此已經不需要原襯線體的功能，襯線體反而由于裝飾性元素過多，閱讀起來容易造成視覺疲勞。因此在屏幕密度較高的移動端載體中，無襯線黑體成功替代有襯線體成為霸主地位。
修改後的黑體中宮更為開放，布白更為勻稱，顯示效果更為舒适，醒目利于閱讀，更利于視覺信息的傳達，從而在屏幕中起着主導地位。幾大互聯網巨頭微軟雅黑及蘋果在此之後分别花重金打造了微軟雅黑及蘋方，用于自身的OS系統中。所以通過分析，可以看來，在将來界面設計中，字體樣式還是會以無襯線體為主，甚至可能會更進一步簡化字體的形狀。
在Android設備中，Android始祖Google為了更好的追求視覺效果，提高用戶體驗，所以聯合了Adobe設計發布了思源黑體(Noto)來作為中文字體。
該字體字形較為平穩，利于閱讀，且有個7個不同的字重，充分滿足了不同場景下的設計需求，7個字重分别為：Thin、 Light、DemiLight、Regular、Medium、Bold 和 Black。而英文，則使用Robot來作為基礎字體，隻有6個字重：分别為Thin、Light、Regular、Medium、Bold 和 Black，視覺語言與思源黑體Noto保持一緻。
另外在Google的Material Design手冊中，官方還給出了标準的字号大小。在安卓的字體單位中，不再以px，pt作為單位而是統一的使用了sp，換算方式：
px = sp*ppi/160 ，sp = px / (ppi / 160)
按照iPhone7的尺寸1334×750.密度326ppi 來換算，那麼Android的1dp = 1 * 326/160 ≈ 2px
在iOS系統中，中文方面蘋果則加入了全新的蘋方字體，字形纖細中宮飽滿，利于閱讀，并且還提供6個字重供設計開發者使用。所以後面的設計趨勢中，字重的使用變的開始多元化了起來，使用Semibold中粗體、大字号作為界面的标題變的更為流行起來，較為明顯的有 iOS 11 中的一些原生界面及一些知名APP。
而在英文方面，則使用了San Francisco 的字體，除了在iOS和Mac OS上，還單獨為Watch OS單獨對字體進行了調整，命名為 San Francisco Compact。而每套字體下面又分為Text與Display兩種屬性，Text隻有6個字重，而Display則有9個字重。
通過對比，我們可以發現：其實Android與iOS字體字形方面差異化明顯不大，不用特意下載所有字體進行單獨配置。那麼在平常工作中，我們隻需要按照一套标準的iOS設計稿輸出即可，在Android方面進行自動延展，最後走查确認一下效果即可。
如果涉及到使用除Regular标準體之外的字體，那麼除了顔色，還應當标注相應的字重字高等信息(如Font：Pingfang SC-Semibold，line:52px) ，而不應當隻标注一個加粗或者加細。當然如果人力允許的情況下，我們也可以單獨為Android做一套界面及字體适配，提高Android端的視覺顯示效果。
在平時項目中，為了讓頁面中的字體更加貼合業務場景，需要對字體的字距字高進行調整。但很多同學在最後輸出标注的時候，往往隻标注了字号及顔色，而其它參數都沒有進行标注或者标注的不正确，在最後視覺還原審核的時候，字體往往偏差較大，花費很多不必要的工作量去浪費在了視覺走查上。
那麼這裡就給大家詳細介紹一些字體屬性及标注方法，節約開發走查工作量，更好的還原視覺稿。
一般來說，為了保持字體的完整展示，字體設計師都會給字體預留一定的安全距離，設定合适的升部線及降部線距離，讓字體展示的更為平衡。這裡我标注了一個相應的線稿：
所以由此圖可以看出：平時我們在設計的時候，可能字體使用的28px，在使用工具量的時候，也确實是28px，但其實字體本身占用的距離是包含了升部及降部區域的，這樣就導緻其占用空間大于28px，而變成了40px。所以我們在标注的時候，應當按照包含升部降部的實際大小進行标注，這樣所還原的視覺效果，也是極為接近設計稿的。
所以我們在設計輸出的時候，如果沒有調整line值，是可以直接借助sketch的标注插件sketch measure，來實時導出相應的參數，這樣的參數是最接近開發效果的。如果沒有Mac的同學，可以利用PS選中文字，那麼選中的深色底就是字體本身的間距了。
下圖我做了兩個示例，來闡述正确的标注方法，雖然标注的時候會麻煩些，但往往在視覺還原的時候，往往能達到事半功倍的效果。
那麼在一些文字較多的頁面，為了讓閱讀更為順暢，我們往往需要對文字的字高字距進行調整，那麼我們先來看一下sketch及動效編程軟件Origami中的可配置參數。
我們可以發現，對于更改字距、字寬及端高，那麼我沒隻需要配置好Charater、line、paragraph三個值即可，那麼我們先來理解一下這三個值的含義：
（1）Character：字間距
所謂的字間距，則是在兩個文字中間的距離，一般加在一個字符的後段。如字符『AK』，默認Character為0，那麼兩個字符中間的間距，則是為字體默認所設定的安全距離。如果給Character設定一個值50，那麼會自動在A的後段加上50px，那麼顯示效果則變成了『A K』
（2）line：行高
即UI Lable 中字段所占用的高度實際大小，剛剛有提到默認字體會設定一個安全距離，那麼在設備中字段所占用的line高度 = 字體像素大小 升降安全距離 擴高值。每個字體都有相應設定的line Auto比例，可以通過sketch選中字體後聽過line值來進行查看。
另外剛剛提到，标注間距的時候，務必得把line值包含在内，否則實現出來容易出現字體偏移位置不對等情況。
（3）Paragraph：行距
很多同學在調完這個參數，發現跟調整line值差不多。但其實 Paragraph 調整的是兩行中間的間距，不單獨調整單行字段的占用空間。
通過以上我們能了解字體在于實際設備中，是怎麼樣的布局方式，所以我們标注的時候，一定需要标注的較為仔細。如果發現開發出來的字體樣式與設計稿不一緻，那麼我們隻需要提供以上這幾個參數值即可。
如果在團隊中還是靠手動标注的同學，那麼完整的标注應該為：Font-name；Font-size ；Font-color ；Font-line ；Font-character ；Font- Paragraph 。
如果沒有設定，不填即可，如：
現在目前市場中手機屏幕越來越大，分辨率也越來越高。那麼我們在做設計的時候，在字号運用方面，難免會感到迷茫，文字是不是又點小了？或者大了顯得不精緻？标題跟正文沒啥區别？像這種問題可能經常困擾着一些年輕的設計師。
其實在字号大小方面，确确實實有着一套計算法則及公式在内，今天這裡給大家進行一下科普。
當我們在查看一些物體時，測量視覺角度的方法為先量一下物體的的長寬以及眼睛距離物體的距離，得出相應的數學計算公式，其中：
θ=(arctan·h/2d)2，通過換算h=2d·tan(θ/2)
關于人眼感光系統，人眼上的一個像素相當于0.3個角分。為何人的肉眼看不清遠處的物體細節？或者看不清月亮上的環形山，那麼是因為在你的視網膜上，月亮形成的圖像其實不過就是一個100個像素左右的圖片而已，所以環形山無法被肉眼觀察得清。
而根據科學研究發現：
人眼對于信息物體的識别，在眼睛内視角度數＞0.3°，才能保文字信息體投射到視網膜中的分辨率足夠大，能夠被大腦所識别。
那麼我們将數據可以套入進公式計算，人眼距離手機的具體通常是30cm左右，那麼也就是說，正常情況下，在手機距離眼睛30cm左右，使用視角計算公式，我們能識别到的最低的文字大小為h= 2*30·tan(0.3/2) ≈ 0.157cm ，因為我們經常使用iPhone8的尺寸1334×750作為設計稿。iPhone8的dpi為324，也就是一英寸上顯示324個像素，1英寸為2.54cm，那麼0.157cm=324*(0.157/2.54cm)= 20px
所以也就是正常情況下我們在設計稿中使用最小号的字号時，一定不能低于20px。
而我們在做設計時，字号的單位需遵循原子理論，也就是使用一個基數作為倍增，如2、4、6、8、10 或者3、6、9、12。但其實我們在做移動端設計時，單位需要遵循偶數原則，因為開發中的單位是以一倍圖的基數來進行計算。那麼其實在制定字體規範中，使用2為單位會導緻字号過多，不易管理，且2号字體的差異化不大。
所以在字号方面我們使用4作為單位是比較合适的：一是适配後在@2x跟@3x不會出現半像素，二是使用4為單位，能滿足字體大小的均衡。那麼我們則可以制定相應的字體單位：
随着設計行業的發展，對于視覺的理解進步，現在更多設計師更願意使用大号字體，大間距，來區分頁面層級的信息。因為大号的字體閱讀起來更為舒适，能精準快速的傳達信息，提升閱讀效率，降低視覺疲勞。
所以大家在平時項目中，也不妨大膽的使用一下大字号字體來作為主标題，拉大頁面不同信息的層級關系。
在移動端的界面設計中，除了前幾篇文章講的使用間距網格來拉開不同内容的層級外，對字體樣式進行适當的調整也是個很不錯的選擇。通過調整字重、字色，能讓頁面的視覺邏輯變為更加的清晰明了，主次分明，降低因視覺給用戶帶來的幹擾，提升頁面的可操作性。
那麼我們如何來設定這兩塊呢？
在日常界面設計的需求中，有些較為重要的字段，可能業務方為了突出，第一時間，想到的就是把字體标紅處理，或者添加各類各樣，五花八門的顔色。但其實往往這樣的設計，在最後上線後的效果，反而容易适得其反，因為顔色過多，而導緻頁面缺乏重點，視覺疲勞，反而增加了頁面的跳出率，難以取得想要的效果。
經過調研顯示：頁面越幹淨，越整潔，頁面的跳出率越低，而這套規則幾乎适用于所有的界面設計。
所以字體顔色這塊，顔色種類不宜過多。可以考慮通過使用同色系中的不同明度，來對不同層級字段進行差異化處理。我們可以通過先确認主色，再對主色進行名都延展，來适配多場景的文字顔色。配置好相應的色闆之後，可以再根據頁面層級關系對文字顔色進行合适的填充。
為了更好的拉開不同信息之間的層級關系，除了配置顔色外，通過配合，使用不同字重的字體來對内容進行區分也是個很好的選擇。
使用較粗的字重來作為主标題使用，細字重作為輔助信息，能更好的在單色環境中增加内容的呼應及對比，減少頁面中字體過度色的使用，從而能夠讓頁面更加的整潔，内容清晰明了，降低頁面的跳出率。
例如我們較重要的信息，可使用較粗的字重，弱信息則細字重。比如以下的餘額寶及京東小金庫界面，雖然兩個界面在留白方面都留有較大餘地，但京東金融在于對字重的設定更為嚴謹，所以在于對層級關系的處理上京東要更勝一籌。
而不同的字重，給予用戶的感受也是截然不同的：較粗的字重往往傳達的感受比細體要更為莊重、踏實嚴謹，而細體則顯的更為活潑、有趣，給人愉快的感覺。
剛剛提到了字重的使用必要性，那麼我們如何定義字重呢？
如果字重沒有進行規範使用，那麼整個頁面的視覺邏輯則會變的更為混亂，所以往往這個時候，我們需要設計一個文字規範，例如主标題使用什麼樣的字重，正文字重樣式。仔細敲定整個文字的使用規則，并将規範延展到整個産品的頁面設計中來，也是統一産品視覺語言的重要部分。
比如京東在價格字體方面，使用了獨立設計的一套品牌專有字體，而價格在電商中是一個極為重要的信息，通過統一字體，能很好的提升品牌歸屬感。
sketch在于對文字管理這塊，做了一個 Text Style 樣式，通過Text Style，能很好的提高效率，規範頁面字号的大小。如果設計團隊成員均使用Sketch作為主力使用工具，那麼不妨嘗試配置一下這塊，提高團隊協作效率。一方面可以統一規範頁面的字體樣式，另一方面免去了調整字體的時間，減少不必要的工作量。
從iOS 11 更新就不難看出，目前界面風格的趨勢都是偏向于更為簡潔化，在一屏的内容裡做減法，這樣有利于降低閱讀負擔，将重要的信息更好的展示。在這裡，我分别對字體進行了梳理，分析下來，近期的字體使用特征主要有如下三點：
大标題能很好的吸引視線，第一時間抓住眼球，傳遞信息。拉大頁面空間的張力，降低視覺閱讀疲勞。
通過字重的差異化顯示，能更好的在單色環境中增加内容的呼應及對比，減少頁面中字體過度色的使用，從而能夠讓頁面更加的整潔，内容清晰明了，降低頁面跳出率。
使用單一色相的不同明度作為字體及圖标的顔色，能夠在區分信息層級的基礎上，能讓頁面顯得更為整潔，降低視覺幹擾。
互聯網在進步，所以設計趨勢也是有着各種各樣不同的形式，而字體作為基本語言，是設計師需要掌握的基本技能之一。這篇文章裡面的案例花了作者大量時間進行繪制&收集，希望能對各位讀者有所幫助。
另外其實在工作中，也建議大家對自己的經驗進行總結，對關鍵信息進行提煉加以沉澱，一方面能讓自己的知識更加牢固，另一方面也可以幫助後來者進行成長。
————–
第一次嘗試在人人都是産品經理上發表專欄，内心表示很忐忑。
閱文雖易，寫作不易！文章較長，非常感謝您的耐心閱讀。如果對文章感興趣，也可以在這裡通過留下一個小贊或者留言來支持作者！後面會經常給大家帶來一篇文章，也可以通過訂閱作者的專欄，來獲得知識的傳遞，謝謝大家！
本文由 @A.kun阿坤 原創發布于人人都是産品經理。未經許可，禁止轉載
題圖來自 pexels，基于CCO協議
,更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
