创意之前,使用2款字体设计高大上的网页

经常浏览各种网站的人知道,中文文字网站上目前使用的字体基本分为两类:宋体、微软雅黑。还有很少量的网站会使用黑体文字或其他特殊字体。

Windows7普及之前,中文网站上字体几乎是清一色的宋体。除了中文字符文件大的局限,还有下面几个原因:

阅读习惯:中国人长期阅读纸质书本和杂志,大量宋体文字培养了一种固定的阅读习惯。

操作系统默认:Windows操作系统本身自带字体有限,如果没有指定字体,操作系统默认使用宋体渲染。

不同操作系统、不同版本的兼容性:近几年国内Mac使用人群在增长,不同系统、不同版本预装的字体几乎没有交集。即使是有限的常用字体,比如宋体、仿宋、楷体,在Windows和OS X展示也有一些视觉差异,而为了尽可能减少这些差异,大家一般会选择“安全字体”,比如宋体、黑体。

Vista系统出现后,Vista和Windows7默认微软雅黑字体,当用户逐渐接受这种美观大方的字体后,设计师也开始在网页设计中大量使用微软雅黑。

在专业的网页设计里,除了Banner图、广告语等特殊情况可能会用到特殊字体,网页中使用的字体以不超过2种为准,并且最好采用标准字体,比如中文的宋体、微软雅黑,英文的Arial、Verdana。

只有使用这些系统自带的字体,才能让前端开发人员在排版时高程度地还原设计稿的文字效果。

说到这里,设计师们可能觉得字体选择性少,不过先别急着哭!本文以国内优秀中文网站字体应用及我们的实践经验为案例,分享如何只用宋体和微软雅黑这两款中文字体,同样设计出高大上的网页。

一、整站只用1种中文字体

悦读FM是一个汇集阅读、播音、音乐、摄影爱好者分享交流的平台,主要面对的人群是年轻人。这个网站上所有页面的文字,包括Logo的文字、导航、按钮、文章标题、正文等,都采用了微软雅黑字体,它们的区别只是在不同栏目和不同层级采用了不同字号。

在上一篇介绍文字性格的文章中,我们曾描述过微软雅黑给人的感受包括平和、干净、简单、平静、专业等。

在悦读FM网站中,我们能看出这个网站整体设计风格就是干净简单,不论是网页布局还是图片搭配,都看起来清晰明了。这个平台定位是“倾听文字的声音”,用户在这个网站上的行为主要是听,文字则倾向于一种辅助作用。

用户在听的时候,可以时不时看看文字内容,微软雅黑这款字体很好地向用户展现出一种干净感,很符合网站想要传递的安静、清新的意境。

知乎网是一个网络问答社区,整个网站构成以文字为主,社区内的问答通常通过大篇幅的文字进行互动。

这个网站整站采用了宋体,文字标题与字号和正文有明显的区别,这些设计突出了标题,也促进网站整体设计满足最高质、最深度、最有收获的阅读体验。

对字体的感受不那么强烈?那咱们试试把网站字体换成微软雅黑:

一眼看上去,换过字体后的网页好像没有什么大变化,似乎让网站还有了一种科技感。

但假如像下图这样呢?

大段的微软雅黑字体排列略显厚重,如果是在网页上长时间浏览,会让人的眼睛产生不适。相比而言,衬线字体装饰性强,具有易读性,所以宋体更适合知乎网站这种大段文字网站,它们看起来更舒适,并且宋体文字还能让用户注意力集中在文字内容上,更专注于信息而不是字体本身。

AnyForWeb为杜卡迪设计开发的公司网站中,除了图片中的特殊字体,整站中文字体采用了微软雅黑。

与悦读FM网站的清新风格不同,我们能明显感受到这个网站传达另一种感觉:现代化、速度与激情、酷炫,同时还有一种力量感。

我们再试试把网站字体换成宋体:

呃,怎么看都觉得哪里不对!

