雷火电竞首页-中国电竞赛事及体育赛事平台

聯系我們 face+ 關于 服務 案例
首頁 案例 服務 關于 face+

怎么設計網頁的字體大小,最適合用戶長時間閱讀

Time: 2020-01-07


現在很多人都喜歡通過手機上的網頁來查看自己想看的新聞或者是咨詢,這時候網頁上面字體的大小會影響用戶看網頁的時間,今天就一起來看看,怎么設計網頁的字體大小。

可讀性是一件大事,平時上網看書時,可能覺得網頁中的字體太小,看久了眼睛會很不舒服,你為什么設計一個用戶難以閱讀的網站?訣竅是創建一個適合閱讀的刻度。你要處理的文字尺寸越多,這就越重要。在逐行閱讀時,太寬的字體讓人難以集中精力; 太擁擠導致閱讀時眼睛移動太快,沒有一個很好的節奏。


怎么設計網頁的字體大小

  網頁也叫做超級文本,既然是超級文本,就會涉及到文字,圖片的排版,而文字作為信息呈現的主體,甚是重要。現在很多設計師最開始做的是APP設計,最后應工作需要會做些網頁相關的頁面,直接采用APP圖文的排版規則套用在網站上,因為終端設備,使用場景發生變化,會顯得很不合適。其實這里面就是幾個規則的事,今天就給大家分享,記住這幾個規則,即使你之前連簡單網頁設計都沒有做過,也照樣能做出符合業界規范,排版好看的網站了。


adobe-fonts-social.jpg

(圖片來自網絡)


怎么設計網頁的字體大小行間距

  1倍 1.2倍 1.5倍 1.8倍 2倍

  這是一個經驗值,我個人最長采用的行間距是1.5倍,不同的產品對這個值要求可能不同,比如正文字號是16px,間距是24px

  對于中文來說,常用的字體大小12px、14px、16px、18px等偶數大小,在IE6和IE7設置其行高也為偶數能解決一些特殊情況下的字體對其問題。

  在這里我加入了1倍間距,做設計的同學會感到奇怪,其實這個間距是針對word上面的正文排版,常用的是1倍-1.2倍。過大就不方便閱讀。這是跟網頁中行距的區別。

  段間距:行間距是段落間距的50%或者75%

  比如行間距采用32px,那么段落間距可以采用64px,或者43px


1.jpg

(圖片來自網絡)


  怎么設計網頁的字體大小字號

  正文:

  10px-18px之間比較合適(中英文皆可,一般情況英文要比中文略小些)

  10px對于一些字體會顯得過小,但是還是會有個別處選擇用10px

  12px是宋體能顯示的極限,雖然微軟雅黑能顯示更小的字體,但目前的應用環境尚未成熟。由于宋體基本上是目前顯示中文唯一的通用Web字體,所以12px成為最常用的字體大小。我們當然可以依據產品的需要來修改這個默認值。

  在Chrome3.0之后的中文版中,字體大小最小值是12px,比如你設置最小字體為10px,最后也變成12px。

  標題:

  文字字號,18px,20px,24px,28px,32px,根據內容需要選用就好,并不是單數字號不可選,而是我個人喜好雙數哈哈。為了讓網頁排版更好看,這里有個技巧,增加字號對比,在app界面設計中,標題與正文的文字差不會過大,以iPhone7尺寸為例,標題36號,文章正文可選34px,32px,30px。而在網頁上極差關系可以做的更大,更夸張,標題30px正文12px,這種做法可以讓網頁眾多的文字信息,分清層級主次,用戶更有視覺焦點。這一原則,不適用在移動端。移動端我們可以通過顏色,字重,等其他方式來做極差關系。

2.jpg

(圖片來自網絡)


  網頁的字體太大的話,一頁可以顯示的文字就會變少,但是字體太小的話,又會覺得眼睛很疲勞不愿意看。以上就是關于怎么設計網頁的字體大小的相關內容。


合作咨詢

上海(總部)

上海市浦東新區郭守敬路498號22號樓
021-61057328
[email protected]

辦公地址地圖

北京

北京市東城區后永康17號A座
010-64015620
[email protected]

辦公地址地圖

成都

四川省成都市錦江區東大街牛王廟段100號
028-62790929
[email protected]

辦公地址地圖
首頁 | 案例 | 服務 | 關于 | face+ | 智見

Copyright ? 2009-2022 FaceUI design. All rights reserved


滬ICP備13044459號-5

上海辦公地點地圖
北京辦公地點地圖
深圳辦公地點地圖
在微信中搜索faceui
或保存二維碼在微信中打開