tft每日頭條

 > 生活

 > 文本字間距多少合适

文本字間距多少合适

生活 更新时间:2024-09-28 20:08:05

我們消耗的大多數信息都是通過閱讀來實現的,因此在設計時注意單詞是很有意義的。排版有很多方面,但是有助于提高設計質量的一件事是字母間距。

字母間距是關于在字母之間添加和删除空格。有些人将其與字距調整混淆,但這兩個是不同的。字母間距會影響整個文本行,而字距調整會同時調整兩個單獨字母之間的間距。字距調整最好留給類型設計者,此外,與字母間距不同,目前尚無辦法控制CSS字距調整。

我相信實踐和大量觀察都會改變您在工作中對待字母間距的方式。

字母間距的目的

字母間距的主要目的是提高文本的可讀性和可讀性。單詞的行為因其大小,顔色和所處的背景而異。通過根據您所使用的環境調整字母間距,将幫助讀者更快,更高效地使用您的信息。有趣的是,他們甚至不會注意到它-這就是工作的重點。

請記住,排版人員在設計字體時會考慮字母間距和字距調整。這意味着您不必将其應用于所有文本,但是為了在必要時了解它,您應該了解一些基本原理并使用好的字體。

文本字間距多少合适(文本間距設計指南)1

字母間距如何影響可讀性和可讀性

文本的可讀性和可讀性取決于行高,段落長度,字體大小,字體選擇,字母間距等。關于字母間距,如果您隻是要排版,那麼最好的辦法就是不要過度使用它。我的意思是根本不要使字母之間的距離太大或太小。即使您認為它看起來不錯,人們也會很難閱讀它,這會破壞他們的體驗。

文本字間距多少合适(文本間距設計指南)2

字母間距大寫字母

大寫字母的設計意圖是與小寫字母一起出現在句子或專有名詞的開頭。當大寫字母彼此相鄰時,它們之間的間隔太緊。因此,為了獲得更好的可讀性,需要增加空間。這适用于大小字體。

文本字間距多少合适(文本間距設計指南)3

字母間距标題

如果您使用設計良好的字體,則可以确保它們已正确校準,并且無需對它們進行任何重大調整。但是,标題的問題在于,在較大比例下,字母之間的空間看起來不平衡。可以通過增加或減少字母間距值來固定它。

沒有嚴格的字母間距規則-字體很多,而且都需要使用單獨的方法-但是,如果您查看Google和Apple這樣的大公司如何對待它們的字體,則可以在其中找到很多有價值的信息。

文本字間距多少合适(文本間距設計指南)4

文本字間距多少合适(文本間距設計指南)5

讓我們看一下“ Roboto”和“ San Francisco”字體(第一個在Material Design中使用,第二個在Apple生态系統中使用)。從20到48像素的标題具有正的字母間距值,或者沒有。如果字體較大,則字母間距變為負數。這些确切的數字對于其他字體來說效果不佳,但是在嘗試了不同的方法後,我可以說這是一種常見的模式。

我已經測試了幾種字母間距準則,而Bazen Agency發布的準則則适用于許多流行的字體。這對您來說是一個很好的起點,但是您始終可以進行其他調整:

  • H1-96像素--1.5%
  • H2-60像素--0.5%
  • H3 — 48px — 0%
  • H4 — 34px — 0.25%
  • H5 — 24px — 0%
  • H6 — 20px — 0.15%
  • 字幕-16像素-0.15%

如果您碰巧設計了很多應用程序或打算這樣做,那麼可以幫助我的一件事是使用默認的Material Design和Apple字體作為其字體。它們平衡良好,可以節省大量時間。

字母間距的正文

如果您讀過任何有關字母間距的文章,您可能已經從印刷術家Frederic Goudy那裡看到了這種流行的見解:“任何用小寫字母隔開字母的人都會偷羊”。(有一種說法是他僅指的是Blackletter字體。)一些設計師将其作為硬性規定,現在從不調整小寫字母的字母間距。

根據我的實踐并通過查看設計師的作品,我不同意Goudy,因為有時微小的更改會對文本的表現産生很大的影響。讓我們以壓縮字體為例。字母太小時,彼此之間的距離太近,導緻可讀性差。通過将字母間距增加1.5%,您将看到文本現在更易于閱讀。

文本字間距多少合适(文本間距設計指南)6

如果我們看我之前的示例,在“ Roboto”和“ San Francisco”字體的準則中,對正文使用字母間距;即使舊金山在标題上有專用的“ SF Pro Display”,在正文中有“ SF Pro Text”,但字母間距仍用于改進标題。

有很多不同的字體,并且一條規則并不适用于所有字體。使用字母間距,做對您來說合适的事情。有一些簡單的準則可以指導您正确的方向,尤其是在處理正文時:

注意身高

如果行高大于120%,則最有可能出現負的字母間距将導緻該段落的外觀不平衡。要對其進行優化,您需要将其保持在0%或僅對其稍加增加。

在深色背景上的淺色文字

在深色背景上,白色文字看起來曝光過度,因此字母顯得太緊。為了使它更清晰,我建議您增加少量字母間距。

文本字間距多少合适(文本間距設計指南)7

文本字間距多少合适(文本間距設計指南)8

正文的通用值

您可以對以下正文文本使用以下準則,這些準則已通過多種字體測試:

  • 主體1-16像素-0.5%
  • 正文2-14像素-0.25%
字母間距字幕

與标題和正文不同,較小的字體大小在字母間距方面沒有太多變化。當字體大小小于13px來增加字母之間的間距以使其清晰時,這是一種常見的做法。但是總會有例外(“ SF Pro Text”準則建議僅當字體大小為11px或以下時才使用正字母間距)。确保您嘗試設置。

您可以将以下值用作起點,然後将其編輯為所選字體看起來正确的值:

  • 标題-12像素-0.5%
  • 上劃線-10像素-1.5%
最後提示

幫助我提高排版技能的一件事是尋找其他設計師,尤其是字體代工廠。通過解碼他們的作品,您可能會注意到他們對待字體的一些細微差别,這将對您将來的項目有所幫助。

想要學習提高設計可以來aaa教育進行了解。

相關推薦:

如何設計更高級?

設計細節,視覺差設計

設計師如何設計完美的卡片

設計畫面不平衡,怎麼處理?

什麼是設計語言?以及如何搭建

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关生活资讯推荐

热门生活资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved