標籤:

屏幕字體與印刷字體設計上有什麼區別?什麼字體最適合屏幕閱讀?

本題已收入知乎圓桌 ? 字體設計門與路,更多字體設計話題歡迎關注討論

----

在移動互聯網時代,字體設計師會如何使字體更適合手機端的閱讀?


首先我們來看看字體設計師們是怎麼說的。

-----------------------------------------------------------

小林章先生在中國的一次講座上被問到過「如何為屏幕顯示設計字體」這個問題,他提到了經常被技術折騰的Matthew Carter先生……


過後者的TED演講的人大概還記得,Matthew先生的職業生涯一直保持著和工程師們的合作,曾經他試圖用更簡潔的設計解決一些字體文件的體積問題,但
是拿著提案找到工程師們的時候,聰明的技術人員會樂呵呵地告訴他問題已經被解決,存儲空間不是問題了;但是有時候技術人員的反饋並沒有那麼迅速,或者說計
劃趕不上變化,小林章先生口中的Matthew先生更加倒霉一些,為了某設備吭哧吭哧地做顯示解決方案,做完的時候設備更新了,一年白做了……

所以小林章先生的結論是,他不會針對某種媒介的技術限制而做設計,免得像Matthew Carter先生一樣遭罪。

-----------------------------------------------------------

大噴子Erik Spiekermann曾經批(kuang)評(pen)Helvetica在小字狀態下辨識度很糟糕

Helvetica sucks

It really wasn』t designed for small sizes on screens. Words like
milliliter can be very difficult to decipher. If you ever had to read or
write a password with 1, i, l or I, you know the problem.

Source: Helvetica sucks

當然,Erik Spiekermann並不是唯一一個發出這種聲音的人,在OS X 10.10一度將UI字體更換為Helvetica的時候,Tobias Frere-Jones也曾經表達過他的不滿。

Apple"s
desktop and mobile operating systems have been gradually converging for
some time. So it was inevitable that one typographic palette would
displace the other. With OS X 10.10, Mac desktops will sport Helvetica
everywhere. But I had really hoped it would be the other way around,
with the iPhone taking a lesson from the desktop, and adopt Lucida
Grande. Check the lock screen on your iPhone. You』ll see Helvetica
there, a half-inch tall or larger, and it looks good. Problem is, there
aren"t many other places where it looks as good.

Despite its
grand reputation, Helvetica can』t do everything. It works well in big
sizes, but it can be really weak in small sizes. Shapes like 『C』 and 『S』
curl back into themselves, leaving tight "apertures"—the channels of
white between a letter』s interior and exterior. So each shape halts the
eye again and again, rather than ushering it along the line. The
lowercase 『e," the most common letter in English and many other
languages, takes an especially unobliging form. These and other letters
can be a pixel away from being some other letter, and we』re left to deal
with flickers of doubt as we read.

Lucida Grande presents open
apertures, inviting the eye to move along sideways through the text. It
has worked really well—for years, and for good reason. For any text,
but particularly in interfaces, our eyes need typefaces that cooperate
rather than resist. A super-sharp Retina Display might help, but the
real issue is the human eye
, and I haven』t heard of any upgrades on the way.

Source: Why Apple"s New Font Won"t Work On Your Desktop

雖然屏幕解析度的提高可以幫助閱讀,但是人眼還是本能地需要更加容易辨識的字形,而這一部分,是可以由設計來解決的問題。

-----------------------------------------------------------

Monotype的另一位Type Director,Steve Matteson,從X-BOX的UI字體開始到後來的Droid系列Segoe系列,一直進行著針對顯示設備用字體的設計。他提供了實際操作中很多有意義的經驗。可以參見這篇訪談,談得非常淺顯易懂。

http://typecast.com/blog/type-qa-steve-matteson-from-monotype

圖都很直觀,比如這個G的細節,在小字型大小就看不見了。

Steve Matteson的老師,也是我的導師,Charles Bigelow,曾經做過大量閱讀用字的研究

關於字型大小和造型比例對於閱讀的影響:

http://www.ncbi.nlm.nih.gov/pmc/articles/PMC3428264/

由 @yue wang 君進行的一篇訪談,談到了小字設計的,在字談字暢里也提到過

