首页 > 知识•资讯 > 网页设计如何选择字体。 > 正文

网页设计如何选择字体。

2015/1/22 0:00:00 · 稿源:传诚信

选择字体是每个网页设计项目的一个组成部分。 成千上万的字体可以从托管服务,如Typekit,一个不断完善的 收集的免费字体 可用的,从来没有一个更好的时间t网页设计师。

人们可以很容易地认为,没有什么比排版更影响设计。 和良好的排版首先选择一个合适的字体。 但有太多的选择可以是坏事吗? 有了更多的选择,我们有更多的机会做出糟糕的决定。

在本文中,我们将回顾美丽的集合网站和分析的影响,他们的设计师的字体选择对总体设计。 我们会批评的好和坏。 当然,类型是主观的,因此采取任何批评与一粒盐。 让我们挖!

黄昏的酒店

葡萄园显示 来自新西兰曲线和华丽的显示字体类型设计师 克丽丝Sowersby ,是一个美丽的结合比邻星新星 在 黄昏的酒店 的网站。 尽管比邻星新星的大多数过度使用web字体之一过去的几年里,搭配一些较少使用,如葡萄园,可以让一个设计很独特的清新的感觉。



我也喜欢当一个品牌能够使用web字体标志。 它让我的大脑的开发人员知道快乐标志可以用CSS样式,阅读屏幕阅读器和扩充或缩减——所有不需要加载的图像。

dragone

看到这样的类型与华丽的纹理让我后悔” 平面设计 ”是这样的一个主流趋势。 dragone 网站的感觉就像一幅画,优雅 公平联盟显示 这个看起来是完美的字体。 公平联盟的斜体显示特别美丽,和本网站的特点突出。 经典的几何无 未来 使用,提供一个坚固的基础的公平联盟显示。



有时候这样的文本设置的图像,易读性存在。 然而,本网站的设计者已经非常小心,以确保足够的对比加深了照片足以让类型脱颖而出。

我唯一的挑剔是使用公平联盟显示内文-高对比度显示脸其实不是针对长段落的文本。 也就是说,副本的数量在这个网站上相当少,所以它不会阅读的危险。 乔治亚州 是传统的脸具有类似特征的,所以它可以作为可读性更强身体公平联盟显示字体的同伴。

罗曼Balcerak

《文本 是另一个多产的字体 克丽丝Sowersby 。 这里的配对 哨兵 ,一个 板衬线 从 霍弗勒& Co。 摘要 ,一个古怪的怪诞 跋铸造 是混合的。



使用三个字体有时有点多,但是 罗曼Balcerak 坚持一个一致的系统,把设计结合在一起。 《文本设置为标题粗体;前哨总是设置为斜体副标题,梗概是用于身体副本。

Rails的资产

Adelle无 和 惠特尼 是两个具有类似特征的无衬线——两者都是人文主义倾向的图腾。 结合两个相似的字体是肯定的。 它几乎就像是设计师不能在两者之间选择,所以决定同时使用。



至于排版犯罪,我认为这是次要的。 他们的使用是一致的——Adelle无标题和惠特尼一切。 以及与字体设计,很难设计看起来很糟糕。

美元一天

我要做一个not-too-controversial宣言: 摘要 现在在网上是最新潮的字体。 我这边的项目Typewolf 功能很多网站使用梗概;事实上,这是第三个最流行的字体在网站上,和我仍然遇到很多网站使用不要出现在Typewolf梗概。 似乎一些网站每天都用这个字体出现。



我的猜测是,梗概和其他类似的“ 古怪的图腾 “吸引设计师,因为经过多年的黑体在web上使用,这种风格的字体自豪地说“我不是Helvetica。”

所以, 美元一天 的网站的设计可能会觉得冷和无菌如果设置在Helvetica,立刻感觉有趣,活泼和独特的梗概。 当然,当每一个网站都使用相同的字体,那么新鲜。 但是现在梗概仍然感到兴奋。

新公司物色

新公司物色 是一个网站,有很多好的事情在部门类型,但是感觉事情不知怎么没有一起在设计和开发阶段之间。



在第一印象上,板衬线 Jubilat 看起来美妙的搭配 开放无 在著名的英雄图形。 一个温暖和弯曲板脸加上严肃的人文主义使得一些坚实的品牌。 然而,仔细观察,你会发现另一个无衬线, 比邻星新星 ,用于导航。 然后下面,Arial用于身体副本。

如果您已经导入无开放,那么为什么不使用它的副本吗? 和它有一个巨大的范围的权重。 为什么是一个独立的无衬线字体家庭所需的导航?

其余的网站似乎是偶然Jubilat、比邻星新星,开放无和Arial,没有明确的使用建立了。 这种不一致通常发生在多个设计师正在一个网站,但不是在相同的页面上。 创建一个风格指南 在项目的早期通常会避免这样的问题发生。

