首頁 > 網頁教程 > 設計分享 > 網頁排版設計如何才能讓頁面文字閱讀更舒適?

網頁排版設計如何才能讓頁面文字閱讀更舒適?

時間:2013-07-16    來源:百度MUX

上網在線閱讀,是大多人獲取信息的重要途徑。用戶會在網上閱讀到大量的新聞及各類文章,特別是網絡小說,這些頁面展示的主體就是通篇大段的文字。對于這種看似簡單的文字堆砌的頁面,有沒有人抱怨過:“這樣的頁面還需要出效果圖啊?”作為網頁設計師的你是怎樣處理這樣的界面的?

如何改善頁面設計,讓文字閱讀更舒適

  • 是習慣性的使用宋體字或者微軟雅黑?
  • 是直接設為12px或者14px的字號?
  • 你有想過為什么要使用這種字體、字號嗎?
  • 你有考慮過文字排布與閱讀效率的關系嗎?
  • 你的頁面背景會影響到用戶的瀏覽舒適度嗎?

讓我們從以下5個元素具體分析。

如何改善頁面設計,讓文字閱讀更舒適

字體、字號

字體和字號這兩個元素必須捏在一起說。

字體分為襯線體(serif)與非襯線體(sans serif)。簡單的說,襯線體(serif)就是帶有襯線的字體,筆畫粗細不同并帶有額外的裝飾,開始和結尾有明顯的筆觸(如下圖)。常用的英文襯線體有Times New Roman和Georgia,中文即是我們在windows下最常見的中易宋體。

與襯線體相反,無襯線裝飾,筆畫粗細無明顯查差異的字體就是非襯線體(sans serif)。Arial、Helvetica、Verdanad都是我們熟悉的英文非襯線體,中文有微軟雅黑和mac下默認的中文-華文細黑。

如何改善頁面設計,讓文字閱讀更舒適

在過去,普遍認為有筆觸裝飾的襯線體,可提高辨識度和閱讀效率,更適合做為閱讀的字體。多用于報紙、書籍等印刷品的正文。非襯線體飽滿醒目,常用做標題或者用于較短的段落。

很長一段時間里,在互聯網上我們會注意這樣的一個現象,國外網站大部分以非襯線體為主,而中文網站基本就是宋體。其實不難理解,襯線字體筆畫有粗細之分,很小字的情況下細筆畫就被弱化,受限于電腦的分辨率,10-12px的襯線字體在顯示器上是相當難辨認的(見下圖);同字號的非襯線體筆畫簡潔而飽滿,更適于做網頁字體。windows下,中文宋體小字點陣的特性,12px、14px的字號顯示仍然相當清晰美觀,便于閱讀。這也就是為什么大多網頁設計制作人員容易機械性的選用特定字號或英文或中文的字體。

如今隨著顯示器越來越大,分辨率越來越高,經常會覺得看12px的文字有點吃力,做為設計師也會不自覺的開始大量使用14px的字體,而且越來越多的網站開始使用15、16px甚至18px以上的字號做正文文字。大字號的使用,對英文字體來講,襯線體的高辨識度和流暢閱讀的優勢就體現出來了。中文宋體在顯示14號以上字體時,單線條大字總是看上去有些單薄不那么協調,特別是這款點陣字在ClearType(http://baike.baidu.com/view/755822.htm) 強制平滑顯示狀態下尤其顯得模糊不清。微軟雅黑就是微軟在這個字體顯示問題上的解決方案。

讓我們分別對比下中英文的襯線體與非襯線體在不同字號時的顯示效果。

英文以Times和Verdanad為例,中文以宋體和微軟雅黑為例。

如何改善頁面設計,讓文字閱讀更舒適

相關推薦
二十款網頁圖文混排設計樣式欣賞
如何掌握網頁廣告字體設計的技巧
網站的旗幟(Banner)廣告條字體設計簡析
移動終端全新界面設計語言“Metro”簡析
85個優秀的超大字體網頁設計欣賞
30款超棒的Photoshop文字特效制作圖文教程
30個超炫的Photoshop字體創意設計教程
24個很漂亮用CSS3實現的文本效果演示及教程推薦
10個基于HTML5技術的字體設計應用演示網站
20款漂亮的歐美風格免費創意卷曲字體欣賞(附下載)
網站設計中BANNER(廣告條)中的字體結構分析
無線移動終端APP的文字閱讀體驗設計分享
20個視覺效果令人驚嘆Photoshop文字特效教程
15個運用創意印刷字體的網站欣賞
38個創意出彩的網頁字體設計案例賞析
再也不怕選字體了!超全面的英文字體小結
字體設計教程:字體還能這么玩 聊聊文字的“性取向”
界面設計必備:全方位科普常用的字體規范
PS字體教程:教你打造閃閃發光的鉆石字效
網站策劃:Web的英文字體該如何選擇?
網站字體設計教程:29個纖細字體的網站排版設計案例推薦
PS字體教程:創建一個極具個性化的人物文字特效
網頁設計教程:用合適字號提升用戶體驗
UI設計字體與排版指南
16個簡單實用的英文字體排版小TIPS分享
UI設計:字體配色設計總結
零基礎設計字體:教你巧用字庫做出你的第一款字體設計!
WEB設計:8個字體設計和排版技巧分享
網頁字體排版:這10種字體的運用方式值得參考!
如何用超大字體元素應用在設計作品集類的網站?
分享:7種網頁文本字體的最新設計趨勢
CSS酷站網頁水平條經典設計欣賞
35套精美絢麗的創意酷站設計欣賞
30款富有表現力的網頁圖表設計欣賞
19樓UED分享專題第一屏的設計經驗
網頁設計中的構圖技巧分享

精彩推薦

熱門教程

天津11选5开奖号码 甘肃11选5遗漏号码 广东好彩1玩法 贵州11选5手机助手app下载 三分彩是不是官方开的 做股票配资的风险在哪里 青海快三走势图一定牛 11选5万能7码十三注 青海快3今天推荐号 岳阳期货配资公司 甘肃11选5一预测推荐