http://tug.org/TUGboat/tb34-2/tb107bigelow-wang.pdf

為屏幕,尤其是早期解析度不高的屏幕的文字設計,和追求Legibility的小字型大小正文字設計有相當大的重合度,所以很多研究成果是可以共通的。西文相對於中文來說比較簡單,設計原則可以很清晰的歸納概括。相對於一般的字體,小字用字體一般會:

1、增大字面大小

2、增大x-height

3、減少對於小字下過於細小無法看清的細節

4、避免過細的筆畫

5、增大字間距

6、選用比較開放的字形

-----------------------------------------------------------

這些設計師們的經驗總結,在字體設計的發展上有著直接的體現

增大字面大小和x-height的做法在早期屏幕用字體有著非常直接明顯的體現,比如90年代來自Charles Bigelow和Kris Holmes夫婦的Lucida,來自Matthew Carter的Verdana和Georgia

不過一來大家口味會膩,二來顯示精度也的確在上升。Lucida系列雖然功能性完備,但是大家覺得龐大的字面和Garamond之類的字體比起來,終究還是不夠雅緻;Verdana也因為Windows的普及在網頁等媒介上的過量使用,漸漸成為了和「品質感」無緣的名字。但是後來的顯示用字體還是繼承了早期屏顯字體開放性字形的特徵,或者說是設計師在相同的目標下通過邏輯得到的一個必然結果。這一點在2006年推出的Microsoft ClearType Font Collection上體現得非常明顯,雖然造型各異,也沒有了Lucida一樣巨大的字面,但是基本都是使用Humanist風格。

時間發展到了今天,顯示精度已經提高了太多,這種硬體上的進化這讓設計師的選擇多了很多。觀察San Francisco和Helvetica之間的關係不難發現,San Francisco已經不再執著於開放的Humanist風格而是延續了Helvetica的Neo-Grotesque風格,依然字懷飽滿切口平直,只是把開口稍稍打開了那麼一點點。

-----------------------------------------------------------

屏幕字體設計風格的發展對於東亞字體設計的影響似乎慢了一個世代,ClearType Font Collection里包括了兩款東亞文字,分別是2006年的微軟雅黑和Meiryo。這兩款字體設計里,除了明顯針對屏顯優化而生的去喇叭口處理,我們看到了出現在90年代西文屏顯字體的特徵——極大的字面。以增大字面和中宮提高低解析度和小字下的可讀性,帶有這種嘗試目的的這兩款字體也成為了中文早期屏顯字體的的代表性字體。

這種設計風格即使在現在也在延續——日本UD(Universal Design)字體。UD字體是針對由於年齡增長或白內障等病理造成的視力退化而誕生的產物,邏輯極端直接和功能化——就是極度外擴的字面和中宮,不惜脫離常規比例也要把留白留得清清楚楚。

-----------------------------------------------------------

寫到這裡,我們得明確一些東西——到目前的行文為止,我們一直在借用小號正文字的設計理論來指導屏顯字體的設計風格,但是屏顯並不能和小字設計完全划上等號。屏顯,尤其是早期屏顯精度以及字體渲染,給予字形設計的限制比印刷用小號正文字更多,我們看到的各種解決方案,都是伴隨著巨大的代價的。

設計師給出了大字面的解決方案,但是犧牲了一些美感。這種風格讓Lucida系列得到「Least Graceful Sans-serif Typeface」的評價,而這個解決方案對於中文排版的損傷則遠遠不止一些優雅。中文字寬都是1000,字面比越大,就意味著字間距越小,這和小字排版需要更大字間距的原則背道而馳,得到的結果就是微軟雅黑擁擠的排版效果。據說UD風格現在在日本也存在爭議,理由和Lucida差不多,因為擴大中宮和字面做得太過火了,審美上有問題。(「據說」是據 @Eric Liu 君和 @錢爭予 君說,嘻嘻嘻,論點來自字談字暢第6期,Source: Type is Beautiful)