有才华的设计师显然是在这个项目上工作,网站还有很多赞赏。 但是没有一致性,混合四个字体的家庭是很难实现的。

美国股

美国股 使用一个字体, 蒙特塞拉特岛 ,他的 开源字体 是免费吗 谷歌字体 。 很多流行欠其相似的两个最流行的商业字体的最后十年,哥谭镇,比邻星新星。 虽然它肯定这两个字体有一些相似之处,我认为这是其独特的设计,有自己独特的性格。



蒙特塞拉特岛的一个缺点是,它没有一个斜体样式。 如果你身体复制在一个没有斜体的字体,你将最终 人造斜体 。 复制这个网站非常少,不过,我注意到只有少数情况下发生这种情况。 因此,尽管这不是“适当的”版式,这不是很明显的在这种情况下。 无衬线通常处理人造斜体比衬线。

也就是说,设计师做了一个出色的整体的一个有限的字体样式。 大写字母的文本元素组比正常略宽字符间距,这始终是一个不错的联系;慷慨的空白给房间类型的呼吸,和大胆的颜色产生强烈的对比。

挪威的雨

挪威的雨 的网站结合了经典几何无衬线 Avenir 与 运费文本 。 Avenir被选为" 最喜欢的字体主要设计师之一 从今年早些时候的一项调查显示。 “avenir”这个词的意思是“未来”在法国-类型设计的传奇 Adrian Frutiger 未来背后的几何原理,添加了一个温暖、创建Avenir有机联系。 毫无疑问这是一个最喜欢的那些真正欣赏排版。



运费文本独特的斜体减少Avenir的线条对得很好。 事实上,只有货运的斜体样式文本家庭是使用这个网站。 这不仅使类型系统一致,但保持 页面加载时间 下来。

文本的行高在页脚的感觉 小 紧了。 除此之外,这是一个很好的网站,有很多好的排版升值。

鹈鹕的书

鹈鹕的书 网站功能之间的另一个非常受欢迎的字体设计师, 布兰登的 。 这实际上是布兰登的特殊文本版本的,叫布兰登文本。 布兰登的普通版本的设计更显示的脸,这意味着它并不适合长段落的文本。 布兰登文本有一个更高的x坐标和优化身体副本。



有趣的是,这个网站仍然使用布兰登文本显示面临比身体副本,这是 运费文本 。 布兰登文本仍然在逃大小看上去不错,但不是那样迷人的原始布兰登怪诞,因为它更缓和了和保守。 货运文本是最清晰的衬线之一,所以这是一个很好的选择长段落的文本” 在线阅读 ”一节。 加上微妙的纸纹理,排版真的让它觉得你正在阅读一本书。本文由北京网站建设公司传诚信翻译传播,转载请注明!

简单的口香糖

由于web字体,匹配的字体设计在产品的物理包装排版在制造商的网站正变得越来越普遍。 简单的口香糖 选择 高谭市 随着品牌字体,保持其身份一致线上和线下渠道。



这个网站也是一个很好的例子,一个字体是如何有时所需要的一切。 通过使用各种权重的高谭市和设置标题大写,仅仅只有一个口香糖创造了一个很清晰的层次结构字体。

页眉和页脚都是png的标志,所以他们失去了清新和可伸缩性的网络类型。 使用web字体标志并不总是可行的,特别是如果你需要大量的控制字距调整;然而,一个 SVG图像 通常比一个PNG在这种情况下,因为它可以扩展,同时保留其酥脆。

结束

希望上面的示例演示如何大的字体选择对设计产生影响。 这里有几个关键外卖:

  • 如果你要使用多种字体,然后开发一个一致的类型系统和坚持下去。

  • 当设置的身体副本,选择一个字体,定期、斜体、粗体和粗斜体样式。

  • 如果你要去一个受欢迎的字体,试着搭配使用更少的字体让设计感觉与众不同。

  • 创建一个在项目早期风格指南,以确保一致的使用的类型在你的团队成员。

  • 使用不同的字体,而不是类似的。

  • 避免显示内文的面孔。 字体设计的目的。

  • 不要害怕只使用一个字体的家庭。 你可以与不同的权重建立层次结构和风格来自同一个家庭。

  • 如果你的商标允许,去网络类型或SVG图像,以确保易碎和可伸缩性。

跟上最新的网页排版

如果你和我一样痴迷于类型,然后到我这边的项目 Typewolf 更漂亮的字体设计的例子。

技术说明: 这些截图是在Mac上Safari。 字体渲染 不同浏览器浏览器,因此您所得到的结果可能有所不同。

本文由北京网站建设公司传诚信翻译传播,转载请注明!

  • 相关推荐
  • 大家在看
客户服务
咨询热线

010-62199213

24小时咨询热线

139-1050-5354