大同企业网站开发:10种类型驱动的网站背后的排版细节

2019.05.28 大同企业网站开发

177

是什么让人说网站有“漂亮的排版”?这不仅仅是一个使用漂亮字体的问题。好的排版就是要完善小细节。

在这篇文章中,大同企业网站开发将分析10个主要由排版驱动的网站。我会写的印刷细节,使设计伟大,我也会提到一些事情,我认为可以使类型上的网站更好。

乔尔·欧文·希耶罗

大同企业网站开发

Joel的网站使用了布兰登怪诞与板条衬线成对阿黛尔。大写的Brandon怪诞的较小的部分增加了少量的字母间距,这在设置大写时总是很不错的,特别是在较小的大小时。

我还喜欢在项目详细信息页上如何在两列中设置类型。我见过类似的项目组合设计,其中的描述复制跨越了整个项目图像的宽度,这可能会阻碍太长的线段的可读性。

好杂志

好杂志使用诺瓦和货运文本作为他们的两种主要字体-这两种字体在过去的一两年里都出现了巨大的流行。第三种字体,贸易哥特式,用于导航和小标签。第四种字体,“卫报埃及”,也用于引号。四种不同的字体对于一个站点来说是一个很大的用途,但是,只要使用是一致的,它仍然可以很好地工作。

对我个人来说,使用新比邻星感觉有点不合适。“浓缩贸易哥特式”非常适合,因为它反映了好的标志。然而,一些“哥特式”风格更像本顿桑斯也许会比新皮西玛更适合。

领导袋公司

优雅货运文本是LeadBag公司网站上使用的主要字体-这是吸引父母购买425美元尿布袋的完美字体。货运实际上包括一个特殊的显示版本,货运显示,这意味着在大尺寸时看起来更精致一些。

大标题类型可能看起来更好一些与其设置,而不是文本剪裁,这是专为设置正文副本。古怪的几何无衬线布朗完全以大写(字母间距较小)设置,与运费形成了良好的对比。

结构设计

尤弗斯是Strichpenkt设计网站上使用的主要字体。乍一看,Univers看起来很像Helvetica。然而,仔细观察,你会发现许多字符的差异,如“a”,“G”和“K”。无论您是否注意到这些差异,它仍然立即给设计一个比无处不在的Helvetica更独特的感觉。

世纪教科书是分散的,但我希望看到它使用更多,因为它做了一个很好的组合与Univers。有少量的贸易哥特式混合在一起,但也许其中的一个浓缩的大学削减会更有意义。

怡和家具

阿帕斯库是目前最时尚的网页字体之一。在我的副业上,灰狼,它是最有特色的字体之一。怡和家具米勒一种漂亮的苏格兰罗马字体,我认为这是一个非常有趣的字体配对。

我对这个网站唯一的抱怨是设置在照片上方的白色文本-在一些地方,特别是在主页上,文本几乎无法阅读,因为它完全与背景融为一体。我愿意在设计模型中使用暗照片,这与白色的照片形成了很好的对比,然后在经过设计批准后,其他的照片被添加到了不太有效的照片中。

奎因

奎恩诺瓦带着PT Serif,可以从谷歌字体。这个重量轻的新比邻星看起来很棒,它的尺寸很大,就像这样。然而,我觉得其他类型的网站运行有点小的一面。

特别是主体复制类型设置为12 px。16-18 px的身体拷贝尺寸在网络上更常见,所以任何比它小得多的东西都会感觉很小。我还认为,ProximaNova集的大写字母可能会受益于一个小的字母间距。

萨博克

Saboc用途Neutra面作为他们网站上唯一的字体。Neutrafaces有一种类似的感觉布兰登怪诞但在网络上使用得更多,更不用说了,所以我觉得它非常令人耳目一新。

我认为这种字体风格使一个很好的匹配有趣和简单的插画风格在网站上使用。身体复制是中心对齐,有时会感到尴尬的网站,然而,这种类型的网站与少量的拷贝,我认为它很好。

约翰·威尔逊

在约翰·威尔逊(JohnWilson)的网站上称这种类型为最低限度是一种低估。纽泽特这是唯一的字体,它只在一个重量和主要在一个点的大小使用。该网站没有使用Neuzeit的粗体权重,而是使用了更深颜色的图书权重。

这种最小的设计看起来很容易完成,但实际上需要排版才能很好地发挥作用。Neuzeit是一个完美的字体,它是一个强大的几何无衬线,有几个独特的特点,如大写“J”上的条形。

Neybox交互

NeyboxInteractive是另一个网站坚持单一字体的好例子。阿文尼已经成为网络上一种极受欢迎的字体-实际上它被选为最受欢迎的字体。最喜欢的字体在我对顶尖设计师的调查中。

它看起来很棒在这个网站设置在白色背景下的彩色背景。我唯一的批评是博客部分的正文的长度。随着浏览器窗口的大小,宽度不断扩大,因此在大屏幕(像我的屏幕)上,副本更难读取。

代码与理论

代码和理论使用浓缩版的哥谭这是近十年来最受欢迎的字体之一。浓缩版不太受欢迎,所以它使设计感觉更有特色。的显示版本米勒用于一些大型新闻标题。

Miller也有一个文本版本,用于设置正文副本,但是代码和理论选择使用标准字体佐治亚州相反。实际上,佐治亚州有许多与米勒相同的苏格兰罗马特色,因此它与不需要加载额外网页字体的额外好处相匹配。

结束语

大同企业网站开发希望上面的10个例子展示了小排版细节的重要性。关注这些细节几乎肯定会改善你的下一个网站设计项目。

 


最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP