威尼斯游戏大厅网页设计排版的7个技巧

字体设计是一个相当大的问题. 这是内容与设计的结合. 它能让威尼斯游戏大全 ,让威尼斯游戏大全 感觉 一个特定的方式. 它的个性会影响人们对你公司的看法. 

糟糕的排版会分散人们的阅读注意力,让他们从你的网站上跳出来.

好的版式应该做到内容公正——绝不要增加用户的认知负荷. 🤯

换句话说,设计内容要便于阅读和理解.

让你的字体具有可读性,以一种积极的方式传递信息(易读)和传达价值(美学)(良好的用户体验).

但如何? 它始于目的.

你的使命是什么?? 答案应该指导你选择使用什么字体. 当你考虑排版的时候,从网站的目的开始. 它将影响到设计的各个方面.

1. 选择一种能传达你品牌价值的字体

网页设计不是挑选好的字体,而是威尼斯游戏大全如何使用它们. 但这并不是说你的字体选择不重要——它真的很重要.

有时候,选择一种字体是很困难的——有成千上万种字体可供选择. 一般来说,你有手写字体,无衬线字体,平板衬线字体,手写体,衬线字体和装饰字体.

字体样式.jpeg

字体有一种视觉语调. 字体会在潜意识里和威尼斯游戏大全交流.

不只是你说什么,或者你怎么说. 沟通的很大一部分是 它看起来如何. 人类天生就是视觉思考者.

人们潜意识里会对某些字体产生联想,而这些联想往往是基于字体的使用. 就像每个人一样,每种字体都有自己的个性和历史.

尽量减少使用的字体数量. 威尼斯游戏大全建议使用 不超过1-2个类型家庭 在你的网站上增加理解.

选择适合各种尺寸和重量的字体,以保持各种尺寸的可读性和可用性,因为人们会从许多不同的屏幕尺寸和分辨率访问你的网站.

与你的品牌字体保持一致(和品牌一般)——不要为了好玩或没有任何理由而添加字体. 有意识地选择和使用类型. 一致性可以建立品牌意识,增加信任. 你的信息(你所说的和看起来的)越一致, 你的品牌越一致. 🙂

你的品牌字体与你的公司价值观一致吗? 确保它能清晰有效地传达你的信息.

2. 用互补的字体配对

威尼斯游戏大全建议您的品牌使用1-2种字体. 威尼斯游戏大全使用一种类型的家庭与许多重量变化(特别轻, 光, 常规的, 书, 半黑体的, 大胆的, 黑色的, 等!),以保持威尼斯游戏大全的品牌信息强大而一致.

有时 你仍然想要合并两种不同的字体…

web-design-typography.jpeg

如何做到这一点而又不显得太复杂? 根据相似度或对比度组合字体. 也可以用文本颜色和大小创建对比度(稍后详细介绍).

另一个解决方案是混合来自同一家族的字体. 有些字体同时采用无衬线和衬线两种字体! 所以如果你把它们混合在一起就不会产生复杂的情况.

下面是四个有两个版本的字体的例子:

  1. 源无衬线/来源

  2. PT无/ PT衬线

  3. Droid san / Droid衬线

  4. 货物无/货运文本

字体组合是无限的. 字体两 有免费的有用例子的好资源吗 谷歌字体 配对. Adobe的字体 是一个奇妙的资源包括任何创意云订阅.

3. 使用视觉 层次结构 和标题

有效的等级制度有助于传达信息, 留下深刻印象, 通过正确的视觉提示说服用户采取你想要的行动. 

层次结构是指通过布局来引导读者的视线,确保整个页面的内容易于阅读.

基于你网站的目标, 这一页上有些字将优先于其他字, 如菜单, 标题, 和奖状. 使用字体样式和大小建立层次结构.

这可能听起来非常明显,但你希望人们首先阅读的信息, 应该比其他元素更大更大胆,因为人们更容易注意到较大的元素.

So, 如果你想吸引更多的注意力到某件事上, 给它强调和给它(空白)空间. 这个概念也适用于减轻压力. 例如, 一行文字要比周围的文字小,这样看的人会觉得它不那么重要.

标题或HTML标题标签在网页设计中是非常重要的.

People rarely 读 word by word; instead, 的y scan 的 page.

H1通常是最大和最大胆的. 这是用来吸引某人注意力的主要标题. 然后是H2,然后是H3,以此类推. 这些子标题帮助用户快速浏览内容. 正文或段落文本比标题小,但仍然具有很高的可读性.

html-headings.jpeg

