Herb Lubalin 啟發設計決策：排版可以像插圖和攝影一樣令人興奮

雖然正確使用字體有助於人們閱讀，但出色的排版可以做得更多。 排版可以雄辯地表達一個想法，並以與任何插圖或照片一樣強大的方式傳達信息。

我是一個熱愛電影的人，就像我欣賞排版一樣。 沒有什麼比看到電影海報排版更能激發我的靈感了，它既能喚起電影的氛圍，又能增加故事的講述。

最近，昆汀·塔倫蒂諾電影海報中的排版完美地反映了他電影的氛圍和性格。 在《低俗小說》中，標題的 Aachen Bold 字體與電影本身一樣硬朗。 對於好萊塢往事，雖然標誌性標誌的排版與電影其他部分一樣偏離現實，但海報卻讓人聯想到好萊塢的精神。

Saul Bass 可能是他那個時代最著名的平面設計師，在 1950 年代和 60 年代的好萊塢，他創作的電影海報與標誌本身一樣具有辨識度。 在 1958 年為希區柯克的《眩暈》設計的海報中，巴斯使用了讓人想起 1920 年代德國表現主義電影的手工排版。 1960 年，巴斯為 Pyscho （同樣是 Alfred Hitchcock）的大幅標題排版既聰明又明顯。 雖然索爾巴斯經常被錯誤地認為設計了我最喜歡的《西區故事》電影海報之一——巴斯確實設計了標題序列——但海報實際上是由約瑟夫卡洛夫設計的，他還創造了詹姆斯邦德著名的 007 標誌。

儘管我們對網絡排版的控制還不如印刷版，但新的文件格式、字體交付服務和網絡字體意味著比十年前更大的排版靈活性。 CSS 中的排版控件也幫助我們在字體方面更有創意。 在基本字體樣式屬性之上，我們現在可以可靠地微調 OpenType 圖形、連字符、連字，甚至字距調整。

很少能在網上找到這種創造性的字體用途，研究平面設計師和才華橫溢的排版師的作品可以讓我們大開眼界，看看我們使用當今的字體技術可以實現什麼。 我個人最喜歡的設計師和排版師之一是 Herb Lubalin，了解他和他的作品改變了我自己的排版方法。

靈感來自草本盧巴林

Herb Lubalin 是一位美國平面設計師，他的職業生涯包括設計廣告、海報甚至郵票等各種東西。 他對文字的外觀以及排版設計如何使它們聽起來很著迷。 Lubalin 了解如何通過結合藝術、複製和排版，平面設計師在傳達信息時增加信念。 他說：

“人們溝通得越好，對更好的排版表達排版的需求就越大。”

— 草藥盧巴林

Herbert (Herb) Lubalin 勉強通過紐約庫珀聯盟藝術學校的入學考試後，因要求每週加薪 2 美元而被解雇了他作為圖形藝術家的第一份工作。 在戰前的美國廣告公司中，佈局藝術家的工作只是將標題、文案和圖像放入可用空間，但二戰後隨著歐洲移民設計師的湧入，情況發生了變化。 他們包括奧地利人 Herbert Bayer、俄羅斯人 Mehemed Fehmy Agha 和白俄羅斯人 Alexey Brodovitch。

這些設計師引入了新的流程，將藝術總監、佈局藝術家和作家聚集在一起，形成了由著名廣告創意總監比爾伯恩巴赫在 1960 和 1970 年代流行的創意團隊。

1945 年，盧巴林成為 Sudler & Hennessey（一家專門從事製藥行業的創意工作室）的藝術總監，在那裡他領導了一個由設計師、插畫家和攝影師組成的團隊。 Lubalin 首先在 Sudler & Hennessey 以及從 1964 年在他自己的工作室中建立的過程令人著迷。 他通過製作“紙巾”——確定元素空間排列的鋼筆和墨水草圖——以及包括字體選擇、尺寸和重量在內的排版設計的詳細說明來推動設計過程。

在任何新項目開始時，盧巴林都會先在薄紙上草擬標題、副本和圖像的安排。 然後，他會在上面放另一張紙來完善他的想法，然後再貼一張，再貼一張，以快速發展他的設計。 在他的助手從地板或垃圾中回收廢棄的紙巾後，它們成為了收藏家的物品。

Lubalin 是一個對排版痴迷的完美主義者。 對於“Let's talk type”——Sudler & Hennessey 的商業廣告——Lubalin 恰好放置了唯一的段落。 該副本完美地位於“let”一詞旁邊的基線上，其大小和前導允許上面字母“y”的下降。

盧巴林對海報中的文字位置同樣精確，該海報宣布了前衛反戰海報競賽。 他經常用手術刀來打字，調整字母之間的間距，並改變上升和下降的高度以適應他的設計。 “No More War”標題中的字母大小精確對齊。 大寫藍色支架的跟踪首先創建了一個完全適合其空間的副本塊。

