文字設計 (Typography) 的意義是什麼?

開始學typography和type design的課(並不是art design專業的, 為興趣來學的)。感覺有些字體之間的區別並不是很大,例如Georgia 和 Times New Roman。並且其實使用頻率最高的是還是Helvetica他們幾個。那設計那麼多字體(主要是英文)的作用是什麼呢? 到底換一種字體會對graphic design有多大的差別呢?


正面回答一下題主吧。

感覺有些字體之間的區別並不是很大,例如Georgia 和 Times New Roman。

上面是 Georgia,下面是 Times New Roman,其不同之處已經顯現了。如果看不出來沒關係,下面這張圖可以看得更清楚。

將這兩款字體的 Bold 字重放出,差別立現。Georgia 的字寬總體比 TNR 要大,並且前者在一些極細線(Hairline)如 e 的末尾處把筆畫加粗了不少。

至於為什麼。Georgia 是一款屏幕顯示字體,整體設計都是圍繞屏幕顯示效果進行的,加厚了襯線,屏顯做的渲染提示(hinting)也比 TNR 全面,全力確保屏顯效果優良。

而 Times 則是徹頭徹尾的印刷字體出身,服務《泰晤士報》多年才退役,最終淪落為 Windows 的屏顯字體也不過最近三十年左右的事情,只有為報刊印刷油墨控制的考量,hinting 也只有補救功效。

要論 Times 和 Georgia 在字形上的區別,那麼乍一看視覺上是很近似的,但一談到功能,許多設計思想不同的細節就彰顯出來了。

那設計那麼多字體(主要是英文)的作用是什麼呢

來看看下面這倆字體:

上面這款是經典字體 Didot Headline(Linotype 出品),下面這套是基於這類風格設計出來的 Celeste(Fontfont 製作),它們都是彰顯同一時代風格的作品,為什麼要另外做過一套?

原因是:Didot 是標題字體,Celeste是用於正文字型大小,故 Didot 保留了極其纖細的 hairline,而 Celeste 為了匹配正文,只體現優雅銳利的視覺印象,而將 hairline 全部加粗至合適。

你還可能發現,Celeste 的 S-a 之間的距離特別彆扭,似乎比其他字母對的間距都大不少。這也是為正文字型大小印刷的視覺平衡做考量,這一點跟 Fontshop 的員工確認過:

FF Celeste is targeted towards text sizes, that is why its spacing

is somewhat loose. It is normal that it looks a bit off when viewed in

very large sizes.

So,不同的字體也有不同的使用場合的考慮,甚至同一個字體家族裡也有為不同字型大小而設計的「光學尺寸(Optical Sizes)」,例如 ITC 的 Bodoni 系列,就是很好的例子,不過這裡談論不同的字體,就不再說了。

其實使用頻率最高的是還是Helvetica他們幾個。 到底換一種字體會對graphic design有多大的差別呢?

使用頻率最高不代表設計師不需要其他的選擇。

