所在位置:首页 > 设计资讯 > 企业VI设计 > 网站vi设计公司研究了前1000 个网站的字体后的发现

网站vi设计公司研究了前1000 个网站的字体后的发现

设计是一个高维问题:我们可以为单个标签设置数百个CSS 变量。很难知道从哪里开始。整个过程可能会开始感觉像是在一个令人着迷但最终是异国风景的令人眼花缭乱的随机漫步。大多数设计师似乎依靠直觉和多年来之不易的经验来做出设计判断,这对直觉上受到挑战的新手没有帮助。因此,我从数据科学家的手册中翻出一页,开始为我称为设计数据

 

网站vi设计公司爬取了超过一百万个主页并保存了它们的HTML 和CSS 文件,以分析网站的各个方面,从图像和布局到字体和颜色。对于本文,我们将查看作为桌面查看的前一千个网站(有关详细信息,请参阅详细信息和注意事项部分)。我

 甚至使用puppeteer来解析javascript 渲染的网站。目标是提供一些数值洞察力和基准,以更好地定量地理解网页设计世界。


网站vi设计公司研究了前1000 个网站的字体后的发现-探鸣品牌设计公司.png 


注意——这些发现并不打算成为一个严格的风格指南:毕竟,设计是一门丰富且以人为本的学科。我们永远不应该忘记这一点。仅仅因为85% 的在线字体是无衬线字体(见下文)并不意味着您只需要使用无衬线字体。但是,如果您确实选择了反抗并采用衬线字体,那么您真正脱颖而出有多少呢?什么时候使用衬线字体更常见?

 

因此,事不宜迟,让我们深入了解网站vi设计公司的第一篇博客文章,这都是关于字体的:

 

 

字体系列

 

字体选择是一个情绪化的话题:只要看看这个提案的数百条反应和数十条评论,就

 可以更改normalize.css中的默认字体系列。在字体中,也许最突出的内战是衬线字体和无衬线字体之间。谁在网络上赢得了这场战斗?得知它是无衬线字体时,您可能不会感到惊讶。平均而言,我们估计85% 的字体是无衬线字体,其余的则留给衬线字体、等宽字体和其他所有字体。我们是如何推断出来的?继续阅读以获取更多信息!

 

字体系列堆栈的中值深度为4:一种主要字体和三种备用字体。

 

首先,关于font-family 如何工作的基本提示:记住font-family CSS 属性不仅仅是一个单一的值,而是一个优先排序的字体列表。浏览器尝试第一个字体,如果不可用,它会处理字体系列堆栈中的后续字体,直到找到系统支持的字体。设计师的最佳实践是首先列出他们的预期字体,并列出随后的备份字体列表,这些备份字体试图保留该意图,同时降低保真度但增加流行度。那么多少备份字体就足够了?

 

字体系列堆栈的中值深度为4:一种主要字体和三种备用字体。但我们经常看到深度为6(第75 个百分位)甚至12 个(第99 个百分位)的堆栈。一个网站的字体堆栈深度甚至为21!下面是深度分布图:

 

 

那么使用什么字体呢?下面是整个堆栈中使用的前10 种字体的列表。请注意,这些不一定是显示的字体——它们往往是特定于网站的。相反,我们看到了最常见的备份字体:

 

十大网络字体</a>

 

在前10 种字体中,前9 种都是无衬线字体。通过对这些最常见的“包罗万象”字体进行分类,我们可以自动推断出第一个字体在堆栈中的广泛属性,即使它们往往是高度特殊的。因此,上面关于无衬线字体流行的统计数据。

 

但我们可以走得更远!上述统计数据是整个段落(P) 和标题(H1、H2 等)标签。如果我们按标签类型查看无衬线字体的比例,您会看到一个截然不同的故事。事实证明,标头不太可能是无衬线的,但是这种可能性会降低标头的从属程度。

 

因此,无衬线的概率范围从H1 的58% 到H2 的70% 到H5 的89% 和P 的93%。如果您喜欢使用serif,那么您将在更好的公司中将其应用于标题而不是段落标签!(有趣的是,这似乎符合传统的设计理念,即较大的字体比较小的字体更适合衬线。

 

但如果网站vi设计公司考虑字体配对,情况就会变得更加复杂。下面,我们分解了serif/sans-serif 与P/H1 标签的每个2X2 中的概率。我们可以看到那些带有无衬线段落的衬线标题是反衬线的两倍多。换句话说,平均衬线段落与衬线标题配对的时间约为51%,但平均衬线标题仅与衬线段落配对的时间为36%。最后,大多数字体都是无衬线字体似乎符合传统观点,即无衬线字体是网页设计的基础


最基本的问题之一是我的字体应该是什么大小?较大的字体更易于阅读和访问。但是较小的字体具有更大的信息密度。我们如何平衡这些竞争因素?我们计算了数字,结果显示中值字体大小为14 像素。但是,您很可能会看到16 像素的字体;12px 甚至18px 并非闻所未闻。也就是说,很少低于10 像素或高于24 像素。


当网站vi设计公司在衬线和无衬线之间进行分解时,情况会有所不同。事实证明,无衬线字体往往更大一些。虽然无衬线字体的中值大小仍为14 像素,但衬线字体的中值大小为16 像素。您可以在它们的尺寸分布中看到这个更大的尺寸:


网站vi设计案例.jpg 


标头

 

标题是通过促进页面扫描来帮助组织文本的基本元素。因此,它们通常具有较大的字体大小和较重的字体粗细。但是设计师选择哪一个呢?查看数据,我们将标题标签与最大的文本进行比较。我们发现设计师更常选择使用更大的尺寸而不是更重的重量(94% 对82%),但他们经常同时使用两者(76%)。(如果您想知道,我们正在使用最大的标头标签,因为有些网站不使用H1,而是选择将H2 或其他标头作为最大的标头。)

  

让我们放大字体粗细。毫不奇怪,大多数段落标签都是正常的(400 字体粗细),而多个标题粗细是粗体(700)。请注意,标题标签的中等(500) 和半粗体(600) 字体粗细或段落标签的浅(300) 字体粗细也很常见。

 

现在让我们看看标题字体大小。由于基线段落字体大小因页面而异,因此要调查的正确指标是标题字体大小与段落字体大小的比率。下面是我们数据集中不同页眉和段落标签之间字体大小的中值比率。我们可以看到,在中间页面上,H1 大约是P 大小的1.9 倍:所以如果P 是16px,H1 大约是30px (16 x 1.9)。副标题的比例会降低,直到我们到达H5,其中值大小与P 相同(并且可能使用不同或更重的字体来区分H5 和P)。

  

现在需要注意的是:网站vi设计公司使用了巨大的百万作为网站列表,但并非每个网页都适合程序化抓取,因此结果并不完全具有代表性。该分析仅模拟了桌面浏览器:未来,我们将考虑移动和平板电脑浏览器,它们应该会在响应式页面上产生非常不同的答案。对于这篇博文,我们只分析了大约前1000 个网站以节省时间。我们不区分外语和英语网站,也不区分不同类型的网站。显然,如果您正在为The Daily Mail 设计,那么您的外观与Medium 博客完全不同。

 

设计数据是一个对话框!我对设计师、数据科学家和更广泛的社区对设计的看法以及人们想要学习的定量见解感兴趣。我想分析和写下你觉得有趣的东西。

 


一分钟了解探鸣设计公司
好设计直接找总监谈
聊思路,理方向,谈费用,听听总监建议再做决定
相关案例
Relevant cases
点击查看更多案例

总监微信

复制成功

业务咨询 何先生

业务咨询 何先生