工程師在不斷改進文字渲染的同時,提出了Hinting這個解決方案。這已經談不上犧牲什麼了,Hinting技術本身就是一個向硬體發展水平妥協的做法,我記得 @梁海 君曾經在內核恐慌(大概)里說這是一個很「臟」的技術。這個形容相當準確,就是那種「缺一尺填塊磚短一寸抹把泥」的補救方案,耗費極大的力量,只是為了遷就若干年內使用的低精度顯示設備,得出一個還原度很低僅僅是看得清的結果,(有時候還是看不清,)怎麼想都很窩囊的技術。而東亞文字本身造型又很複雜,更加劇了人力和財力的消耗,微軟也不傻,所以ClearType Collection里的東亞字體就止步於雅黑和Meiryo兩款了吧。

-----------------------------------------------------------

所以我個人認為,屏顯字體設計是一個是帶有明顯的對當前顯示設備特性或者限制作出適應的一種功能化產品。只是隨著顯示精度的提高,給設計師的鐐銬減少了,我們不用像以前那樣犧牲得那麼大;而最終這個設計需求也許會因為顯示設備的高精度而不復存在。

-----------------------------------------------------------

所以我一直把旗黑當作是雅黑、蘭亭黑的後續產品,繼承了無喇叭口的設計特徵,收斂了中宮,而且還做了一個相當功能化的動作——把勾都拉長拉平直了。這個設計特徵讓旗黑的風格在中性的基礎上向硬郎偏移了一些,但是對於基於像素的屏幕顯示十分友好。但是我並不希望大家理解成我在說旗黑比蘭亭黑質量好,這兩款的差異主要是風格差異。我個人是認同UD設計風格的邏輯的,大中宮的需求依然存在,只是屏顯黑體有了大小中宮的更多風格選擇。

不過基於同樣的邏輯,我一直不理解為什麼方正要堅持把悠黑稱為「第二代屏顯字體」。縮小的中宮,彎曲的勾畫,尖銳的切角,這些在現在的手機之類的設備屏幕上都是完全可以接受的設計特徵了,但是也就是風格特徵而已啊……偏小而彎曲的勾畫、點之類筆畫的小角度切角,怎麼看也不是對屏幕進行優化的設計特徵,我個人倒是趨向於把悠黑用在印刷上……繼蘭亭黑之後推出小中宮黑體產品,相比於旗黑的風格也稍軟一些,賣點足夠多了啊,為啥要執著於稱其為「屏顯字體」呢……

-----------------------------------------------------------

懶,圖點開鏈接自己看。

懶,排版就這樣了,信息比較碎片化,邏輯關係勉強還在。


不同的技術以及技術的不同發展階段,都會影響字體設計。顯然印刷和屏顯技術上不同,各自又都經歷了不同的技術階段。

鉛字時代印刷字體受制於鉛印技術,字體設計上做了很多屈就技術的調整,比如黑體的「喇叭口」和「挖角」,隨著鉛印的淘汰,這些設計特點已無必要。

當今印刷精度高,也遠高於屏顯,且紙媒沒有玻璃覆層等等物理局限,用字相對屏顯要寬容得多,給字體設計的寬容度也更大。

今天的屏幕基本上全是液晶屏,而大多數液晶屏的像素排列為水平豎直正交排列。在眾多字體類型中,黑體更適應這種排列。

電腦屏幕比較大,像素密度低,使用時視距遠,同字型大小下顯得「大」的字體無疑佔優勢,也就是所謂的字面率。另外以五號字為例,在word中每行在40字左右,比較長,橫排視覺連貫的字體更適合,這就要求展寬字面以壓縮字距。如微軟雅黑正是基於這些考慮而被設計的。

而智能手機要便於攜帶,屏幕不可能做得太大。以5吋屏為例,通常每行也就十幾個字,無需刻意維持橫排視覺的連貫。手機閱讀的視距較短,閱讀場合多變,保持字與字之間的相對獨立,保留更多的單字特性,反而更利於快速辨識。另外智能手機屏幕像素密度高,有足夠多的像素來表現小字面字體。如方正悠黑基於這些考慮而被設計,字面適當收縮,保留更多傳統書法間架,有更細膩書法人文審美,也使得單字特徵更明顯。

隨著屏顯精度的進一步提高,目前屏顯主題字黑體獨大的局面有可能會改變。總而言之,技術對字體設計的種種限制越來越少,相信好的字體會不斷湧現。


