字型垂直居中 字型設計 視覺誤差正負形

2021-10-12 18:23:09 字數 2065 閱讀 6161

關於正負形的理論,相信你已經聽過不少了,好比國畫中的留白、圖案的圖地關係等等。這裡我要講的是字型設計中的正負形,負形空間的協調和均衡是字型有美感的關鍵所在,但負形空間也恰恰是容易被初學者甚至一些具有多年經驗的設計師所忽略的。在字型設計中巧妙應用正負形還可以設計出富有創意性的設計作品,下面我們就來詳細講講字型設計中如何實現視覺效果的均衡。文中以白空間來指負形。

文中所有示意圖採用左右對比

左側圖:為錯誤的示意圖,以藍色作為色彩標示。

右側圖:為正確的示意圖,以粉色作為色彩標註。

【多橫線】

圖中以四條長短不一的橫線為栗子

長短順序是 d > c > a > b

左邊:當四條橫線的粗細一樣時,即 a=b=c=d ,從視覺上(注意看下方的小圖),我們的眼睛誤以為最短的 b 是四條橫線中最粗的,而最長的 d 是四條橫線中最細的。這樣的視覺誤差是我們在做等線體時需要注意的。

右邊:因此在設計的時候,越長的橫線越粗,越短的橫線就越細的原則。粗細的順序 d > a > c < b 時。才能從視覺上覺得四條橫線的粗細是一致的。

【日】內白空間的均衡,如下圖

左邊:當內白空間(藍色部分)上下絕對均等時,即 a=b ,從視覺上,我們往往會覺得日字中間的橫筆畫往下落,會產生上白空間比下白空間大的視覺誤差。

右邊:因此在設計的時候,會讓上白的空間略小於下面白的空間,即 a < b 時。才會讓上下的內白空間分布勻稱。這樣眼睛才會認為中間的橫筆劃位於正中。

【框內多橫線】

所有橫線依次為 a、b、c、d、e 如下圖所示

左邊:我們設定所有橫筆畫一樣粗細時,即 a=b=c=d=e ,從小圖看,視覺上會覺得最外側的【口】的上下兩條橫線相對要比中間的三條橫線細而薄,中間的三條橫線似乎也粗細不一。

右邊:設計的時候,中心的橫線最細,越往外,橫線越粗。

依次為 a > b > c < d < e 。是不是所有筆畫的粗細達到均衡效果了。

【土】中間豎筆畫的居中誤差,如下圖

左邊:當豎筆劃位於絕對正中時,即 a=b ,從小圖看,出現了居中豎筆劃靠右的視覺誤差。

右邊:我們稍作改進,將豎筆劃略微向左偏移,這樣 a < b 時。才會達到豎筆劃是居中的視覺效果。

【田】四個內白空間依次是 a、b、c、d 如下圖

左邊:把四個內白空間設定為一樣大小時,即 a=b=c=d ,視覺上看,水平的橫線向下掉,垂直的豎線也產生了向右偏的視覺效果。

右邊:重新做了調整,即 a < c < b < d 時。四個白的空間均衡了。

end

延伸閱讀

字面率詳解 - 如何計算字面率

關於字型格式您了解多少?字型大小和座標系西文字型設計師的學習利器

了解字型、學習字型、創作字型、分享字型

css 字型垂直 水平居中

也可以這樣 父元素position relative 子元素position absolute 相對于父元素 left 50 top 50 相對於自身偏移 transform translate 50 50 啦啦啦 tt為啥呢,這是。好吧。看樣式中 display table cell 作為 單元格...

字型垂直居中 海報設計技巧!垂直軸式

文 楊啟梅 垂直軸式海報是比較常見的一種海報版式,該版式具有穩重 平和的特點,但是若不注重 設計的技巧,則容易讓該類版式海報落入呆板的窠臼。該文從垂直軸在版面中的位置 文字的易讀性和美觀性 抽象元素的新增三個方面,講解垂直軸式海報的 設計技巧。垂直軸式海報指沿著一條垂直軸在其左右設計 的海報版式,該...

CSS樣式 字型 元素的垂直水平居中

1.css樣式與html中標籤屬性的區別 標籤的屬性是採用 屬性名 屬性值 表示的 css樣式是採用名值對 屬性名 屬性值 表示的 2.內聯元素 行內元素 與塊元素 1 內聯元素及其特點 所謂的行內元素,指的是只佔自身大小,不會獨佔一行 常見的內聯元素 a img iframe span span沒...