网站建设 微信定制 小程序开发 新闻动态 APP开发 客户案例 关于我们 联系我们
德天信网络科技——贵阳网站设计:网站字体排版的10个基本规则
2018-04-23 15:38:21

排版在这个过程中起着至关重要的作用:网络上的信息95%以上的是在书面语言的形式存在。良好的文字排版使阅读的行为轻松,而体验不好的文字排版导致用户关闭网页。“网页设计是95%排版设计”:


使用超过3种不同的字体会使网站看起来缺乏结构化和不专业。 注意,较多的字体样式使用一次都可能破坏所有布局。网站设计:网站字体排版的10个基本规则

为了防止这样的情况,尝试将字体数量减少

字体嵌入服务(如Google Web字体或Typekit)有许多有趣的字体,可以为您的设计提供创新、新鲜的和意想不到的效果,它们使用起来也非常方便。以Google为例:

选择任何字体,如Open Sans。

生成代码并粘贴到HTML文档中。

完成!

  • 不是每个人开启浏览器都可以访问到同一种字体,这意味因为您选择的用户体验较好的字体将无法展示在所有用户面前。

  • 用户更熟悉标准字体,因此可以更快地读取它们想要的信息。


  • 每行放置适当的字符数量是文本可读性的关键,它不仅是你的设计,决定你的文本的宽度,它也应该是一个可读性的问题。从Baymard研究所考虑有关可读性和文本线长度的建议:

    “如果你想要一个很好的阅读体验,你应该限制每行大概60个字符。每行拥有适当的字符数量是文本可读性的关键。”

    网站设计:网站字体排版的10个基本规则

    如果一行文本太短,眼睛必须经常转回,打破读者的节奏。 如果一行文本太长,用户的眼睛也难长期专注于单行文本。 图片来源:材料设计

    用户会从有不同屏幕尺寸和分辨率的设备访问您的网站。大多数用户界面需要各种大小的文本元素(按钮文字,字段标签,部分标题等)。选择一种能够在多种尺寸和分辨率屏幕上运行良好的字体以保持每个尺寸的可读性和可用性非常重要。

    网站设计:网站字体排版的10个基本规则


    Google的Roboto字体

    许多字体使得很容易混淆类似的字母形式,特别是与“i”和“L”(如下图所示)以及差的字母间距,

  • <p font-size:16px;background-color:#ffffff;"="" style="margin-top: 0px; margin-bottom: 0px; padding: 0px; font-family: "Microsoft YaHei"; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255); color: rgb(34, 34, 34);">

  • 例如当“r”和“n”看起来像“M”。所以当选择你的类型时,请务必在不同的上下文中检查你的类型,以确保不会为你的用户造成问题。