應邀答題~~快節奏的讀圖時代,屏顯字體越來越回歸文本屬性,應更加關注閱讀體驗,簡潔化、流暢性、易讀性是要遵循的基本要素。基於液晶屏的像素排列限制,電腦屏幕大,像素密度低,目前只有無襯線的黑體最符合簡潔化需求,而中文遠比西文筆畫繁複,故而表現不同風格的可能性很小。智能手機屏幕小,像素密度高,有足夠多像素來表現字體風格,屏幕字體也像印刷領域一樣存在字體多樣化選擇的可能,而不應只限於黑體,其他如圓體甚至宋體、楷體等細節豐富的襯線體也有陸續登場的必要和可能,應工具支持與時代需求是大勢所趨。

工具與技術的發展直接影響字體設計。鉛與火時代,印刷字體受鉛印技術制約做了針對性調整,如黑體的「喇叭口」和「挖角」。光與電時代,紙媒的印刷精度高,字體設計不用考慮太多局限,可以儘可能優化到極致,而電子字體限於像素數量與屏幕介質等原因,用字相對局限,從而設計也應考慮相對簡潔化處理。

當然,無論什麼時代與介質的字體所遵循的設計理念都是一致的,那就是完善的結構筆形與流暢易讀的閱讀體驗,而且隨著時代飛速發展與技術不斷進步,對屏幕與印刷字體設計的界限區分也將越來越模糊。


我們在紙質媒介所看到的圖形和文字,都是反射光的呈現。光照度一般不會太強烈,視覺感受比較柔和。在設計表現中紙質媒介的表現自由度也大得多。

屏幕顯示則只有有限的像素、固定的柵格、自發光的光暈現象、線條交叉處的銳度模糊、強反差下的視覺刺激等等,對字體設計而言都是客觀的限制條件。隨著顯示精度的不斷提高,屏幕上的字體表現也有了更多的可能性,但一些先天的局限還是會影響到文字閱讀的舒適度。


隨著屏幕解析度的提升,以後將不會有屏幕字體與印刷字體的區分。畢竟現在屏幕解析度的發展速度要比字體設計的發展速度快的多。


與印刷不同的是,屏幕是自發光的。不將投影式屏幕算在內,屏幕亮度可快速自調節。然而再快的屏幕亮度調節,也快不過預設。字體亮度可以影響到字重。

同樣,變形問題也是印刷字體不用考慮的。至於為什麼屏顯字體需要考慮字形變形,我也不知道。

這兩個維度沒有人會認為值得關注——因為外部解決問題的方法已經很便捷,不值得去試驗。我也同意,因為我是瞎編的。

可以說,屏顯字體因為載體是硬邦邦的屏幕,變數低,字體風格會趨同。——去裝飾性,提升辨識性,這應該是這一時段的主流。而這一主流會持續到下一種顯示技術普及之後。

到了下一代顯示技術普及之時,上邊所說的兩個維度便會很自然的加入字體設計常態中來。——技術革命,總是會讓我們使用與體驗變得更傻瓜與便捷,——將更多的因素集成在產品身後,我們只看產品表面。另一方面,為了適應全形度自由的懸浮顯示技術,增強現實的普及,擺脫平面閱讀的邊框限制,人類,只能再次思考最本質的問題,——怎麼樣能夠達到更為快速便捷,自由的,閱讀?


印刷字體,根據其在用戶眼前的呈現手段(油墨、激光、鉛印,等),有著不同的設計手段。

螢幕字體,根據其在用戶眼前的呈現手段(數位螢幕發光、還是電子墨水?DPI有多高?),也有不同的設計手段。

柯熾堅當初設計信黑體完全是為了批配 LowDPI 的螢幕,結果在 HiDPI 螢幕下的正文字重看著反而缺乏視覺衝擊力、看著奇怪。

現在我就拿 HiDPI 螢幕的場合來說事情吧(兼顧 LowDPI 場合):

我曾經一度以為最適合螢幕顯示的是思源黑體、螢幕顯示與印刷雙及格的是冬青黑體…

(冬青黑體的喇叭口在數位螢幕上來看並不顯眼礙事,且在各種印刷場合下都表現不錯)

但最近我認為最適合數位螢幕顯示的正文字體是蘋方(華康金剛黑)、其次是文鼎晶熙黑。

(兩者各有所長,但都是非常高質量的黑體字族)

