• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 我们观察到,2018年网页文本字体的设计趋势有这7种

我们观察到,2018年网页文本字体的设计趋势有这7种

作者:Webflow Blog 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含字体设计,排版布局,经验分享,网页字体,设计趋势等相关知识,Webflow Blog希望在学习及工作中可以帮助到您

网站最基本的功能是呈现信息,让用户可以阅读。字体的展示和排版自然也是网页设计师工作的重要内容之一。今天,我们搜集了2018年网页设计领域正在流行的文字排版设计趋势,与你分享。

2006年,Oliver Reichenstein 撰写了文章《网页设计95%的工作是排版》,这是当年最有争议的文章之一。 Reichenstein 在文章中这么说道:“网页设计不仅仅是挑选并使用精美的字体,更多的是关于我们如何在设计中使用它们 。”

1. 大胆的首屏排版设计

超大的、震撼的、直接的、没有戏剧性的首屏文本可能是最近几年文本最为显著的用法。首屏中常见的超大的图片被超大的文本所取代,这些标题和主题、品牌或者信息紧密关联,通过超大的尺寸呈现出来的视觉效果也不遑多让。

效果如你所见,字体排版成为了网页中最醒目的存在。比如 CreativeDoc 的首屏中,六个白色的字母在黑色的背景中,以一种醒目方式呈现出来,对比强烈。

所用字体:Dharma Gothic Heavy

而这家欧洲的创意设计企业 Soffl 的网站则在网站上使用更为浓缩、狭窄的白色字体,搭配彩色动画元素营造出时尚的感觉。

所用字体:自定义(Souffl Web)

2. 使用优雅的衬线字体

传统的衬线字体有着优雅的特点,如今设计师越来越多地在网页中使用衬线字体来创造典雅优容的氛围。

通常,设计师会将网页中最重要的部分,比如标题或者说明,借助流行的衬线字体突出地呈现出来,就像 Calluna 和 Minion 这样的字体。

在?Cobble Hill 和 Gin Lane 这两个网页背后,设计师就在首屏使用衬线字体来迎接用户。

所用字体:Arno Pro?和?Proxima Nova

所用字体:Miller Disp, Lt

3. 直白的纯文本

有花哨多样的视觉化设计,自然也有返璞归真追求自然直白的设计,在文本排版上,也是如此。

Justin Jackson 的这个名为 Word 的这个网站的主要内容,是在网页上独立呈现文本的显示效果的:

所用字体:浏览器默认字体

Jackson 在他的网站中写到:“文本是最网页中最强大的工具”,用文本设计网页本身并不是一件容易的事情,但是做的好了,用户甚至不会意识到图片的缺失。

总部设在哥本哈根的设计机构 B14 就使用了简单直白的文本内容填满了主页,用来呈现他们的工作内容:

所用字体:Maison Neue

一图虽可胜千言,但是文本对于信息的控制其实更加准确。

Joe Coleman 是一位自由撰稿人,他在自己的网站上仅使用文本来呈现内容。这个网站的特点是借助交互性元素,以纯文本的视觉设计和交互来吸引用户。

所用字体:Work Sans

Max Kaplun 的作品集网站中,同样是使用纯文本来构建视觉,不过他借助最简单的字符、字重和色彩变化来装饰。

所用字体:自定义

4. 使用等宽字体

等宽字体的功能性很强,在文字密集的场合常常会用到等宽字体,比如代码,或者文章当中。在现在看来,等宽字体本身有着一种复古的质感,如今在网页设计领域的流行和粗野主义的回归不无关系。

Laurent Desserrey 设计了一套令人着迷的作品集网站,网站借助失控的效果和等宽字体创造出粗野的视觉效果。

使用字体:Space Mono

Run Your Mouth 这个网站也是同样使用等宽字体来创造粗粝的质感。

所用字体:Titling Gothic,?Space Mono

5. 使用高亮效果来吸引人

使用高亮效果来构建内容的层次结构也是不错的方式,这有助于访客浏览、抓住关键的信息。

Godfrey Dadich 是一个来自旧金山的设计机构,由于首页上长篇大论的内容,为了让用户抓住重点,使用了荧光绿的高亮标识。

所用字体:Noe 和 Atlas

