20个网站与美丽的排版

WebFX总统。Bill在互联网营销行业拥有超过25年的经验,专长于搜索引擎优化、用户体验、信息架构、营销自动化等。William在Shippensburg和MIT的科学计算和教育背景为MarketingCloudFX和WebFX的其他关键研究和开发项目提供了基础。

在网页设计中,排版在确定网站的基调、主题和信息方面起着不可或缺的作用。例如,你可以通过分别选择使用无衬线字体或衬线字体来传达网站对现代或传统的关注。您可以通过改变字体的颜色、行高、样式和大小来引起对内容特定部分的注意,并减少对其他部分的强调。

一个有效的字体调色板不仅使设计具有吸引力,而且有助于内容的可读性和可用性。在这个集合中,你会发现各种各样的网站展示有创意的而且功能使用的排版。

1.杰森·圣玛丽亚

Jason Santa Maria -屏幕截图。 Jason Santa Maria -屏幕截图。《杰森·圣玛丽亚》的个人网站,排版选择和样式在极简主义设计中起着很大的作用。文章标题很大,能让你立刻注意到它们。sIFR用于多个地方(如页脚标题),以允许使用非web安全字体,而不使用图像作为文本。

2.极乐世界烧伤

Elysium Burns -屏幕截图。 Elysium Burns -屏幕截图。极乐世界烧伤注入大,粗体,无衬线字体与传统衬线字体创建一个惊人的设计。CSS图像背景用于文章标题和网站标题。

3.

不错的屏幕截图。 不错的屏幕截图。使用干净的、间距良好的字体来形成一个漂亮的、可读的设计。

4.网页设计分类

网页设计分类账-屏幕截图。 网页设计分类账-屏幕截图。网页设计师和开发人员亨利琼斯结合使用衬线和无衬线字体创造了一个独特的网页设计。的设计网页设计分类用大号字体展示读者最近的评论,强调这不仅是设计中的功能元素,也是创意的目的。

5.Web应用程序的未来

Web应用的未来——屏幕截图。 Web应用的未来——屏幕截图。Web应用程序的未来网站使用各种大而粗体的文字与明亮的颜色。主导航的字体是粗体,负的字母间距和较短的行高,创建一个紧凑和独特的基于文本的导航菜单。

6.VigetInspire

VigetInspire -屏幕截图。 VigetInspire -屏幕截图。 VigetInspire -屏幕截图。VigetInspire博客有一系列华丽的字体使用。较大的内容文本行高值允许他们使用较小的字体,而不牺牲可读性。

7.Diaroogle.com

Diaroogle.com -屏幕截图。 Diaroogle.com -屏幕截图。Diaroogle.com是一个在网页设计中同时使用serif和sans serif字体同时保持紧凑和互补的很好的例子。搜索输入框使用了一种书法字体,使它脱颖而出,但仍然不唐突。

8.早间新闻

晨报-屏幕截图。 晨报-屏幕截图。在极简设计中,版式在设计的布局和主题中扮演着重要的角色。早间新闻使用干净和适当间隔的字体和微妙的颜色来创造一个干净和简洁的氛围。

9.有序列表

有序列表-屏幕截图。 有序列表-屏幕截图。有序列表利用各种大的,大胆的大小和颜色来恭维相当黑暗的背景。通过使用CSS背景图像作为标题,使用的字体可以是不安全的字体,同时仍然保持网站的可访问性和索引性。

10.文字是图片

文字是图片-屏幕截图。文字是图片通过使用排版作为主要设计元素,保持网站名称的真实性。衬线字体的简单样式设置可以设置经典的外观和感觉。

11.麦奇费舍尔

megan Fisher -屏幕截图。 文字是图片-屏幕截图。麦奇费舍尔在她的个人网站中使用各种衬线字体和样式。网页设计左上角的悬挂标签图像可以迅速告诉访问者他们在哪里;在这种情况下,使用一种独特的字体可以将用户的注意力吸引到小标题上。

12.《纽约客》

纽约客-截屏。 纽约客-截屏。《纽约客》把他们杂志的商标字体在网上,维护他们的品牌在印刷和网络媒体。衬线字体的使用给读者一种《纽约客》是传统的、历史悠久的杂志的感觉。

13.黑色房地产葡萄园

黑色庄园葡萄园-屏幕截图。 黑色庄园葡萄园-屏幕截图。在不与非主流和地下类网站联系起来的情况下,使用黑色背景是一个困难的壮举。黑色房地产葡萄园能够使用黑色背景(他们的品牌颜色)-同时仍然保持一种复杂的感觉-通过使用大的,粗体衬线字体。使用高对比度的颜色(白色)作为前景色允许更好的可读性。

14.广告美联储MN

Ad馈送MN -屏幕截图。 Ad馈送MN -屏幕截图。 Ad馈送MN -屏幕截图。广告美联储MN成功地在设计中混合无衬线和衬线字体。在设计的右上角有一个简单明亮的导航菜单,提供了一个有吸引力和紧凑的主导航方案。侧边栏功能图像替换标题,使他们可以利用非网络安全字体,同时仍然保持可访问性和索引性。

15.多么可爱的名字

多么可爱的名字-屏幕截图。 多么可爱的名字-屏幕截图。 多么可爱的名字-屏幕截图。多么可爱的名字是一个简单的web应用程序,帮助用户根据关键字(“标签”)为他们的宝宝选择一个名字。关键词被安排在标签云更受欢迎的标签比不受欢迎的标签更大更大胆。

16.斯汀安杰森

Rustin Jessen -屏幕截图。 Rustin Jessen -屏幕截图。斯汀安杰森他的网站是极简主义的一个原因:引导读者的注意力到他的美妙的艺术作品。

17.亲爱的树

可爱的树-屏幕截图。 可爱的树-屏幕截图。亲爱的树不同字体样式和大小的运用对设计主题有很大的帮助。

18.我喜欢字体

我爱排版-屏幕截图。 我爱排版-屏幕截图。网站名为"我喜欢字体,难怪网页设计在字体的选择和使用上非常谨慎。

19.一个列表

分隔列表-屏幕截图。 分隔列表-屏幕截图。一个列表其极简主义设计的核心是排版的吸引力和功能性应用。足够的行间距使内容的文本更易于阅读,不同颜色的标题和标题在同一主题的文章之间创建了一种视觉关系。

20.集体观念训练

集体创意训练-截屏。 集体创意训练-截屏。在设计的右上角有一个漂亮的即将举行的活动部分,展示了他们对排版的细致关注。

让我们谈谈类型

有什么有趣的事情要分享吗网页设计中的排版?你最喜欢什么字体?你知道有哪个网站的版式很棒,但没有在这里推荐吗?

请在评论区和我们一起分享。

相关内容

WebFX职业

加入我们的使命,为全球企业提供行业领先的数字营销服务——同时建立您的个人知识和个人成长。

我们招聘! 视图30 +职位空缺!