标题标签不仅用于样式和内容层次结构, 但它们也是搜索引擎的语言. 搜索引擎使用标题标签来理解和描述每个页面的主题及其内容,从最重要的(H1)开始。.

风格和书写你的标题标签,引导你的网站访问者(和搜索引擎)通过你的页面内容.

4. 限制你的线条长度

line-lenght-1.jpeg

排长队很难阅读. 短的行也很难读.

你是否曾经因为一行字太长而停止阅读或缩小浏览器窗口!

这种事在我身上都发生过. 的. time. 请为了威尼斯游戏大全所有人的眼睛和使网站更好的地方-不要在你的网站上犯这个初学者的错误.

人的眼睛在75个字符之后就会开始疲劳. 保持你的线条长度短,但不要太短. 在桌面电脑上60个字符是最佳选择,而在移动设备上则是30-40个字符. 

每行字符数量正确是提高文本可读性的关键. 通过限制文本块的宽度来实现每行字符的最佳数量.

字幕.jpeg

如果你需要更多的证据,看看这篇博客文章或任何主要的新闻媒体 大西洋, 《威尼斯游戏大全》, or 洋葱 你会看到完美的线条长度. 这是故意的,所以你继续读下去!

想要增加人们阅读你网站拷贝的时间?

提高你的行长度,传播信息. 我那疲惫的老眼睛每天醒着的每一分钟都盯着荧光屏,谢谢你.

5. 行与行之间留出足够的空白

好的,威尼斯游戏大全刚刚讨论了最优直线长度. 现在威尼斯游戏大全来讨论线高, 或行间距, 或者是技术印刷术语- leading(发音为sledding但没有“s”).

前导是字母基线之间的空白量.

通过增加领先, 增加文本行之间的垂直空白, 通常提高可读性. 但就像行长一样——你不想要太多,也不想要不够.

行高.jpeg

即使是最小的间距调整也会对理解产生巨大的影响.

我不能给你一个精确的公式威尼斯游戏大厅你应该有多少空间,但作为一般规则, 主角的身高要比角色高30%左右. 检查你网站的行高,并相应地调整它.

6. 增加颜色对比

让你的网站文本易于扫描和阅读,具有足够的颜色对比度. 文字和背景不要使用相同或相似的颜色.

文字与背景颜色的反差越大, 它的能见度越高,实际阅读它的人就越多!

避免单独使用红色和绿色来传达信息,因为红色和绿色色盲是常见的(约4.占总人口的5%).

使用 WAVE网页可访问性评估工具 测试网站的可访问性问题,包括低颜色对比. 如果测试显示你的颜色有问题, 那么,你的一些网站访问者可能会有同样的问题.

ada-contrast.jpeg

7. 使用正确的撇号和破折号

是的, 这是一个细节问题,但关键在于细节。我知道我会让所有英语专业的学生为我这篇文章感到骄傲.

当我六年前第一次学习排版的时候,我对排版一无所知 正确的 使用撇号和破折号的方法. 但是,我知道我不是唯一一个……

聪明的引号或花括号引号是弯曲的,看起来像6和9,例如,“我喜欢字体”. 用撇号表示占有,例如“艾米丽 's taco”。. 例如,当引用中包含另一个引用时,使用单撇号引用, “我非常喜欢‘排版’。”.

直引号是垂直的,例如“或”. 真正的引号或撇号不要直接用引号. 这是糟糕的排版! 使用直引号的正确方法是用英尺和英寸来测量.

curly-quote-straight-quote.jpeg

不要把连字符和破折号弄混了. 它们不一样.

连字符是用来将单独的单词组合成一个单词的最小的破折号,或出现在一行的末尾,当一个单词中断时显示该单词继续到下一行(连字符).

zh破折号是在日期和数字中使用的中等大小的破折号,用于显示值的范围. Em破折号是最大的破折号,用来将一个句子分成两个部分来产生停顿.

hypen-en-em-dash.jpeg

正确处理这些印刷细节,你就会看起来像个专业人士.

结论 & 额外的资源

好的版式使阅读毫不费力. 我希望这些文字提示能帮助你提高网站文字的可读性和易读性!

排版是任何网站的基本元素. 威尼斯游戏大全只触及了表面.

如果你有兴趣深入了解字体设计,校长们一定要看看我大学里的第一本字体教科书, 与类型思考,第2修订版和扩充版. 我仍然把这本书从书架上拿下来读!

需要帮助排版或您的网站设计? 填写威尼斯游戏大全的 触点形式 并保持联系.

 

在你的收件箱里找到博客文章

订阅权力游戏


以前的
以前的

提高理解能力的5大网站设计原则

下一个
下一个

如何用5个简单的步骤让你的SEO起步