網頁設計中的文字的大小的搭配的方法 小文字,大體驗

2022-09-21 17:39:10 字數 1644 閱讀 7240

隨著ipad等移動終端的崛起,人們在移動終端閱讀上的時間越來越多,閱讀體驗已經變得越來越重要。而字型又是程式設計客棧決定閱讀體驗的關鍵所在,那麼字型在哪些方面又是什麼影響著閱讀體驗的成敗?

1.是否具有高辨識度

首先看看consolas,這款字型,我們可以發現,i和w的寬度都是一樣的,這種等寬字型都具有非常高的辨識度,非常適合文字編寫,**顯示等工作。

還是這個例子,在arial字型中,i,l 的辨識度很低,而且當有連續的il等較窄文字出現時,文字難以選中,此外georgia中,字母o,與數字0 只在大小上略有區別,基本上分不清,很難做到一目了然。

由此可見,等寬字型受字母本身的干擾較小,字母大小固定,密度固定,此類字型,簡單容易辨認,大大提公升了閱讀效率。但等寬字型也有很嚴重的問題,他用降低美觀程度而換來了高辨識度,因此,大多只能出沒於在一些**編輯器等軟體。

2.是否適合長時間閱讀

程式設計客棧 arial和gerogia, 這兩款字型在pc的網頁上都非常用,但哪一種更適合長時間閱讀?

雖然看起來無襯線字型雖然更簡潔,醒目,但識別性卻不如襯線字型那麼明確,要想讓讀者進行長時間閱讀,更需要的是讓讀者一掃而過,不程式設計客棧需要思考就能讀出文字,而georgia恰好具備這一點特質。因此,一般來說在同等印刷條件下襯線體在的閱讀速度要比無襯線體快五分之一左右。

首先襯線的筆畫輔助起到的不僅是美觀,還有助於辨識字型,其次,這些襯線筆畫可以使得這些字母在基準線上的筆畫在視覺上會形成一定的水平導視,可以引導視覺朝著水平方向移動,使得被識別性係數提高,這就是為什麼類似於georgia的襯線字型會在pc端和傳統出版都會如此受歡迎的原因。

無襯線的arial就好像大家閨秀,更適合地鐵等一些醒目的標牌等一些大場面,而非襯線的georgia卻似小家碧玉,字裡行間,百看不膩。

3.是否適應移動終端

由於ipad 的顯示屏亮度和對比度要高於普通電腦,因此很多在普通電腦上合適的字型和設計直接搬到 ipad 上會由於背景的亮度而產生實物過虛的問題。這一點在搭配字型時尤其成為問題。某些細字型卻嚴重發虛,導致原本適合的搭配變得不般配,嚴重影響了體驗。

retina display 帶來更細的精度,同時也給字型渲染帶來了更多問題,由於在不進行縮放的情況下,顯示普通時,它會用4個畫素來顯示中的1個畫素;zjtmgmpq而在顯示 retina時,每個畫素都對應中的1個畫素。因此一些字型比如georgia 就會變得非常細,導致字型在顯示時與設計時不一致,影響了體驗。

事實上,我們沒有辦法去改變硬體,只能盡量避免這些問題,因此在移動終端適當的加大文字尺寸(14px-16px)是比較明智。此外還可以加大文字的磅數也是避免發虛的辦法,而在英文顯示方面,pc端的經典之一georgia還需慎用。

4.是否擁有縝密的排版

這一點,在中文的排版上 唐茶 就做的非常不錯,實現了禁則處理、齊頭尾、英文換行(hyphenation)等排版基本功,還對標點外掛程式(行末出現的句號、逗號、分號等標點會被「懸掛」到文字右邊框的外沿。)和段首縮排進行了實驗性嘗試,都給讀者帶來了良好的閱讀體驗。

此外,閱讀的體驗還決於其他的重要因素,比如在不同的場合程式設計客棧應用不同的字型,字型的大小,磅數,文字一行的長度,文字之間的密度等。

閱讀乃大,方方面面不離文字,文字雖小,筆筆畫畫緊扣體驗。對設計師而言,優秀閱讀的體驗,不僅僅是讓我們追求美的視覺,更是出於一種對讀者的關懷。

本文標題: 網頁設計中的文字的大小的搭配的方法 小文字,大體驗

本文位址:

網頁設計CSS中文字大小的pt px的區別

在網頁設計中,經常用到字型大小的設定單位,常見的有2種 px pt。這兩個有什麼區別呢?原文 在網頁設計css中,經常用到字型,而字型大小的設定單位,常用的有2種 px pt。這兩個有什麼區別呢?先搞清基本概念 px就是表示pixel,畫素,是螢幕上顯示資料的最基本的點 而pt就是point,是印刷...

網頁的色彩搭配

色彩是人視覺最敏感的東西。不同色彩之間的對比會有不同的效果,當兩種顏色同時在一起時,這兩種色各自走向自已的極端,例如紅色與綠色對比,紅的更紅,綠的更綠,黑色與白色對比,黑的更黑,白的更白。由於人的視覺的不同,對比的效果通常會有不同。當大家長時間的看一種純色,例如紅色,然後再看看周圍的人,你會發現周圍...

CSS關於網頁中的文字

字型的處理在網頁設計中無論怎麼強調也不為過,畢竟網頁使用來傳遞資訊的,而最經典最直接的資訊傳遞方式就是文字,所以,了解一點字型的基本知識對於設計來說還是非常重要的。下面總結一些平時經常能用到的 文字行間距 line height 行間距取決於字型的大小,一般來說,小的字型大小需要大一點的行間距來便於...