康奈尔大学的网页同样使用荧光黄色来高亮关键词,让访客注意到关键的文本。

所用字体:Freight Display?+?Theinhardt

6. 纵横交错的标题文本

将标题或者关键性的文案拆分,在首屏上纵横交错地排布也是近年来比较流行的玩法。这种排版方式不仅让整个布局有更多留白,而且形式感更加强。

比如下面的这个网站,它是电影?Take What You Can Carry 的官方网站,电影的名字被拆分开单独排版:

所用字体: DIN + Courier

而诸如设计机构 Elegant Seegulls 的网站,甚至使用了垂直滚动这样的实验性效果:

所用字体:Azo Sans + Capitolium 2

在创意机构 Magic People Voodoo People 的网站上,则在四角上使用了水平和垂直的文本来昭示它的名称:

7. 充满实验性的分散文本

将单词本身彻底打散成为单个字母,这种设计更为实验性。这种设计在视觉上有着独特的风格,不过在可读性上相对而言就比较差了,这也是为什么将这种设计趋势定义为实验性的,在具体设计的时候,应该仔细衡量,再做选择。

The Impossible Is Inevitable 是一个在莫斯科犹太人博物馆所举办的展览,展览的名字是由浮动的字母所构建而成,在首页上浮动,需要稍微仔细分辨才能明白具体是哪几个单词。

分散的字母虽然并不是那么容易分辨,但是它们被细线贯穿在一起,有视觉线索,看似脆弱断断续续却始终相连,并且充满了探索感。

Octoplus Group 是一个通信机构,他们的网站首页就是借助这些小巧粗犷的字母来充当导航元素。从品牌信息传达和故事性的角度上来看,这种设计是非常有趣且有效的。

「2018年设计趋势,一个都不要错过」

  • 《2018年,这10个LOGO设计趋势值得你关注》
  • 《超全面总结!2017年UI设计领域流行过这21个设计趋势》
  • 《掌握这12个移动端UX设计趋势,你就掌控了2018年》
  • 《这款独特的紫色,是为你指引2018年设计方向的年度潘通色》

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 这篇字体设计教程,可能让你少赔几万
  • 饿了么高级设计师:界面视觉设计 5 要素之字体篇
  • 想营造出80年代的复古风格?下面的建议不要错过
  • 想让文字更出彩?试试通过切割文本来创造视觉吸引力
  • 为了让你用上正版字体,他辞职花了 2 年造字
  • 收藏这个神器,帮你一键生成高大上的艺术字体!
  • 超全面!八种格调超高的PPT文字设计法!
  • 我们观察到,2018年网页文本字体的设计趋势有这7种
  • 网页中这10种字体的运用方式,不会让人觉得Low
  • 这8个字体设计和排版技巧,是2018年的设计趋势

相关文章

  • 2018-08-23进阶高级设计师!如何从零开始做出用户体验地图?
  • 2018-08-23踩坑经验!那些你想太多的「过度设计」和改进方式
  • 2018-08-23腾讯实战案例!设计师如何从零开始做一款H5?
  • 2018-08-23超干货!一套完整的设计分析思路应该是怎样的?
  • 2017-08-06限制input输入类型(多种方法实现)
  • 2017-08-06关于启用 HTTPS 的一些经验分享
  • 2018-08-23实用经验!移动AR体验设计的特质与挑战
  • 2017-08-06网站上flv/MP4等格式的视频文件播放不出来和MIME类型有关系
  • 2018-08-23想引导用户?来学习UX中的承诺和行为一致性原则
  • 2018-08-23专业科班方法!写给视觉设计师的印刷基本知识和技巧

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 收藏这7个在线配色神器,再也不愁配色灵感了 !
    • 行内元素、块元素都有哪些
    • 新鲜出炉!2018年的用户体验设计趋势(上)
    • 设计师越来越多,但为什么APP设计得越来越像?
    • 「这个控件叫什么」系列之步进器+Switch
    • 那些很熟悉但又叫不出名字的设计法则:系列位置效应
    • 基础知识学起来!如何科学提高UI界面的文本易读性?
    • 网页制作绝对路径与相对路径的区别
    • 最全最好用的动效落地方法,都帮你总结好了(上)
    • img 半透明 处理img加半透明背景实现思路及代码

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有