Responsive Typography: The Basics by oliver reichenstein
當(dāng)我們建立網(wǎng)站的時(shí)候，我們一般從定義正文開(kāi)始嘉冒。正文的定義顯示了你的主欄有多寬涩禀，其它幾欄的大小就隨它自己內(nèi)容定義了疯搅。直到最近，各種屏幕分辨率或多或少是同質(zhì)化的埋泵。如今幔欧，我們要處理各種屏幕尺寸和分辨率。這讓處理變得更復(fù)雜丽声。
在重整旗鼓的熱情中礁蔗，我寫(xiě)了一篇關(guān)于響應(yīng)式排版的博客，這篇文章主要專(zhuān)注于我們最近的實(shí)驗(yàn)：響應(yīng)式字體雁社。如果不知道IA的歷史浴井，你可能會(huì)錯(cuò)過(guò)我們新啟動(dòng)的網(wǎng)站中的響應(yīng)式排版和設(shè)計(jì)的一些關(guān)鍵點(diǎn)。我決定從頭做起霉撵，一步一步解釋響應(yīng)式排版磺浙，而不是整理所有文章。以下是第一步徒坡。
為了防止給每個(gè)可能的屏幕尺寸做不同的層級(jí)設(shè)計(jì)撕氧，很多網(wǎng)頁(yè)設(shè)計(jì)師會(huì)采用響應(yīng)式網(wǎng)站的概念。一言以蔽之喇完，這是一種網(wǎng)頁(yè)布局會(huì)自動(dòng)適應(yīng)屏幕尺寸的概念伦泥。有很多種方法可以定義這種概念。我喜歡用這種方法：
適應(yīng)性布局：按步驟調(diào)整布局適應(yīng)有限數(shù)量的屏幕尺寸。流體性布局：不斷地調(diào)整布局以適應(yīng)每一種可能的寬度不脯。兩種方式都有優(yōu)勢(shì)和劣勢(shì)府怯，我們相信布局適應(yīng)于很少的合理變化位置是我們要采用的方法，因?yàn)榭勺x性比布局寬度隨時(shí)和窗口一樣寬來(lái)得重要防楷。這是不是一個(gè)復(fù)雜的問(wèn)題它本身就值得商榷牺丙，但是最優(yōu)的可讀性需要在文字尺寸上一定數(shù)量的控制（欄寬），就此看來(lái)复局，流體式布局會(huì)產(chǎn)生更多問(wèn)題赘被。
提示：響應(yīng)式設(shè)計(jì)已經(jīng)包含了很多宏觀排版問(wèn)題（文字大小、行高肖揣、欄寬）民假。于是響應(yīng)式設(shè)計(jì)已然在很多方面包含了響應(yīng)式排版。在我們自己網(wǎng)站上第一次發(fā)表關(guān)于響應(yīng)式字體的文章主要針對(duì)我們使用的“階段字體”龙优。我想要在下一篇說(shuō)說(shuō)關(guān)于階段的東西羊异，現(xiàn)在要快速在屏幕上進(jìn)入響應(yīng)式宏觀排版的問(wèn)題。
選擇一種字體
正確的色調(diào)
遲早彤断，你需要決定哪種字體是你想要用的野舶。你選擇一種字體主要是色調(diào)上的問(wèn)題，但是宰衙，因?yàn)槊恳豢钭煮w都有它自己的品質(zhì)平道，都需要（或禁止）一定的處理，字體的選擇會(huì)產(chǎn)生很多視覺(jué)和技術(shù)上的結(jié)果供炼。網(wǎng)頁(yè)字體有非常多種可以選擇一屋，所以選擇一種適合的字體是另外一種考驗(yàn)。
我們通過(guò)為自己的網(wǎng)站設(shè)計(jì)字體來(lái)試驗(yàn)階段性字體袋哼。我們選擇了一種襯線字體因?yàn)樗m合我們的色調(diào)冀墨，同時(shí)映射出我們內(nèi)容的提煉。我們?yōu)镮A WRITER選擇了一款等寬字體涛贯。因?yàn)槲覀兂绦虻氖滓康氖菐湍愕玫降谝皇值牟莞宸碳危覀冇绕溥x擇了nitti字體，一款讓你同時(shí)覺(jué)得很有力但是很細(xì)致的字體弟翘。使用等寬字體的決定也是因?yàn)榈谝粋€(gè)ipad的系統(tǒng)不自動(dòng)緊排比例字體虫腋。我們即刻決定使用等寬字體，而不是使用比例字體以至渲染效果很差稀余。
有襯線字體還是無(wú)襯線字體
通常的選擇會(huì)在有襯線字體和無(wú)襯線字體之間悦冀。這本身是一個(gè)很復(fù)雜的問(wèn)題,但是這里有一個(gè)簡(jiǎn)單的經(jīng)驗(yàn)法則可以幫你：有襯線字體是一個(gè)牧師，無(wú)襯線字體是一個(gè)黑客滚躯。沒(méi)有一個(gè)比另外一個(gè)好雏门，但是，因?yàn)楦鞣N各樣的原因掸掏，有襯線字體有更獨(dú)裁的痕跡茁影，而無(wú)襯線字體感覺(jué)更民主。記住丧凤，這是被包裹在兩條懶散的線里面的五千年的排版歷史募闲，，所以愿待，不要太在意浩螺。
很多的人仍然認(rèn)為在屏幕上的排版的問(wèn)題，＂襯線或無(wú)襯線＂這個(gè)問(wèn)題本身解答了它自己仍侥。事實(shí)上要出，沒(méi)那么簡(jiǎn)單。有別于一般的理念农渊，如果你選擇大于12號(hào)的字體患蹂，有襯線和無(wú)襯線字體可以表現(xiàn)得一樣好。小于12號(hào)的有襯線字體渲染得不夠銳利砸紊，但是（同時(shí)传于，這點(diǎn)帶領(lǐng)我們進(jìn)入第二點(diǎn)）在現(xiàn)代的顯示器上，12號(hào)字體絕對(duì)太小了醉顽。
什么尺寸沼溜？
你的正文字體不是取決于你自己的個(gè)人喜好，它取決于閱讀距離游添。因?yàn)橐话愕钠聊浑x人會(huì)比書(shū)本遠(yuǎn)一點(diǎn)系草，臺(tái)式機(jī)字體的大小要比印刷的大一些。
下面的圖案顯示了唆涝，當(dāng)你的正文字體離你的身體越遠(yuǎn)悄但，需要的字體更大。兩個(gè)黑色的和兩個(gè)紅色的A有一樣的度量尺寸石抡。但是因?yàn)橛疫叺囊桓北荒迷诟h(yuǎn)的位子檐嚣，感受到的尺寸會(huì)更小。右邊紅色的A和左邊黑色的A在感受上一樣的尺寸：
字體離得越遠(yuǎn)啰扛，視覺(jué)上會(huì)顯得越小嚎京。你需要將字體設(shè)置得更大一些，當(dāng)字體閱讀的距離更遠(yuǎn)的時(shí)候隐解。選擇多大的字體是一個(gè)科學(xué)性的問(wèn)題鞍帝。如果你沒(méi)有什么經(jīng)驗(yàn)，有用的一個(gè)竅門(mén)是煞茫，將一本印刷很好的書(shū)放在合適的閱讀距離帕涌，然后比照屏幕字體大小摄凡。
平面設(shè)計(jì)師沒(méi)有網(wǎng)頁(yè)設(shè)計(jì)經(jīng)驗(yàn)的時(shí)候，把網(wǎng)頁(yè)正文字體和印刷字體相比的時(shí)候蚓曼，會(huì)驚訝于網(wǎng)頁(yè)正文字體有多么大亲澡。提醒下你，只有你在一排一排地作比較的時(shí)候會(huì)覺(jué)得字體很大纫版，然而通過(guò)透視觀察就不會(huì)這樣覺(jué)得了床绪。
如果在增加了正文字體大小之后，新的字體在一開(kāi)始刺激了你其弊，不要擔(dān)心這很正常癞己。然而，當(dāng)你習(xí)慣了它梭伐，你不會(huì)想要回到＂標(biāo)準(zhǔn)＂的小尺寸痹雅。
從2006年開(kāi)始我們已經(jīng)推薦了＂透視化比例＂字體尺寸。最初糊识，我們聲明Georgia 16號(hào)字體是一個(gè)很好的正文尺寸參照练慕，這個(gè)引起了很多的憤怒甚至一些嘲笑，但是現(xiàn)在這或多或少是一個(gè)普遍的標(biāo)準(zhǔn)技掏。隨著更高級(jí)的解決方案出現(xiàn)铃将，這個(gè)標(biāo)準(zhǔn)慢慢地變得老式了。
行高和對(duì)比
正文字體尺寸可以通過(guò)那個(gè)透視竅門(mén)來(lái)評(píng)估哑梳，而行高需要一些調(diào)整劲阎。隨著更遠(yuǎn)的閱讀距離和更多的像素污點(diǎn)，給屏幕上的文字比印刷的更大一點(diǎn)的行高是比較聰明的方式鸠真。140%是一個(gè)好的參照悯仙，但是當(dāng)然，這個(gè)需要根據(jù)你選擇的字體來(lái)定吠卷。
今天锡垄，作為一個(gè)前提是你要確定對(duì)比不會(huì)太弱（比如灰色的文字在淺灰色的底上）或者太刺眼（比如粉紅之于綠色）。自從屏幕字體的設(shè)計(jì)是黑色之于白色祭隔，用黑色的背景有點(diǎn)困難货岭，但是這些做得好也會(huì)很不錯(cuò)。隨著現(xiàn)代高對(duì)比的屏幕疾渴，選擇黑灰字體或者淺灰的背景都是可取的千贯，而不是深黑之于白色。但是搞坝，依然搔谴，這不是重要的問(wèn)題。
iPhone vs iPad
很多我們學(xué)習(xí)到的關(guān)于響應(yīng)式排版的知識(shí)都是從給我們的書(shū)寫(xiě)軟件尋找完美的字體中來(lái)的桩撮。當(dāng)我們?cè)O(shè)計(jì)IA WRITER的時(shí)候我們花了幾個(gè)星期去尋找正確的排版解決方案敦第。在當(dāng)時(shí)峰弹，高分辨率的ipad屏幕是一個(gè)全新的挑戰(zhàn)，它也花了我們很長(zhǎng)時(shí)間直到我們找到它的運(yùn)作方式芜果。當(dāng)蘋(píng)果提出iphone的retina屏幕以及之后的ipad的retina屏鞠呈，所有東西都改變了。我們完全可以寫(xiě)一本書(shū)解釋我們是如何得出IA WRITER中“令人諷刺”的字體师幕，但是這些非常一般的事情有太多東西要說(shuō)粟按，所以我長(zhǎng)話短說(shuō)诬滩。
如果你對(duì)比我們最新版本的iphone軟件和ipad軟件霹粥，你會(huì)發(fā)現(xiàn)字體的尺寸是不一樣的。
為什么用不同的字體尺寸在iphone和ipad上疼鸟？如果你很認(rèn)真地看了上面的解釋?zhuān)憔蛻?yīng)該已經(jīng)猜到了后控。
當(dāng)人和屏幕的距離不是經(jīng)常一樣的時(shí)候，通常來(lái)說(shuō)空镜，你手持ipad在早餐桌上浩淘，當(dāng)你坐在沙發(fā)上的時(shí)候在你的大腿上，或者當(dāng)你躺在床上吴攒，屏幕就在你面前张抄，這些場(chǎng)景會(huì)有各種不同的使用距離。這是一個(gè)全新的挑戰(zhàn)洼怔，因?yàn)榕_(tái)式機(jī)和筆記本的使用距離不會(huì)發(fā)生這么多變化署惯。為了讓它在各種距離中都好用我們選擇了最遠(yuǎn)的來(lái)確定字體尺寸。這個(gè)可能會(huì)得出比床上使用的字體更大的字體镣隶，但是极谊，這時(shí)不舒服的，同時(shí)安岂，你一般不會(huì)在躺著的時(shí)候?qū)pad放在肚子上面寫(xiě)文章轻猖。
iphone上面只有更少的屏幕空間，所以你需要集中來(lái)做調(diào)整域那。幸運(yùn)的是咙边，iphone會(huì)被放在面前很近的距離來(lái)操作，所以要用很小的文字尺寸來(lái)完美運(yùn)行次员。從平均閱讀距離中可得到iphone和ipad的一個(gè)相似的字體尺寸样眠。
因?yàn)閕phone會(huì)被放得離眼睛很近，行高也可以緊一點(diǎn)翠肘，同樣也是因?yàn)槠聊恍《@得很有必要:
當(dāng)你為屏幕而設(shè)計(jì)的時(shí)候不是所有東西都是隨你愿的檐束。交互設(shè)計(jì)是工程性的：這不是尋找完美的設(shè)計(jì)，者是在尋找完美的妥協(xié)束倍。在我們的例子中被丧，我們必須去減少行高盟戏、行間距、字間距等等
這些調(diào)整是如此精細(xì)以致于你不知道甥桂，你不會(huì)發(fā)現(xiàn)行距有多小柿究。為什么我們不直接拿掉行距？行距不是美學(xué)上的事情黄选，它讓文字呼吸以及幫助我們的眼睛從一行跳到另一行蝇摸。如果你覺(jué)得這些都聽(tīng)起來(lái)很難理解：不，到現(xiàn)在為止我們只涉及到了初級(jí)的東西办陷。
那臺(tái)式機(jī)如何貌夕？
一些人抱怨mac上面的WRITER字體太大。和ipad一樣（ipad會(huì)被放在各種不同的距離使用）民镜，我們要尋找適合mac屏幕的最適中的字體尺寸啡专。當(dāng)時(shí)，我們的參照是24英寸的高分辨率imac制圈，得到的字體尺寸或多或少適合其他所有設(shè)備们童。
因?yàn)檫\(yùn)行IA WRITER 的MAC電腦數(shù)量是有限的，我們可以決定不同的適合的解決方案鲸鹦。我們查看了各種可能的布局以確保這個(gè)文字尺寸是各種設(shè)備上一個(gè)最好的折中慧库。
你可能問(wèn)＂為什么不讓用戶(hù)自己選擇字體大小馋嗜？＂然而齐板，調(diào)整字體尺寸不是一個(gè)關(guān)于興趣的問(wèn)題，是一個(gè)閱讀距離的問(wèn)題嵌戈。自從大多數(shù)的網(wǎng)站和應(yīng)用會(huì)有一個(gè)極其小的字體尺寸覆积，新的用戶(hù)會(huì)從一開(kāi)始就選擇他們習(xí)慣的尺寸，會(huì)有這種結(jié)果：字體太小熟呛，無(wú)法體驗(yàn)我們寫(xiě)作軟件的所有快感宽档。主要原因不是我們想把一些想法強(qiáng)加在所有用戶(hù)上：我們想要的是，IA WRITER 不需要任何設(shè)置和摸索庵朝，你唯一要做的就是書(shū)寫(xiě)吗冤。這個(gè)已經(jīng)是IA WRITER成功的公開(kāi)的秘密了，改變這個(gè)將改變軟件的核心九府。（我們要加強(qiáng)的是弱視人群同樣易得到的一致性設(shè)計(jì)椎瘟。）
那么好，為什么不根據(jù)設(shè)備的分辨率自動(dòng)調(diào)整呢侄旬？那不是真正的響應(yīng)式排版嗎肺蔚？對(duì)的，我們正在作和這個(gè)概念相似的工作±芨幔現(xiàn)在宣羊，通過(guò)分辨調(diào)整璧诵，你同樣需要選擇視覺(jué)上合適的權(quán)重來(lái)確保字體在各種尺寸和分辨率下顯示預(yù)期的效果。字體的視覺(jué)同時(shí)也是隨著字體尺寸和分辨率變化仇冯。這就是為什么MAC之宿、IPAD1/2、IPAD上面的IA WRITER用不同的分級(jí)顯示苛坚。想要清楚的解釋“分級(jí)數(shù)字字體”后面的邏輯性和我們網(wǎng)站背后的想法比被，我需要更多的時(shí)間和空間，所以泼舱，請(qǐng)等待PART II
到目前位置的反應(yīng)
雖然沒(méi)有社交媒體按鈕等缀，但是這篇文章還是得到了很多的轉(zhuǎn)載，很少的批評(píng)的點(diǎn)柠掂，主要圍繞流體層級(jí)和自適應(yīng)層級(jí)的問(wèn)題项滑，對(duì)于這個(gè)問(wèn)題依沮，我想將它放在后面說(shuō)涯贞。我表示吃驚，當(dāng)我聽(tīng)到Joshua Porter這樣評(píng)論：
@IA 直到我看到“交互設(shè)計(jì)是工程性的”的時(shí)候危喉，我比較困惑宋渔。這是如何運(yùn)作的呢？
.就如很多其他人想知道的辜限，全部的引用是：“當(dāng)你為屏幕設(shè)計(jì)的時(shí)候皇拣，不是所有的東西都是按你預(yù)期的運(yùn)作。交互設(shè)計(jì)是工程性的：這不是關(guān)于尋找完美的設(shè)計(jì)薄嫡，這是在尋找完美的妥協(xié)氧急。”通常我會(huì)說(shuō)毫深，“網(wǎng)頁(yè)設(shè)計(jì)是工程性的：這不是關(guān)于尋找完美吩坝，是尋找最好的妥協(xié)⊙颇瑁”用“網(wǎng)頁(yè)設(shè)計(jì)”的話這句話會(huì)表達(dá)清晰一點(diǎn)钉寝，因?yàn)檫@個(gè)設(shè)計(jì)很多明顯的技術(shù)暗示。我之所以用“交互設(shè)計(jì)”是因?yàn)檫@些例子中我用了app闸迷。
這個(gè)的意思是當(dāng)平面設(shè)計(jì)需要以及允許你有很大程度的視覺(jué)控制嵌纲，而網(wǎng)頁(yè)設(shè)計(jì)需要你從一開(kāi)始去思考關(guān)于視覺(jué)設(shè)計(jì)和技術(shù)的相互妥協(xié)為了得到完美的結(jié)果，你需要去探索很多不同的分辨率腥沽，通過(guò)每個(gè)自身的利弊在所有次優(yōu)的選擇中尋找最好的折中逮走。
在這一點(diǎn)上，平面設(shè)計(jì)師經(jīng)常會(huì)打斷你說(shuō)話今阳，同時(shí)嘗試證明他們也處理很多技術(shù)上的問(wèn)題师溅。當(dāng)然邓嘹，他們是做了。所有的藝術(shù)和設(shè)計(jì)需要技術(shù)上的知識(shí)险胰。但是就像設(shè)計(jì)汽車(chē)引擎和設(shè)計(jì)網(wǎng)站有個(gè)不同點(diǎn)汹押，設(shè)計(jì)網(wǎng)站和雜志和設(shè)計(jì)網(wǎng)站也有不同點(diǎn)。這個(gè)不同點(diǎn)和工程性的程度有關(guān)起便。
總結(jié)來(lái)說(shuō)棚贾，這意味著在設(shè)計(jì)網(wǎng)站和app的過(guò)程中，很多我們想的東西都是關(guān)于折中和嘗試尋找沒(méi)有太多缺點(diǎn)的解決方案榆综。這讓很多平面設(shè)計(jì)師選擇不干了妙痹，因?yàn)樗麄兞?xí)慣于有控制權(quán)。Khoi Vinh有更多精彩的演講關(guān)于屏幕和平面設(shè)計(jì)中的不同點(diǎn)鼻疮。