P.S.: @李阿玲 可能習慣性地忽視了總部在台灣、且在中港台日韓都有設計團隊的威鋒數位…

…畢竟不是中國內地的字體廠商,被無視很正常,也怨不得誰。

同樣強大的字體設計公司還有文鼎科技,當然我都是拿他們最近一兩年的作品來說話的。


屏幕閱讀?

寫方案的時候用微軟雅黑,簡單明了比較有逼格,小標題們用【】框起來並加粗更有層次。

PPT用微軟雅黑或黑體做重點,字體顏色紅和黑白底,會很有逼格。

手冊這種字比較多的,屏幕閱讀模式下用仿宋的灰色,會比較舒適。

紙質以及kindle就用宋體,比較符合閱讀習慣。

贊多就再配圖吧。


我個人覺得,微軟雅黑在屏幕上很好看,列印到紙上略顯難看。宋體在屏幕上看著很難看,列印出來,效果相當棒。


微軟雅黑


最適合屏幕閱讀的是微軟YaHeilight



屏幕字體可選擇餘地很小,一般正文和標題都可以用同一種字體,標題加粗即可。印刷的話有時候主題為了吸引受眾刻意進行誇張的再設計,反而不太會注重用戶感受。


字體的存在是有其特殊意義的,通常方便閱讀的是字體工整簡單辨識度強的,一般微軟雅黑多點。加粗的字體一般有強調效果。不過中國很多字體富有柔性委婉的意境,用於特定場合非常好。至於電子閱讀永遠不可能有紙質的那種效果。水墨屏也不會有墨感


同意 @潘嵐強的答案,襯線字體確實在細節上會降低在屏幕上對字的辨識速度

以下是我正在用的字體,排名分先後:

1.方正中等線

2.方正蘭亭刊黑

3.方正蘭亭黑

~~~~~~~~~~~~~~~~~~~~~~~我是夾帶私貨的分割線~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

方正華隸,以前喜歡用的


屏幕閱讀適合arial這種。line height要大點

印刷字體適合times new roman

不能更簡潔了哈哈哈哈哈我們老師說的


微軟雅黑是一種簡潔的美觀。也包括了後期Light的改進,應用在UI上非常簡潔扁平。當然蘋果新推出的蘋方也很好,都朝著圓潤扁平的風格前進。


對印刷字體沒研究,基本上人家印成什麼樣都得看。

屏幕閱讀的話,在各種電子設備上試了一圈,裝過不少字體,現在感覺用楷體還是比較舒服的。


我還是一名學生,簡單談談我的看法。

根據觀察市場上字體的使用現象:

印刷字體——報紙、刊物、書本···(正文)

屏幕字體——微信文章閱讀、新聞門戶網站、電子書···(正文)

在這個認知下,通常襯線字體適合印刷使用;而無襯線字體更適合屏幕。

為什麼這麼說?

印刷字體需要兼顧油墨的特性和人閱讀的實際情況,通常情況下人眼分辨可達300dpi,甚至更高;印刷字體可以設置的更小,比如7點;在這種情況下,襯線體因為字體筆畫粗細不同,抑揚頓挫的筆畫特點,在字體極小的情況下都能有較好的易讀性。

因字體受屏幕解析度的影響,筆畫粗細多變的襯線體在屏幕的渲染下,筆畫邊緣輪廓有時會顯得極為模糊,效果遠遠沒有簡潔乾淨線條感的無襯線體來的好。

當然,在未來,隨著屏幕技術的發展,屏幕解析度也許不再是阻礙字體選擇重要原因。

更多設計師會依託於企業的品牌氣質去選擇合適的字體。

以上。


行書

有點像楷書和草書的結合,對新手來說

不會太難懂的同時還可以接觸新的書寫方式

o(`ω′ )o個人觀點


推薦閱讀:

如何評價站酷上對某設計師字體設計的看法以及下方的評論?
在字體排印中「leading」怎麼翻譯比較合適?CSS 中具體是如何計算的?
皮克斯動畫電影《勇敢傳說》的中文片名 logo 字體設計得如何?
日本、台灣的字體/字型是如何進行設計/研發的?
對於一個外行,應該怎樣欣賞字體設計?

TAG:字體設計 |