在《七月四日野餐》中，盧巴林用透視來代表前方的路。 這意味著要考慮對每一行文本的跟踪，有時會更改單詞以適應設計。 使用 Lubalin 的設計並不容易，正如他的一位助手後來描述的那樣：

“為了讓所有內容都對齊，你必須一遍又一遍地做，然後，如果客戶改變了文本，你就必須重做整個事情。 對他（盧巴林）來說，這是值得的。 花費多長時間或花費多少對他來說並不像對其他設計師那樣重要。”

由於他不懈的信念和才華，盧巴林繼續成為二十世紀最著名的平面設計師和印刷師之一。 我們可以從他如何處理他的工作以及他對設計可以令人信服地交流的信念中學到很多東西。

有兩本關於 Herb Lubalin 和他的作品的書，您應該將其添加到您的收藏中。 Gertrude Snyder 和 Alan Peckolick 的“Herb Lubalin：藝術總監、平面設計師和印刷師”（1985 年）已絕版，但在 eBay 上有很好的副本。 更好的是“Herb Lubalin：美國平面設計師”（2013 年），作者是 Adrian Shaughnessy，由 Unit Editions 出版。 2000 年限量版，肖內西的書收錄了數百個盧巴林作品的例子。

預格式化標題

頭條新聞是開始更冒險的類型的理想場所。 富有表現力的排版不需要花哨的字體。 您可以使用許多日常字體系列中的不同樣式和粗細來創建引人注目的標題。 尋找像蒙特塞拉特這樣的大家庭——由 Julieta Ulanovsky 設計，可在谷歌字體上找到——它的重量範圍從輕薄到超粗，甚至是黑色。

對於第一個受 Herb Lubalin 啟發的設計，我的標題使用了這種無襯線字體的黑色和輕量級。 負向跟踪（字母間距）和緊前導（行高）結合起來創建一個需要注意的類型塊。

過去，像這樣開發標題需要通過在單個單詞之間添加中斷來將設計硬編碼到 HTML 中，如下所示：

 <h1><strong>UK's <br> best-<br> selling <br> car</strong> <br> during <br> the <br> 1970s</h1>

其他時候，您可以使用內聯 span 元素包裝每個單詞，然後將其 display 屬性更改為 block：

 <h1><strong><span>UK's</span> <span>best-</span> <span>selling</span> <span>car</span></strong> <span>during</span> <span>the</span> <span>1970s</span></h1>

我在 HTML 中添加了明確的換行符，而不是這些表現元素：

 <h1><strong>UK's best- selling car</strong> during the 1970s</h1>

