网页设计中排版的基本观点

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

网页设计是如此重要为了确保一个站点拥有良好的用户体验,它的每一个方面都会对站点的可用性产生巨大的影响。其中,排版是一个经常被忽视的方面,但它是设计中不可分割的一部分网页设计公司不应该被忽略。想想网页上字体设计的各种不同用途,从大标题、粗体文本到正文中较小的文本,你很快就会意识到,它不仅是网页设计的关键部分,而且是艺术和科学的纯粹结合。

从那以后,我们取得了长足的进步互联网的开始但是印刷术的使用在今天和当年一样重要。

字体设计基础知识

字体设计基础知识排版是在设计中使用字体。印刷术是通过对字体、大小、颜色、布局、对齐和其他影响页面字体设计的因素进行深思熟虑和深思熟虑的选择来创造更大的意义。字体有两种主要的分类:衬线字体和无衬线字体。

衬线字体在尾部加衬线或额外的装饰;有些人称它们为脚或尾巴。字体设计基础知识无衬线字体没有衬线;在每封信的末尾都没有找到额外的细节。字体设计基础知识

Web排版需要考虑的事情

在印刷和网络上处理类型有很多不同。对于网页上的文本,需要考虑的是对比度、颜色、可读性和大小。显示器屏幕上的颜色是由光线产生的,考虑对比度变得更加重要,因为在对比度较差的情况下看和阅读文本会很费劲。

白色背景上的黑色文字最容易阅读,因为它提供了最大的对比度。色彩理论颜色的选择在网页排版中扮演着重要的角色。无衬线字体已经被证明是更容易在网上阅读的正文副本因为衬线使眼睛更难以跟随,而印刷文本的情况正好相反。

尽管增加了字体的大小和行间的间距,无衬线字体仍然可以很好地应用在网页的正文中。衬线在标题和标题中非常好用,因为它们给标题赋予了特殊的重音,而且衬线字体在处理少量文本时很容易阅读。在选择字体样式时,大小是一个重要的考虑因素。

太小的文本很难阅读,但是太大的文本会占用太多的空间。找到一个适合你的设计并且容易阅读的尺寸。

控制字体

有很多设置可以控制字体在网页上的显示方式。如前所述,字体大小当然很重要。三个最常用的度量单位是:em、百分比(%)和像素(px)。

在CSS中声明字体大小很简单,下面是一个段落元素被分配为1em的例子。

P {font-size: 1em;}

Em是一种广泛应用于网页设计的字体测量形式,因为它可以很好地缩放,可以给你更好的尺寸增量(例如1.35em)。像素是相对于屏幕分辨率进行测量的,所以你只能使用整数(例如:

2 px)。许多人喜欢使用百分比来表示字体大小,因为这让用户可以控制字体大小。大小由浏览器的字体大小设置决定。

字距和前导也可以用CSS控制。字距是字符之间的空格,可以用字母间距财产。前导可以使用CSS属性来控制,行高

这两个都是控制文本外观的好方法。其他可能的和不太受欢迎的测量单位是:

  • 点(pt)
  • 异食癖(pc)
  • 英寸(中)
  • 厘米(厘米)
  • 毫米(mm)
  • x空间(例)

使用pt非常适合打印样式表,因为它们是一种打印度量单位。点不应该在你的网页中使用,因为在使用点时,浏览器之间有很大的差异;Mac OS电脑显示的文本比PC电脑要小25%。

网络安全的字体

网络安全的字体什么是网页安全或网页标准字体?这些字体由在大多数计算机上可用的少数几个字体组成。这就是目前在CSS2规范下限制网页字体选择的原因。

选择web安全字体可以确保更好地控制文本在所有浏览器和操作系统上的外观。对于最流行的字体的共识是:

  • Arial (Mac OS对应的字体是Helvetica)
  • Times New Roman (Mac OS对应版本为Times)
  • Verdana
  • 乔治亚州
  • 快递

其他受欢迎的字体:

  • 影响
  • Lucida控制台(Mac OS版摩纳哥)
  • Lucida Sans (Mac OS对应的是Lucida Grande)
  • Palatino
  • Tahoma(相当于Mac OS的Geneva)
  • Comic Sans
  • 抛石机女士

当使用这些字体时——尤其是第二个列表中的字体——在CSS中包含一些选项是一个好主意,下面一节将对此进行解释。

设置你的字体