這是大名鼎鼎的因果律(咦? 效率應用 IFTTT 的頁面,用的是答主非常喜歡的 Avenir Next。這套30年前設計好的字體在最近十年才得到爆發性的使用。

這是博客平台 Medium,博文內容用的是 Freight Text,一款風格不同於 Times 的正文字體,2005年才被設計出來,是不少設計師偏好的風格。

這是 Airbnb,用字是 Lineto 的 Circular(定製版),他們或許更偏好小眾廠商的新意。

這是希拉里競選活動官網,藍色口號用的是什麼字體?Sharp Sans,由 Lucas Sharp 設計,在被發掘出來之前籍籍無名,泡在孵化器里,接連被三星(定製為 Samsung Sharp Sans)和希拉里官網(定製為 Unity) 選用後前途可期。

誰說設計師一定要用 Helvetica 了,只有盲目崇尚「一套字體打天下」的設計師,或者為了受眾上的穩妥安全而選擇無傾向字體的設計師或公司才會選 Helvetica,其他設計師大概不會沒有自己理性的思考吧。

我要稍微顯示這套工具的炫酷感,就用 Avenir;

我要提供屏幕上易讀的字體,我可以選擇 Freight Text;

我要展現安定溫暖的風格,就選 Circular;

我要展現我堅定的競選理念和「鐵娘子」風範,Sharp Sans 是不錯的選擇。

不同的需求造就了不同字體存在的意義和價值。

甚至回過頭來看題主說的 Helvetica,不滿其設計的人也有很多。

比如說這位 Bruno Maag,一心想幹掉 Helvetica,自己弄出了個 Aktiv Grotesk 字體。(圖片來自 Create Review)

當然更多人想到的是改良 Helvetica。

有不滿 Helvetica 在照排時代和數字化時一些細節被劣化,找出設計原稿重新復刻的 Neue Haas Grotesk。

有直接融合了 Helvetica 和 Univers 的 Haas Unica。

字體設計師的偏執程度如此,平面設計師似乎也樂意看到這些偏執,樂於嘗試這些字體。

真的沒有人比他們更偏執了。


許多設計師從專業角度給出了回答,那我作為一個普通用戶,也提供一個視角。

設計師在分析題主的問題時,會說 Georgia 和 Times New Roman 的差別其實很大,你看,這兒是不一樣的,哪裡也是不同的。

但對剛學習 typography 和 type design 的題主,以及更廣大的用戶而言,這樣的區別顯然非常細緻。

設計說到底,也是為大眾服務的。那麼,題主的問題之一,可簡化為:「大眾是否有能力感知到文本排版之間的差異?」

答案不言而喻。

上述的兩款字體,若用找茬的方式去看,確有許多差異。但粗略看時,差別似乎又不大。而當用這兩款字體排長文本時,這時的差別絕大多數人一眼就能看出。字形、字母間距、行高等元素之間微小的差異在長文本間累積,直到形成顯而易見的差異。

普通用戶也許不能具體地說出設計上的優劣,但絕不代表他們沒有審美。

我們常聽見一個人這樣評價某款手機:「這手機挺好用的。」倘若追問,恐怕他也答不上來哪裡好用。

同樣的道理,用戶或許無法指出不同排版之間的差異,但他們可以很輕鬆地使用直覺判斷優劣。

至於題主的另一個問題,「為什麼需要那麼多字體呢?」

請不妨將字體想像為衣服吧。

常見的字體就如基本款,穿上了能保證不錯,但不能保證出彩。若想艷壓群芳,恐怕還得精心挑選,劍走偏鋒。

我們根據不同的場合,選擇不同的穿著。例如在一個高級宴會上,你恐怕不會穿著T恤、牛仔褲和休閑鞋就上陣了。同樣,你恐怕也不會在周末和朋友的聚會上 suit tie.

不同的字體,有著不同的應用場合。

西文字體的分類細緻[1][2],設計師往往會根據文本的屬性,如元素是標題、正文、腳註還是其他元素,選擇字體。也會根據想要表現的效果,如風格是嚴肅抑或輕鬆,而選擇字體。

字體越多,設計師的選擇空間就越大。普通用戶或許會犯選擇困難症,沒關係,因為這樣的選擇是設計師的工作。設計師在面對巨大的字體庫時,就算也會犯困,那也應當是幸福的難題。

[1]字體分類方法有那些? - 金釗立的回答

[2]Type Classifications


Georgia 和 Times New Roman的確在很多人眼裡是比較類似的兩個字體…但你仍能很明顯的看到兩者在襯線、球形端點等方面的處理上的差別,這種差別在斜體中更加明顯。此外,兩者的間距和大小也不一樣。更不用說Georgia那高高低低的不齊線數字…

其實我覺得,字體間差別比較大的話,你也會知道做出選擇的。我猜你可能只是不太理解為什麼有的字體「看起來差不多」卻還要被設計出來吧。當然一開始是為了滿足不同的需求,像Georgia的話,最初是為了能在上世紀九十年代中期Windows的低解析度屏幕里依然能清晰地顯示小字體而做出的設計,因此也成為web安全體,它的線條是相對比較粗的(粗體就更粗了);而Times New Roman在當時顯示效果並沒有前者好,它是為了印刷而被設計,也更適合印刷的字體。

然後,換一種字體會有多大影響?實際上,雖然只是我的個人感覺,大概…對大部分人來說沒什麼影響。高解析度屏幕越來越普及,渲染方面的問題慢慢離開焦距的位置。而純字形方面的話…看看有多少人做PPT標題還用上一個五彩的楷體標題就知道了。很多人只有一個模模糊糊的「好看」的概念,對於一些細節方面的差別,並不是很敏感,這個情況在任何行業都差不多。

不過即使大部分人分不清這些區別,但作為設計師是需要去了解它們,並有依據地做出不同選擇的。雖然需求這東西總在改變,正如同如今的你可能會覺得Georgia實在是太厚重太老氣了,你更喜歡Helvetica一樣。當你的需求無法被現有的字體滿足,你也可以去做相應的設計,即使有朝一日可能也被時代淘汰。

但出生總是有意義的啦。


先不說字體, 你難道從來沒有對任何一種東西產生過, 草, 真尼瑪爛, 看哥給你弄一個, 這種想法嗎? 那麼, 恭喜你, 你已經成為了創造者.



區?別?不?大?

就題主您舉的這兩個例子(Georgia vs. Times New Roman)區別就巨大。


https://designcode.io/iosdesign-typography

我假設你是程序員,或者是目標 PM 等。

我覺得相對於目前的答案,說不定:http://www.lynda.com/TextWrangler-tutorials/Understanding-how-good-typography-promotes-reading/79411/86906-4.html?autoplay=true

這個和我上面給的鏈接更適合你。

首先關於Georgia 和 Times New Roman,底下是一個不錯的答案:

The first thing to look for in a font is legibility. Text is meant to be read and if it feels hard to read, people won"t want to read it. When we read, we don"t read every letter. We read the shapes of words. These shapes are primarily created by two things: the strokes that make the letters and the spaces in and around the letters. So what makes a font legible? Open spaces and healthy strokes. If you"ve ever had to read a bad photocopy of text, you have experienced how hard it is to read an illegible font.

If we look closely at these hard to read texts, we can see we"ve lost the spaces in the letters here in the dark photocopy. They filled in and made the words hard to read. In the light photocopy, we have lost the strokes in the letters. We are only left with parts of letters, making it harder to recognize words. Screens have a lower resolution compared to printed text on paper.we need to be more sensitive to spaces and strokes for web-based topography. It"s easier for them to get lost on the screen. So we need to start by finding a legible font, but what makes a font legible? Things to look for in a legible font are generous x-height.

That"s the height of the lowercase x. See how it"s higher in Verdana than in Times New Roman.Even though they are both set at the same size, the Verdana looks bigger and the spaces in the lowercase letters feel more generous because of the x-height. These spaces inside the letters are called counter forms. Legible fonts have open apertures. That"s the opening in letters like C, A, and E. See how it"s bigger in Verdana? An open aperture creates more visual space.

Slightly loose letter spacing also promotes legibility. The text in Verdana is clear to read.Generous bowls also promote legibility. The bowl is the shape of the rounded forms in the lowercase letters. If a bowl is too narrow, the counter form is too small, if it"s too round, the counter form gets too big. Look for a bowl that falls nicely in the middle. Also related to bowls and counter forms or shoulders. Shoulders are where the curved line meets the stem in letters like H, D and M.

The stem is the straight vertical stroke in a letter. See how Verdana"s shoulders make the counter forms feel a little bigger? This helps keep the counter form open even at smaller sizes and at low resolution. A legible font has prominent ascenders and descenders. Ascenders are strokes that extend above the main line. Descenders are strokes that extend below the baseline. Slightly longer ascenders and descenders or having serifs on the ascenders and descenders can help make the shapes of the words more recognizable.

Serifs are the little strokes coming off the ends of stems in some fonts. We call these serif fonts.The fonts without serifs we call sans-serif fonts. Does a legible font need serifs? One common misconception is that text should be set in a serif font because it"s easier to read and sans- serifs should be used for headlines. This is not always true. Both serif and sans- serif fonts can be legible or lack legibility. Here Verdana is more legible for text than Times New Roman.

Strokes and spaces are far more important than serifs when it comes to how easy a font is to read. But let"s look at Georgia, a more legible serif font than Times New Roman. We can compare their terminals. A legible font has discernible terminals. Terminals are the ends of strokes in letters like A, R, and F. Some terminals have a ball or pen-formed shape. Other terminals don"t have any extra shape to them. While you don"t want a font with a crazy shape like blood or thorns, having a bit of shape can help readers differentiate between the letters in text.

Finally, legible fonts have generous strokes. If strokes are too thin, they get lost. If they are too thick, you run the risk of losing space in the letters. Here the thick strokes stand out, while the thin strokes and serifs practically disappear. A font with very thin stroke is also harder to read.As web designers, we now have hundreds of fonts available to link to. Not all are legible. Look for a font with generous space and healthy strokes and you"ll be on your way to choosing a good font for your site.

Regardless of what you may have heard, people read content on the Web. People search for things they need or want to know. They get lost in stories. People read what is important to them.Thus, our most important job is to help readers find, understand, and connect with the words, ideas, and information they seek. People read in three ways. People read casually, skimming over text, reading words or paragraphs here or there to get a sense of what it says.

For example, a reader will skim the headlines of an online news source looking for articles of interest. People scan with purpose, jumping from place to place on a site, looking for a specific piece of information. They may only read the first word or character of each item as they scan the screen. For example, when looking for contact information on a web page, a reader will look for a link that starts with the letter C, ignoring all the other links in the list.

People read in an engaged manner. When they find an article or blog post they are interested in, they will slowdown and read the whole text. They may even go into a trance like state. For example, when reading an article on a favorite site, a reader will focus on the text, reading it at their leisure. We can help facilitate all three ways of reading. This is what text looks like without applying typography. Good typography promotes reading. Font choice and size keep text legible and meaningful.

Good line length and line height can help guide our reader"s eyes and ease the burden of following horizontal lines of text. Vertical spacing and hierarchy break up text into meaningful, manageable chunks of information. As web designers, we can use typography to create chunks of legible, meaningful, readable, scannable text. We can use typography to promote the reading and understanding of web content.

祝好


唔,關注細節的眼睛是設計師的重要素質……

我覺得普通人不關注或者看不出字體差異是無可厚非的事情。設計師的工作,就是幫助並不在意細節的大眾,完成那些其實很重要/很有意思的細枝末節。

但是事關短暫的人生,如果不想把時間耗費在糾結於這種程度的差別上的話,你可以考慮下要不要換個專業……


看O的形態可以知道他們的axis不同,Georgia是垂直的,Times New Roman是傾斜的。看h和t也能發現襯線的特點是不同的。然後Times New Roman的筆劃粗細對比強烈點。所以基本可以說是兩個流派的字體了……

然後就是,對於不同的應用場景,字體設計也有對應的適應。為了印刷的和為了屏幕顯示的在筆劃的處理上會有不同,等等。所以會有細節不同但風格類似的字體出現。


把文字的意義轉換為圖形之美


意義這種東西本來就沒有什麼意義,細微的差別呈現出細緻差異的美。


有這樣的想法很正常,因為大家一開始都這樣想的。任何領域只要沒有深入進去,看到的視點都是我們所說的大眾視點,換句話說,大眾覺得自己到這一層面夠了,滿足自己的生活需求就好啦,並且和周圍大多數人差不多就好了。因為沒有太大需求,比如女生覺得男生籃球鞋不是都差不多麼,男生會告訴你差別可大了,這是誰的第幾代,有什麼特徵背景。比如男生覺得胸罩就罩杯差別大一點,其他都差不多吧,女生會告訴你其實她貧乳,不戴也沒關係,不對,是有各種材質,扣帶也有很多種類,還有運動款等等。又比如一開始學畫之前自己只知道咖啡色,買了顏料之後才知道還分赭石色和深褐色。例子還很多我相信題主明白了。所謂typography的意義,和其他也一樣,簡單說就是你了解越多,你的選擇更多,你的生活越自由、精緻。


前方多圖預警,非wifi人員請迅速撤離↓↓↓

先給幾種比較常見的英文字體分各類。以下內容皆引自The Non-designer"s Design Book(中文版名字太奇怪我就不寫了。)


字體排印的意義在於美


推薦閱讀:

為什麼所有設計上有水平的網站在 Mac OS X 下用 Safari 瀏覽時網頁字體都是默認的華文黑體,而土鱉網站都是宋體?
iMac上Safari的默認的字體大小看起來有鋸齒,有些彆扭?
Tao Chen 設計的這款中文哥特體怎麼樣?
用哥特體/平尖黑體寫的俄文是什麼樣的呱?
為何iOS9的繁體中文環境下簡體「慘」字的右邊是「叄」而非「參」?

TAG:字體 | 字體設計 | 設計 |