跳過導覽
學習設計

Sketch 中的排版

Sketch 中的排版

文字,就像顏色一樣,表面上看起來很簡單,但深入研究後,就會發現它絕非如此。多年來,我們了解到設計師對文字系統的期望並不總是與 Apple 和其他廠商構建文字排版系統的方式相符。

Sketch 處理文字的方式是我們一直以來想要改進的地方,但隨著您繼續閱讀,您很快就會發現,進行這些更改和改進需要我們深入研究 Apple 的文字渲染系統,並進行一些底層的更改。我們認為最終我們取得了勝利,也希望您會喜歡這個結果。

為了理解我們需要解決的一些問題,讓我們先看看 Sketch 中文字圖層的垂直指標。

單行文字圖層的高度由字體在該文字大小下的行高值決定。此值與文字大小並不對應,並且在不同字體之間差異很大;有時它幾乎與文字大小相同,有時則是文字大小的兩倍。字體在該空間內的繪製位置由基準線(紅色)決定,基準線也由字體指定。

由於兩者在不同字體之間的變化如此之大,當您在不同字體之間切換時,尤其是在同一段落中混合使用多種字體和大小時,Sketch 中的文字圖層可能會發生相當大的變化。另一個不理想的效果是,當您在不同字體之間切換時,畫布上的文字經常會上下移動。

我們支援信箱中經常出現的一個問題是:為什麼 Sketch 會渲染看似空白的區域(以藍色標示),而不是將邊界框修剪到圖層中上伸部和下伸部的邊緣。這些也由字體的指標決定,但簡而言之,某些字元需要這個空間,尤其是包含附加符號的字元。大寫 S 上的抑揚符 (Š,在捷克語和其他斯拉夫語系中出現) 和帶有下加符的小寫 c (ç,最常見於土耳其語和法語) 就是眾多例子中的兩個。

在 Sketch 3.6 中,我們對排版文字圖層的方式進行了一些更改,尤其是針對具有固定行高的段落。要了解它的運作方式以及更改的內容,我們需要了解 Apple 的文字系統、它如何排列文字行,以及所有這些如何應用於 Sketch。

字元和字形

排版一段文字的第一步是將文字的字元和字體屬性轉換為字形。字形是特定字體中一個或多個字元的視覺表示。字元和字形之間的映射不是一對一的。例如,一個字形可以代表多個字元,這些稱為連字。相同的字元以不同的順序排列可能會產生不同的連字,因此字形的數量也不同。我們遇到過最極端的連字是在 Zapfino 字體中的「Zapfino」。這七個字元由一個字形表示。

文字容器和行片段

一行可以容納多少字形取決於文字容器的寬度。在 Sketch 中,文字容器的大小由文字圖層的寬度決定。為了用字形填滿文字容器,我們需要將其分成多行。包含所有適合單行顯示的字形的矩形稱為「行片段矩形」。只要您在一個段落中使用單一字體或大小,一切看起來都會如預期般。

在正常的排版中,行片段的高度由該行上最高的字體決定(準確地說,是字體在基準線之上和之下的上緣和下緣的總和)。混合字體可能會產生不同高度的行片段,這就是事情開始變得有趣的地方。

固定行高

段落也可以指定最小和/或最大行高。這會限制行片段矩形的高度。如果我們對最小值和最大值使用相同的值,我們就會得到一個固定的行高。過去,在 Sketch 中設定行高就是這樣做的。這適用於使用相同字體的段落。

在 Sketch 中,混合字體的段落通常看起來不太正確。我們設定了固定的行高,那麼哪裡出了問題呢?答案在於找出排版程式選擇將基準線放置在行片段矩形中的位置。

事實證明,對於每個行片段,Cocoa 的排版程式會找出該行上最長的下緣,並將其用作從行片段矩形底部算起的基準線偏移量。使用混合字體時,這會讓我們得到固定的行高,但不一致的基準線間距。

當設計師說將行高設定為例如 20pt 時,他們的意思是他們希望基準線之間的距離為 20pt,而不是行片段矩形的高度為 20pt。這是合理的,因為決定文字視覺垂直節奏的是基準線,它比這些抽象的矩形更「明顯」。那麼我們是如何解決這個問題的呢?

一致的基準線

在 Sketch 3.6 中,我們引入了一個新的排版程式,它可以為具有固定行高的段落產生一致的基準線偏移量。為了實現這一點,我們會查看段落中的所有行片段,並選擇一個適合所有片段的基準線偏移量。

即使使用不同的字體,只要它們具有固定的行高,一致的基準線偏移量也會在段落之間保持一致。如果沒有設定固定的行高,我們會使用字體指示的行高,正如我們所見,這可能會導致不同的結果。當您將其設定為固定時,您將獲得美觀、可預測的垂直節奏。

這如何與現有文件一起使用?新的文字圖層預設使用一致的基準線排版程式,而早期版本的 Sketch 中建立的文字圖層可以透過更改行高來採用新的排版行為。

其他改進

我們對行高的改進也對行高低於其字體大小的段落的編輯產生了積極的影響,因為基準線始終位於行片段矩形內。它還改進了文字圖層的邊界矩形。

最後,當更改文字圖層的字體時,我們盡力保留第一個基準線的位置,這樣您的文字圖層在不同字體之間切換時就不會再垂直跳動。

最後一點說明

您可能已經注意到,數位排版是一個極其複雜的問題。我們生活在一個令人興奮的時代,我們已經意識到幾乎不可能讓一個設計在每個裝置和平台上看起來完全一樣。

對我們來說,也不可能建立一個像 iOS、Android、Windows 中的 Chrome 或 Mac 中的 Safari 那樣渲染文字的系統。它們之間的渲染差異非常複雜且多樣。

我們聽取了您的意見回饋,並努力創建了一個非常一致且可靠的渲染系統。本次更新著重於行距的調整,而這僅僅是個開始。這是我們計劃今年發佈的一系列排版改進的第一步。

您可能也喜歡

免費試用 Sketch

無論您是 Sketch 新手,還是回來查看新功能,我們都能讓您在幾分鐘內設定完成並準備好創作最佳作品。

免費開始使用
免費開始使用