瀏覽器只會忽略單詞之間的一個空格，所以在小視口上，這個標題讀起來就像一個句子。 我只需要設置顏色、大小和重量的基礎樣式，以及使這個標題與眾不同的負跟踪和緊領先：

 h1 { font-size: 6vmax; font-weight: 300; line-height: .75; letter-spacing: -.05em; text-transform: uppercase; color: #fff; } h1 strong { font-weight: 600; color: #bd1f3a; }

儘管 HTML 的 pre 元素尊重預先格式化的文本並完全按照文檔中的內容呈現它，但 CSS white-space 屬性可以在不犧牲語義的情況下實現類似的結果。 在六個可用的空白值中，這是我最常使用的四個：

1. white-space: normal;
   文本根據需要填充行框和中斷
2. white-space: nowrap;
   文本不會換行，並且可能會溢出其容器
3. white-space: pre;
   明確的換行符被尊重，文本換行符和 br 元素
4. white-space: pre-wrap;
   尊重空白，但文本也會換行以填充行框

我只需要white-space屬性對較大視口的影響，因此我使用媒體查詢將其隔離：

 @media (min-width: 64em) { h1 { white-space: pre; } }

使用一個字體系列中的幾種樣式可以增加視覺趣味。 我的 Lubalin 風格設計融合了淺色、粗體和黑色的粗細，加上這種無襯線字體的簡潔和規則樣式，可產生各種文本處理。

首先，我需要兩個結構元素來完成我的設計，主要的和輔助的：

 <main>…</main> <aside>…</aside>

雖然主要元素包括我的標題和運行文本，但旁邊包含四張圖片和五篇關於經典 Cortina 版本的文章：

 <aside> <div> <img src="img-1.svg" alt="Ford Cortina Mark 1 front profile"> <img src="img-2.svg" alt="Ford Cortina Mark 3 rear"> <img src="img-3.svg" alt="Ford Cortina Mark 4 front"> <img src="img-4.svg" alt="Ford Cortina Mark 5 rear profile"> </div> <article>…</article> <article>…</article> <article>…</article> <article>…</article> <article>…</article> </aside>

首先，我在每篇文章中使用偽類選擇器指定段落的樣式。 每個段落使用不同的字體樣式和粗細組合，混合大小寫字母：

 article:nth-of-type(1) p { font-family: 'light'; text-transform: uppercase; } article:nth-of-type(2) p { font-family: 'bold-condensed'; font-weight: 600; text-transform: uppercase; } article:nth-of-type(3) p { font-family: 'bold-condensed'; font-weight: 600; } article:nth-of-type(4) p { font-family: 'light'; text-transform: uppercase; } article:nth-of-type(5) p { font-family: 'bold-condensed'; font-weight: 600; }

為每個屏幕尺寸都設置了這些基礎樣式後，我將佈局引入到將在中型屏幕上可見的 side 元素中。 對於像這樣元素不重疊的佈局，為了簡單起見，我經常使用網格模板區域。 這個設計有九個網格區域。 雖然我可以為這些區域命名來描述我將放​​入其中的內容——例如，“mark-1”——但我使用字母來使在我的網格中移動項目更容易一些：

 @media (min-width: 48em) { aside { display: grid; grid-template-areas: "abc" "def" "ghi"; grid-gap: 1.5rem; } }

我需要將四個圖像放入我的模板區域，而不是包含它們的分區。 我將該元素的 display 屬性更改為 contents，這有效地將其從 DOM 中刪除以進行樣式設置：

 aside div { display: contents; }

我使用區域名稱放置這些圖像。 將它們移動到另一個區域只涉及引用不同的區域名稱，並且不會更改它們在我的 HTML 中的順序：

 aside img:nth-of-type(1) { grid-area: a; } aside img:nth-of-type(2) { grid-area: e; } aside img:nth-of-type(3) { grid-area: g; } aside img:nth-of-type(4) { grid-area: i; }

然後，我將文章放入其餘五個區域以完成我的佈局：

 aside article:nth-of-type(1) { grid-area: b; } aside article:nth-of-type(2) { grid-area: c; } aside article:nth-of-type(3) { grid-area: d; } aside article:nth-of-type(4) { grid-area: f; } aside article:nth-of-type(5) { grid-area: h; }

在中小型屏幕上，主要元素和旁白元素按照它們在我的 HTML 中出現的順序垂直堆疊。 較大視口中可用的額外空間允許我將它們並排放置，以便在屏幕兩側平衡視覺重量。 首先，我將五列對稱網格應用於 body 元素：

 @media (min-width: 64em) { body { display: grid; grid-template-columns: repeat(5, 1fr); } }

然後，我使用行號放置主要元素和輔助元素。 這創建了一個不對稱的設計，在我的主要內容和支持它的文章之間有一列空白：

 main { grid-column: 1; } aside { grid-column: 3 / -1; } }

重新排序和旋轉

CSS Grid 現在是用於實現靈感佈局的最佳工具，其強大的屬性對於開發複雜的排版設計也很有用。

我的標題包含一個標題，後跟兩個段落，它們在 HTML 中的順序意味著在沒有應用任何樣式的情況下閱讀它們是有意義的：

 <header> <h1>Cortina</h1> <p>UK's best-selling car</p> <p>From <span>1962–1983</span></p> </header>