有几种方法可以选择在你的网站上显示字体。如果你使用的是web安全字体,你可以通过CSS声明它,比如下面的例子:

font-family:宋体;

重要的是要包括几种字体,以防有人没有你的首选。这为用户的浏览器提供了依靠。

这个字体列表被称为字体堆栈

用CSS3重新定义“web安全字体”

当前的CSS3specs允许您从任意授权的OpenType或TrueType字体中选择。你可以用@font-face,示例如下:

@font-face {font-family: "Journal;src: url (journal.ttf)格式(“truetype”);} h1 {font-family: "Journal", sans-serif;}

字体替换工具

如果您不确定是否使用,有几种字体替换方法可供您选择@font-face在你的设计。

Cufon

Cufon是一个非常受欢迎的字体替换工具,因为它可以轻松地整合到网站中。在他们的网站上可以找到大量的文档,以及输出你需要的代码的文本生成器。尽管这是一个很好的、可靠的解决方案,但它也有它的缺点—目前由Cufon呈现的文本用户无法选择。

Cufon

sIFR

sIFR是一种基于flash的文本替换方法,和Cufon一样好用。你需要Flash为你的网站创建一个字体文件。它最好用于标题或非常小的文本块,因为如果你在网页上大量使用它,加载时间可能会延长一点。

缺点是,如果浏览器中没有启用Flash,它就不能工作,但sIFR与Cufon的优点是文本是可选择的。sIFR

网络排版错误

网络排版错误排版缺乏一致性是新网页设计师犯的最大错误之一。字体属性最好是全局控制的,通过CSS设置所有页面主体元素的字体家族、大小、颜色、行高和粗细是一个很好的做法,比如下面的例子:

体{字体:1em/1.3em Helvetica, Arial, sans-serif;颜色:# 000;}

你也应该为h1, h2和h3全局设置标题样式。链接样式也应该全局设置。选择太相似的字体不是一个好的选择,应该通过仔细查看字体的风格和网站的设计来避免选择一些合适的东西。大多数衬线标题与无衬线字体很好地搭配在一起。

将两种无衬线字体配对有点棘手,但肯定是一个可行的选择。

一些优秀的网站排版的例子

在这一节中,你会发现一系列的网站显示了有效的排版使用。

模拟

这里的排版选择与网站的主题非常匹配。字体在这个网站的外观中扮演着重要的角色,使用颜色、大小、字体、间距和布局来增强页面的整体外观。 模拟

蓝色的像素

蓝色像素使用Cufon创建粗体标题。正文字体和标题字体都是san serif,并且搭配得很好。蓝色的像素

节日北方

Cufon在这里也被用来通过排版为网站添加独特的外观。颜色,不同的大小,和一个有趣的不对称布局创造一个伟大的版式设计。节日北方

去媒体公司

一些不同的字体主题的混合创造了一个伟大的网页设计。导航栏是清晰的,用细的,大写的字体,很好地搭配了斜体衬线字体的标签和页面上的标题。去媒体公司

Kari Jobe

在这个设计中,courier—一种衬线字体—与一些无衬线字体配对。字体与设计结合在一起,创造了一种旧世界风格与新的明亮和现代的感觉。 Kari Jobe

SimpleBits

这个网站有很多类型和组织良好的固定风格,创建一个用户友好的网站。上面导航栏中的粗体大写与无衬线体文本和红色衬线标题配合得很好。 SimpleBits

我们是六世

这个博客有几种字体样式,并且利用排版来保持网站的组织性和易浏览性。我们是六世

信息拦路强盗

排版是在背景中使用的一个设计元素,创建一个伟大的背景,而不分散对主体文本的注意力。其余的文本补充了该样式,使用衬线字体使用大小适中、易于阅读的正文文本。 信息拦路强盗看看这个展示20个拥有漂亮排版的网站获取更多设计灵感和示例。

关于Web排版的其他资源

我希望你喜欢这篇关于网页设计排版的文章。排版是一个广泛的话题,但对于任何类型的设计师来说都是一个重要的概念。了解它们和站点的行业也是至关重要的。

例如,如果你是为一个房地产经纪人设计一个网站,它应该看起来非常专业,而一个艺术家的网站将有一个更悠闲和开放的设计。排版在网页设计美学中扮演着怎样的角色?当你设计一个网站时,你应该花多少时间在排版上?

相关内容

WebFX职业

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

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