宋体在这里看起来太轻了,完全不能表达文字阐述的“释放”“动力”“速度”的感觉。而微软雅黑虽然不像某些特殊字体那样传达强烈的速度感,但如果要选择网页中文字体,干脆利落的微软雅黑是一个很好的选择。

二、2款中文字体灵活搭配

如果你觉得只用一款中文字体太单调,还可以灵活搭配两款字体,提升用户的阅读体验。我们以优秀案例说明:

简书是一个让用户专注写作和阅读的平台,它为用户提供了两款字体选择模式:宋体、黑体。

头部的筛选标签文字在两种模式下都是微软雅黑字体,用小字号仍然确保了显示的清晰度。

在黑体模式下,整站就只采用微软雅黑字体,文章详情页的标题以加粗突出展现。这时候我们感受到的就是简洁干净。

为了避免长篇文字带来的厚重感,简书采取自动分段功能,并且正文有固定的字号和行间距,这种排版布局让写作者和阅读者都感到舒适。

在宋体模式下,首页文章标题是加粗宋体,作者名称和文章发布时间的小字也是宋体,下面的阅读和评论部分使用了微软雅黑。

文章详情页的标题使用了楷体,正文内容则是宋体。这种模式下浏览网页,我们可以感受到一种文艺和优雅。

如果只使用宋体,这个页面可能会略显普通,所以不要小看了这一处楷体的应用,这款俊雅字体的应用让整个页面散发出一种书卷气息,可谓是点睛之笔。

而且大家不要忘了,楷体也是系统预装的字体之一,设计时不用顾虑排版问题。

另一个案例是AnyForWeb为汉路律师事务所设计开发的网站。

在看到图之前,我们先想一下:律师行业网站应该给人什么感觉?

传统、专业、公正、官方、权威?没错!而具备这种特征的字体非宋体莫属。我们来看网站展示:

在这个网站中,Logo本身已经传达了传统文化的感觉,如果文字全部采用宋体肯定会让网站显得呆板不生动。所以设计师在导航栏应用了黑体,标题部分则使用了微软雅黑加粗,这样搭配起来,既展现出专业的特征,又让网站显示出一种小小的独特。

经验提炼:

根据网站定位、整体设计风格以及文字性格选择字体。

可以通过加粗、增加字号、文字颜色突出标题。

从这些案例中我们就能知道,在分析了网站定位、用户人群,确定了设计风格后,只用常规的几款字体,我们一样可以设计出高客户满意度的作品。

本文就先介绍到这里,下一期我们为大家分享网页设计最佳实践经验分享之字号篇。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,482评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,377评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,762评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,273评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,289评论 5 373
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,046评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,351评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,988评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,476评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,948评论 2 324
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,064评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,712评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,261评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,264评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,486评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,511评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,802评论 2 345

推荐阅读更多精彩内容

  • 先和大家分享两个关于网页的中文文字设计现象。 现象1: 公司前端技术同事看到我上周写的《好的字体让你的网页设计“倾...
    尛沫阅读 1,268评论 4 19
  • 字体在网站中扮演了相对重要的一个角色,所以在网站中,选用什么样的字体也是一个相对比较重要的工作。今天跟大家分享下在...
    郑乔尹在旅游阅读 31,161评论 0 14
  • 一、概念 参考网页字体Serif和Sans-serif的区别及浏览器字体的设置CSS Font知识整理总结 1.F...
    合肥黑阅读 6,077评论 0 12
  • 大家都知道,在不同操作系统、不同游览器里面默认显示的字体是不一样的,并且相同字体在不同操作系统里面渲染的效果也不尽...
    陈_宣阅读 1,907评论 0 7
  • 听了一首歌,机场。 想起来,好像这几年我没有接过你的机,我总是在家里等你,坐在靠近门口的沙发上,等着走廊传来的熟悉...
    松子松松阅读 198评论 0 0