為了開始這個設計，我為這兩個元素添加了基礎樣式，設置它們的對齊方式、顏色和大小：

 header h1, header p { margin: 0; text-align: center; } header h1 { font-size: 10vmax; color: #ebc76a; line-height: 1; } header p { font-size: 4vmax; line-height: 1.1; text-transform: uppercase; }

我訂購了我的 HTML 用於語義句子結構，而不是任何視覺呈現，所以為了讓我能夠在視覺上重新排列元素，我將 Flexbox 屬性添加到我的標題和列的 flex-direction 值：

 header { display: flex; flex-direction: column; }

默認情況下，元素按照它們在 HTML 中出現的順序出現，但在我的設計中，此標題中的最後一段首先出現在標題上方。

所有元素的默認順序值是 0，因此為了在不更改 HTML 的情況下更改此段落的位置，我添加了一個負值 -1，將其置於頂部：

 header p:last-of-type { order: -1; }

我的中型屏幕設計包括兩個大的背景顏色帶，使用 CSS 漸變開發。 所以接下來，我更改標題和段落的前景色，以將它們與這個新背景進行對比：

 @media (min-width: 48em) { body { background-image: linear-gradient(to right, #0a0a08 0%, #0a0a08 50%, #fff 50%, #fff 100%); } header h1 { color: #fff; } header p { color: #ebc76a; } }

通過將 CSS Grid 與 Flexbox 結合使用，可以實現此標題中三個元素的不同尋常的對齊方式。 雖然一開始可能並不明顯，但我將這個標題中的標題和段落放在了一個四列對稱的網格上。 將第一行和最後一行中的一列留空會創建一個動態對角線，從而增加對該標題的興趣：

 @media (min-width: 64em) { header { display: grid; grid-template-columns: repeat(4, 1fr); align-items: start; padding-top: 0; } }

我的標題分佈在所有四列：

 header h1 { grid-column: 1 / -1; }

而第一個——出現在我的標題底部——將第一列留空：

 header p:first-of-type { grid-column: 2 / -1; }

最後一段——現在位於標題的頂部——跨越了前三列，在左邊留了一個空格：

 header p:last-of-type { grid-column: 1 / 4; }

在網絡上看到旋轉的文本元素是不尋常的，但當你這樣做時，它們通常會令人難忘，而且總是令人驚喜。 我希望我的標題逆時針旋轉，所以我添加了一個變換，將其負旋轉 30 度，並將其垂直向下移動 150 像素：

 header { transform: rotate(-30deg) translateY(150px); transform-origin: 0 100%; }

transform-origin指定發生變換的點。 您可以選擇中心的原點或元素的四個角中的任何一個 - top-left (0 0) 、 top-right (100% 0) 、 bottom-right (100% 100%)或bottom-left (0 100%) 。 您還可以以像素、em 或 rem 為單位指定原點。

為了額外的驚喜，我在該變換中添加了一個微妙的過渡，並在有人將光標移到我的標題上時減少了旋轉量：

 header { transition: transform .5s ease-in; } header:hover { transform: rotate(-25deg) translateY(150px); }

組合標題元素

在我下一個受 Lubalin 啟發的設計中，我將 Cortina 模型的有序列表與多色標題結合起來，用這個標題做出強有力的聲明：

 <header> <div> <h1>…</h1> <ol>…</ol> </div> </header>

此標題包括三行文字。 雖然我之前避免使用其他元素，但要對這些線條進行不同的樣式設置，我需要三個內聯 span 元素：

 <h1> <span>Best</span> <span>Selling</span> <span>Cortina</span> </h1>

標記我的 Cortina 模型列表及其製造年份的最語義選擇是有序列表。 為了強調每個模型名稱，我將它們包含在強大的元素中，這些元素提供語義價值以及默認瀏覽器樣式的粗體外觀：

 <ol> <li><strong>Mark I</strong> 1962–1966</li> <li><strong>Mark II</strong> 1966–1970</li> <li><strong>Mark III</strong> 1970–1976</li> <li><strong>Mark IV</strong> 1976–1979</li> <li><strong>Mark V</strong> 1979–1983</li> </ol>

對於小視口，我只需要幾個基礎樣式。 大字體和最小的前導創建了一個堅實的文本塊。 然後，我將 span 元素的顯示值從 inline 更改為 block，並使用偽類選擇器來更改第一行和第三行的前景色：

 h1 { font-size: 18vmin; line-height: .9; color: #fff; } h1 span { display: block; } h1 span:nth-of-type(1) { color: #ba0e37; } h1 span:nth-of-type(3) { color: #31609e; }

我希望我的有序列表中的項目形成一個兩列對稱網格，其中每列佔用相等數量的可用空間：

 ol { list-style-type: none; display: grid; grid-template-columns: 1fr 1fr; }

然後，我收緊項目的前導，並在除最後一個列表項之外的所有項目的底部添加一個純藍色邊框：

 li { display: inline-block; line-height: 1.2; } li:not(:last-of-type) { border-bottom: 1px solid #31609e; }

方便的是，不需要為每個列表項指定列號或行號，因為 CSS Grid 會自動排列它們，因為正常流程。 為了更加強調，我將強元素的顯示值更改為塊並將它們設置為大寫：

 li strong { display: block; font-size: 1.266rem; font-weight: 600; text-transform: uppercase; }

將元素水平和垂直居中曾經很棘手，但幸運的是，Flexbox 使這種對齊方式實現起來很簡單。 Flexbox 有兩個軸——主軸和交叉軸——如果你改變一行的默認 flex-direction 值，它們會改變方向。

我的標題的 flex-direction 仍然是行，所以我在交叉軸（垂直）上對齊項目中心，然後沿著主軸對齊內容中心（水平:)

 @media (min-width: 48em) { header { display: flex; align-items: center; justify-content: center; } }

現在在標題中輸入內容後，我應用了一個包含三列和兩行的網格。 它們的尺寸將由它們的內容定義並自動調整大小：

 header > div { display: grid; grid-template-columns: repeat(3, min-content); grid-template-rows: auto auto; }

標題中的三個多色線條是此標題設計的基礎。 我想把它們放到這個網格中的特定列和行中，所以我添加了display: contents; 到標題：

 h1 { display: contents; }

然後，我使用行號將多色文本放入列和行中：

 h1 span:nth-of-type(1) { grid-column: 1; grid-row: 2; } h1 span:nth-of-type(2) { grid-column: 2; grid-row: 1 / 3; } h1 span:nth-of-type(3) { grid-column: 3; grid-row: 1 / 3; }

我希望標題中的文本顯示為垂直，因此我將每個跨度順時針旋轉 180 度，然後將它們的書寫模式更改為左右垂直：

 h1 span { transform: rotate(180deg); writing-mode: vertical-lr; }

我設計中的標題和有序列表形成了一個實心塊。 為了將這些元素緊密地打包在一起，我將列表的顯示屬性從網格更改為塊。 然後，我將每個列表項中的內容向右對齊，因此它們位於我的標題的基線上：

 ol { display: block; } li { text-align: right; }

SVG 和文本

我花了很長時間來欣賞 SVG 並熟悉如何從中獲得最大價值，而且我仍在學習。 SVG 能夠生成的不僅僅是基本形狀，其最令人興奮的功能之一是文本元素。

與 HTML 文本一樣，SVG 文本是可訪問和可選擇的。 它還可以通過使用剪切路徑、包括漸變、過濾器、蒙版和筆觸在內的填充來無限地設置樣式。 將文本添加到 SVG 就像將其包含在 HTML 中一樣，使用 text 元素。 瀏覽器僅呈現這些文本元素內的內容，而忽略它們之外的任何內容。 您可以根據需要添加任意數量的文本元素，但我的下一個標題只需要一個：

 <svg> <text>'70's best-selling Cortina British car</text> </svg>

SVG 包括一組可應用於文本的屬性和屬性值。 許多 SVG 屬性——比如字母和單詞間距，以及文本裝飾——也在 CSS 中。 但它是 SVG 獨有的樣式功能，有助於使 SVG 文本如此吸引人。

例如， textLength設置渲染文本的寬度，它會根據您選擇的 lengthAdjust 值收縮和拉伸以填充空間。

• textLength
  文本將被縮放以適應。 以百分比設置 textLength 或使用任何數值。 我更喜歡使用基於文本的單位，em 或 rem。
• lengthAdjust
  定義如何壓縮或拉伸文本以適應 textLength 屬性中定義的寬度。

當直接在文本元素上使用時，SVG 屬性的作用與內聯樣式相同：

 <svg> <text textLength="400">'70's best-selling Cortina British car</text> </svg>

但就像內聯樣式一樣，最好的價值是通過使用 CSS 設置 SVG 元素的樣式來實現的，無論是在外部樣式表中還是嵌入在 HTML 中。 您甚至可以在外部 SVG 文件中使用樣式元素，或者在 HTML 中包含的 SVG 塊：

 <svg> <text class="display">'70's best-selling Cortina British car</text> </svg> <style> .display { font-size: 100px; font-family: 'black-extended'; font-weight: 600; letter-spacing: -1px; text-anchor: middle; text-transform: uppercase; } </style>

HTML 有它的 span 元素，而 SVG 包含一個類似的元素，該元素可用於將文本分成更小的元素，以便它們可以具有獨特的樣式。 對於這個標題，我將 text 元素的內容分為六個tspan元素：

 <text> <tspan>'70's</tspan> <tspan>best-</tspan> <tspan>selling</tspan> <tspan>Cortina</tspan> <tspan>British</tspan> <tspan>car</tspan> </text>

通過將我的標題拆分為多個元素，我可以設置每個單詞的樣式。 我什至可以根據基線甚至相對於彼此在我的 SVG 中精確定位它們。

• x是文本基線的水平起點；
• y是文本基線的垂直起點；
• dx從前一個元素水平移動文本；
• dy從較早的元素垂直移動文本。

對於我的標題，我將第一個 tspan 元素放置在距頂部 80px 處，然後每個後續元素出現在其下方 80px 處：

 <text> <tspan y="80">'70's</tspan> <tspan dy="80">best-</tspan> <tspan dy="80">selling</tspan> <tspan dy="80">Cortina</tspan> <tspan dy="80">British</tspan> <tspan dy="80">car</tspan> </text>

tspan元素對於精確定位和個性化樣式很有用，但它們並非沒有可訪問性問題。 輔助技術將 tspan 元素發音為單個單詞，甚至在tspan包含單個字母時拼寫它們。 例如，屏幕閱讀器會讀出這一系列tspan元素：

 <tspan>C</tspan> <tspan>o</tspan> <tspan>r</tspan> <tspan>t</tspan> <tspan>i</tspan> <tspan>n</tspan> <tspan>a</tspan>

作為：

“C”、“o”、“r”、“t”、“i”、“n”、“a”

我們不應該給使用輔助技術的人帶來不便，或者更糟的是，我們不應該因為我們的樣式選擇而使我們的內容無法訪問。 所以避免使用tspan不必要的，永遠不要使用單個字母。

使用 CSS 和 SVG 描邊文本

當文本放置在背景圖像前面時，添加筆觸通常有助於易讀性，並且還可以產生微妙而引人注目的結果。 在任何 CSS 規範中，您都不會找到一種正式的方式來描邊文本。 但是有一個使用 Webkit 供應商前綴的實驗性屬性，並被當代瀏覽器廣泛支持。

text-stroke是兩個屬性的簡寫： text-stroke-color和text-stroke-width 。 對於我的描邊標題，我首先為family 、 size和weight設置基礎排版樣式，然後調整前導和跟踪：

 h1 { font-size: 100px; font-family: 'black-extended'; font-weight: 600; letter-spacing: -6px; line-height: .8; color: #fff; }

然後我應用text-stroke並添加text-fill-color property ，其值為transparent覆蓋白色前景色：

 h1 { /* -webkit-text-stroke-color: #fff; */ /* -webkit-text-stroke-width: 5px; */ -webkit-text-stroke: 5px #fff; -webkit-text-fill-color: transparent; }

儘管text-stroke是一個實驗性屬性，並且不在 W3C 規範中，但現在瀏覽器已經實現了它，它被刪除的可能性很小。 但是，如果您仍然擔心支持舊版瀏覽器，請考慮使用功能查詢來測試對text-stroke支持並為它們提供適當的回退。

SVG 也有stroke屬性，還有一些 CSS 中沒有的選項。 如果您需要更多選項和最廣泛的瀏覽器支持，SVG 就是答案。 我的 SVG 標頭包含六個tspan元素：

 <svg> <text> <tspan>'70's</tspan> <tspan>best-</tspan> <tspan>selling</tspan> <tspan>Cortina</tspan> <tspan>British</tspan> <tspan>car</tspan> </text> </svg>

在基礎排版樣式之上，我為text-stroke-color和text-stroke-width添加了等效的 SVG 屬性。 我還降低了筆劃的不透明度，這是 CSS 中不可用的選項：

 text { stroke: #fff; stroke-width: 1.5px; stroke-opacity=".8"; }

SVG 包括微調筆劃方面的其他屬性。 與 CSS 不同，SVG 筆劃可以使用 stroke-dasharray 屬性進行虛線。 替代值定義填充區域和空白區域，因此我的標題文本周圍的破折號是填充一個單位，然後是十個單位空白：

 text { stroke-dasharray: 1, 10; }

如果您需要更複雜的圖案，請在圖案中添加額外的數字，因此 stroke-dasharray 值為 1、10、1 會產生虛線筆劃，即 1（填充）10（空白）1（填充）1（空白，）10（填充，）1（空白，）並重複。

優化 SVG 可訪問性

CSS 排版控件現在比以往任何時候都更強大，但有時設計需要的不僅僅是樣式化的 HTML 文本。 圖像替換技術已經過時，但 SVG——無論是在外部文件中還是在 HTML 中內聯——都可以提供可擴展的文本效果。 如果優化得當並且可以訪問，SVG 對整體性能也很有用。

此標頭包含兩種字體。 一個是 Magehand，印度尼西亞字體設計師 Arief Setyo Wahyudi 的裝飾性複古風格腳本。 另一個是 Mokoko，倫敦 Dalton Maag 的平板襯線，有從細到黑色的七種重量可供選擇。

以 Web 開放字體格式 (WOFF) 和 WOFF2 格式嵌入這兩種字體會為我的頁面增加超過 150kb。 然而，通過在圖形編輯器中將這些字體轉換為輪廓並將標題作為優化的 SVG 圖像提供，只會增加 17kb。

我的標題中的 SVG 圖像包含三個路徑：

 <svg xmlns="https://www.w3.org/2000/svg"> <path>…</path> <path>…</path> <path>…</path> </svg>

這些路徑的順序很重要，因為就像在 HTML 中一樣，元素是按照它們編寫的順序堆疊的。 SVG 包括一組可以應用於任何元素的屬性和屬性值。 我使用 fill 屬性為標題中的每個路徑著色：

 <path fill="#bd1f3a">…</path> <path fill="#31609e">…</path> <path fill="#fff">…</path>

為了獲得更時尚的效果，我可以定義一個帶有兩個色標的線性漸變，並參考它來填充我的裝飾腳本：

 <defs> <linearGradient gradientTransform="rotate(90)"> <stop offset="0%" stop-color="#bd1f3a" /> <stop offset="100%" stop-color="#31609e" /> </linearGradient> </defs> <path fill="#fff">…</path> <path fill="#fff">…</path> <path fill="url('#cortina')">…</path>

SVG 文件通常小於位圖圖像或幾個字體文件的組合大小，但它們仍然需要仔細優化才能獲得最佳性能。

每個元素、句柄和節點都會增加 SVG 文件的大小，因此請盡可能將路徑替換為圓形、橢圓或矩形等基本形狀。 簡化曲線以減少節點數量並使用更少的句柄。 Adobe Illustrator、Affinity Designer 和 Sketch 等流行的圖形軟件導出文件因未優化的元素和不必要的元數據而膨脹。 但是，開發人員 Jake Archibald 開發的 SVGOMG 等工具會去除不需要的項目，並且通常可以大大減少 SVG 文件的大小。

包含文本輪廓的 SVG 圖像也可以通過使用替代文本和 ARIA 屬性來訪問。 鏈接到外部 SVG 文件時，為任何非裝飾性圖像添加替代文本：

 <img src="header.svg" alt="Cortina. '70s best-selling British car">

幫助使用輔助技術的人的最佳方法是將 SVG 嵌入 HTML。 添加 ARIA 角色和描述性標籤，屏幕閱讀器會將 SVG 視為單個元素並大聲朗讀標籤描述：

 <svg role="img" aria-label="Cortina. '70s best-selling British car"> … </svg>

添加標題元素有助於輔助技術了解幾個 SVG 塊之間的區別，但此標題不會顯示在瀏覽器中：

 <svg> <title>Cortina. '70s best-selling british car</title> </svg>

當文檔中有多個 SVG 塊時，為每個塊指定一個唯一的 ID 並將其添加到其標題中：

 <svg> <title>…</title> </svg>

ARIA 有幾個有助於 SVG 可訪問性的屬性。 當 SVG 純粹是裝飾性的並且沒有語義價值時，通過添加aria-hidden屬性將其隱藏在輔助技術之外：

 <svg aria-hidden="true"> … </svg>

對於我的設計，我使用 SVG 代替 HTML 標題。 要替換輔助技術缺少的語義，請使用 ARIA 角色屬性和標題值。 然後添加一個與缺少的 HTML 匹配的 level 屬性：

 <svg role="heading" aria-level="1"> … </svg>

剪裁類型

根據 CSS 框模型，CSS background-clip屬性定義元素的背景是否延伸到其border-box 、 padding-box或content-box下方：

• border-box
  背景延伸到邊框的外邊緣（以及邊框下方）。
• padding-box
  背景僅延伸到填充的外邊緣。
• content-box
  背景僅在內容框內呈現（剪輯到）。

但是，還有一個價值可以為激發排版提供更多機會。 使用 text 作為 background-clip 的值將元素的背景剪輯到它包含的文本所佔據的空間。

In my next example, the brake disk background image is visible only where there's text in the headline. When my headline includes more content or its text size increases, more of that background image will be visible:

 h1 { background-image: url(pattern.svg); background-clip: text; -webkit-background-clip: text; color: transparent; }

You can apply the text value for background-clip to any element except the :root , HTML. As support for background-clip is limited, I use a feature query which delivers those styles only to supporting browsers:

 h1 { color: #fff; } @supports (background-clip: text) or (-webkit-background-clip: text) { h1 { background-color: #fff; background-image: url(pattern.svg); background-position: 50% 100%; background-repeat: no-repeat; background-size: 50%; background-clip: text; -webkit-background-clip: text; color: transparent; } }

Inspired by Lubalin, I want to place images inside the letters of my next headline, and the SVG image element allows me to do just that.

由於這個 SVG 圖像代表一個標題，我添加了替代文本以及一個 ARIA 角色和級別，以確保它仍然可以訪問：

 <img src="header.svg" alt="Cortina" role="heading" aria-level="1">

在 SVG 中，defs 元素存儲可以從文件的其他位置引用的圖形對象。 這些包括包含我的圖像的模式，我為每個字母添加一個：

 <svg> <defs> <pattern>…</pattern> <pattern>…</pattern> <pattern>…</pattern> … </defs> … </svg>

defs 元素中的內容不會直接呈現，為了顯示它，我使用 use 屬性或 url 引用它們。 我的 SVG 為單詞“Cortina”中的七個字母中的每一個都包含一個路徑，並且我使用其唯一 ID 為每個路徑填充一個模式：

 <svg> <defs>…</defs> <path fill="url(#letter-c)">…</path> <path fill="url(#letter-o)">…</path> <path fill="url(#letter-r)">…</path> … </svg>

圖像元素允許在 SVG 中呈現位圖或矢量圖像。 我的設計包含三個汽車零件藍圖圖像，我使用標準 href 屬性鏈接到這些圖像：

 <defs> <pattern width="100%" height="100%"> <image href="pattern-c.png" height="250" width="250"/> </pattern> … </defs>

這三個汽車零件圖案圖像填充了每個字母，其結果是引人注目的標題設計，需要引起注意。

結合技術

毫無疑問，赫伯魯賓擁有高超的打字能力。 對於這個受 Lubin 啟發的最終示例，我將我展示的技術結合在一起，為這款經典的 70 年代福特創造了引人注目的設計。

為了開發這個設計，我需要兩個現在應該非常熟悉的結構元素，一個主要的和一個輔助的：

 <main>…</main> <aside>…</aside>

我的主要元素包含一個帶有 SVG 標題的標題元素，後跟一個包含我正在運行的文本的分區。 我在標題中添加了 ARIA 角色和級別，以確保其 SVG 文本可訪問：

 <main> <header> <svg role="heading" aria-level="1">…</svg> </header> <div>…</div> </main>

要將完整圖像提供給小屏幕並將一半提供給較大的視口，我使用圖片元素和最小寬度媒體查詢：

 <aside> <picture> <source media="(min-width: 74em)"> <img src="full.svg" alt="Ford Cortina"> </picture> </aside>

Lubalin 的設計通常充滿活力，因此為了讓我的主要元素充滿活力，我應用網格屬性並使用三列五行來開發不對稱佈局。

 main { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: repeat(5, 1fr); }

該設計以魅力十足的 Cortina 的輪廓和覆蓋主要元素的基於文本的背景圖像為主。 我縮放此 SVG 以填充元素的背景，並更改 background-origin 使其僅出現在內容的後面，而不是其邊框或填充：

 main { background-image: url(main.svg); background-origin: content-box; background-position: top right; background-repeat: no-repeat; background-size: 100% 100%; }

將我的標題和文本分區周圍的列留空會產生負空間，這有助於將某人的眼睛引向構圖。 標題佔據了我三列中的前兩列，而除法填充了最後兩列：

 header { grid-column: 1 / 3; grid-row: 2 / 3; } main div { grid-column: 2 / 4; grid-row: 3 / 6; }

使用 SVG 文本元素的好處之一是能夠根據其基線或相對於每個元素來定位文本。 我的標題 SVG 包含兩個文本元素作為這輛車的名稱，第三個是它的製造時期。 我想將這個最終的文本元素精確地放置在距離我的 SVG 頂部 250px 和 60px 的位置：

 <svg> <text x="0" y="60">Ford</text> <text x="0" dy="70">Cortina</text> <text x="250" y="60">1962–1983</text> </svg>

當基於文本的 SVG 背景圖像和我的 Cortina 輪廓相互匹配時，這種令人眼花繚亂的設計在更大的視口上變得更加令人難忘。 我將兩列對稱網格應用於 body 元素：

 @media (min-width: 74em) { body { display: grid; grid-template-columns: [main] 1fr [aside] 1fr; } }

然後，我使用行名將主要元素和輔助元素放置到我的網格上：

 main { grid-column: main; } aside { grid-column: aside; } }

在網絡上，鼓舞人心的排版應該是有吸引力和可讀性的，但運行文本的可讀性很容易受到其背後背景的影響。

背景過濾器將 CSS 過濾器效果應用於文本後面的元素。 這些過濾器包括模糊、亮度和對比度，以及顏色效果，這些都可以幫助使正在運行的文本在背景圖像、圖形或圖案上更具可讀性。

使用我在上一期中演示的相同 CSS 過濾器語法應用一個或多個過濾器：

 main { backdrop-filter: brightness(25%); } main { backdrop-filter: brightness(25%) contrast(50%); }

backdrop-filter是濾鏡效果模塊 2 級規範的一部分。 它已經在當代瀏覽器中得到了可靠的支持，儘管有些仍然需要 Webkit 供應商前綴：

 main div { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

閱讀該系列的更多內容

• 啟發設計決策：Avaunt 雜誌
• 受啟發的設計決策：緊迫事項
• 啟發設計決策：歐內斯特雜誌
• 啟發設計決策：Alexey Brodovitch
• 啟發設計決策：Bea Feitler
• 啟發設計決策：Neville Brody
• 啟發設計決策：Otto Storch
• 啟發設計決策：Max Huber
• 啟發設計決策：Giovanni Pintori
• 啟發設計決策：Emmett McBain
• 啟發設計決策：Bradbury Thompson

注意： Smashing 會員Smashing 會員可以訪問設計精美的 Andy 的 Inspired Design Decisions 雜誌的 PDF 以及本文中的完整代碼示例。 您可以直接從 Andy 的網站購買本期的 PDF 和示例以及所有其他問題。