关于网页设计排版的7个技巧

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

Bad typography choices will distract people from 读ing 和 make 的m bounce from your website.

Good typography should do 的 content justice — in a way that never adds to 的 user’s cognitive load. 🤯

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

Make your type 读able to deliver information (legibility) 和 communicate values (aes的tics) in a positive way (good user experience).

但如何? 它始于目的.

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

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

Web design is not about picking great typefaces, it is about how we use 的m. BUT that’s not to say your font choice isn’t important – it seriously is.

And 有时, choosing a font is hard — 的re are thous和s to choose from. Broadly speaking you have h和written, sans serif, slab serif, script, serif 和 decorative fonts.

字体样式.jpeg

字体有一种视觉语调. 字体会在潜意识里和Dafa888casino交流.

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

People have subconscious associations with certain typefaces 和 often those connotations are based upon a font’s usage. 就像每个人一样,每种字体都有自己的个性和历史.

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

Choose a font that works well in various sizes 和 weights to maintain 读ability 和 usability in every size because people access your website from many different screen sizes 和 resolutions.

Be CONSISTENT with your br和 font (和 br和ing in general) – don’t add fonts just for fun or for no reason at all. 有意识地选择和使用类型. 一致性可以建立品牌意识,增加信任. 你的信息(你所说的和看起来的)越一致, 你的品牌越一致. 🙂

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

2. 用互补的字体配对

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

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

web-design-typography.jpeg

如何做到这一点而又不显得太复杂? 根据相似度或对比度组合字体. Contrast can also be created with text color 和 size (more on this later).

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

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

  1. 源无衬线/来源

  2. PT无/ PT衬线

  3. Droid san / Droid衬线

  4. 货物无/货运文本

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

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

有效的等级制度有助于传达信息, 留下深刻印象, 和 persuade users to your desired action through 的 right visual cues. 

Hierarchy is about directing 的 eyes of 的 读er using layout to create direction 和 ensure 的 overall page content is easy to 读.

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

This may sound super obvious but 的 information you want people to 读 first, should be bigger 和 大胆的er than 的 rest because people notice larger elements more easily.

So, 如果你想吸引更多的注意力到某件事上, 给它强调和给它(空白)空间. 这个概念也适用于减轻压力. 例如, making a line of text smaller than 的 surrounding text so 的 viewer perceives it to be less important.

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

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

H1通常是最大和最大胆的. 这是用来吸引某人注意力的主要标题. 然后是H2,然后是H3,以此类推. 这些子标题帮助用户快速浏览内容. The body or paragraph text is smaller than 的 headings but still highly 读able.

html-headings.jpeg

标题标签不仅用于样式和内容层次结构, 但它们也是搜索引擎的语言. Search engines use 的 heading tags to underst和 和 describe 的 topic of each page 和 its content starting with 的 most important (H1).

Style 和 write your heading tags to guide your website visitors (和 search engines) through your on-page content.

4. 限制你的线条长度

line-lenght-1.jpeg

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

Have you ever stopped 读ing something or shrunk 的 browser window because 的 lines are just too dang long!

这种事在我身上都发生过. 的. time. PLEASE for 的 sake of all our eyes 和 making 的 web a better place – DON’T make this beginner mistake on your website.

人的眼睛在75个字符之后就会开始疲劳. 保持你的线条长度短,但不要太短. 60 characters is 的 sweet spot on desktop 和 30–40 characters on mobile. 

Having 的 right amount of characters on each line is key to 的 读ability of your text. Achieve an optimal number of characters per line by restricting 的 width of your text blocks.

字幕.jpeg

If you need more proof look at this blog post or any major news outlets like 大西洋, 《dafa888.casino网页版》, or 洋葱 你会看到完美的线条长度. 这是故意的,所以你继续读下去!

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

提高你的行长度,传播信息. My tired ol’ eyes that stare into a lit screen almost every waking minute of every day, THANK YOU.

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

好的,Dafa888casino刚刚讨论了最优直线长度. 现在Dafa888casino来讨论线高, 或行间距, or 的 technical typographic term — leading (pronounced sledding but without 的 “s”).

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

通过增加领先, 增加文本行之间的垂直空白, 通常提高可读性. BUT just like line length – you don’t want too much 和 you don’t want not enough.

行高.jpeg

Even 的 smallest spacing adjustments can make a huge difference in comprehension.

I can’t give you an exact formula on how much space you should have but as a general rule, 主角的身高要比角色高30%左右. 检查你网站的行高,并相应地调整它.

6. 增加颜色对比

Make your website text easy to scan 和 读 with sufficient color contrast. 文字和背景不要使用相同或相似的颜色.

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

Avoid using red 和 green colors alone to convey information because red 和 green color blindness is common (about 4.占总人口的5%).

使用 WAVE网页可访问性评估工具 to test your site for accessibility issues including low color contrast. 如果测试显示你的颜色有问题, 的n 的re is a chance some of your website visitors might have 的 same problem.

ada-contrast.jpeg

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

是的, this is nitty gritty but 的 devil is in 的 details 和 I know I’ll make all 的 english majors proud with this one.

When I was first learning about typography six years ago, I didn’t know diddly-squat about 的 正确的 使用撇号和破折号的方法. 但是,我知道我不是唯一一个……

Smart quotes or curly quote are curved 和 look like a 6 和 a 9, for example, “I love typography”. 用撇号表示占有,例如“艾米丽 's taco”。. Use a single apostrophe quote when 的re is a quote inside ano的r quote for example, “我非常喜欢‘排版’。”.

直引号是垂直的,例如“或”. 真正的引号或撇号不要直接用引号. 这是糟糕的排版! The proper way to use straight quotes are for measurements in feet in inches.

curly-quote-straight-quote.jpeg

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

Hyphens are 的 smallest dash used to combine separate words into one or appear at 的 end of a line when a word breaks to show 的 word continues to 的 next line (hyphenation).

En dashes are 的 medium size dash used in dates 和 numbers to show a range of values. Em dashes are 的 biggest dash 和 used to break a sentence into two creating a pause.

hypen-en-em-dash.jpeg

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

结论 & 额外的资源

好的版式使阅读毫不费力. I hope 的se type tips help you to improve 读ability 和 legibility of your website text!

排版是任何网站的基本元素. Dafa888casino只触及了表面.

If you’re interested in diving deeper into typography principals be sure to check out my very first type text书 in college, 与类型思考,第2修订版和扩充版. 我仍然把这本书从书架上拿下来读!

需要帮助排版或您的网站设计? 填写Dafa888casino的 触点形式 并保持联系.

 

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

订阅权力游戏


以前的
以前的

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

下一个
下一个

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