美文网首页Coolsite360响应式网站建设
网页基础:网页设计中美丽的字体

网页基础:网页设计中美丽的字体

作者: c9ad3e5022b1 | 来源:发表于2018-05-25 10:29 被阅读2次

一个伟大的网站从美丽的排版开始。虽然突破偶尔的规则是很好的,但有时候回到做出伟大印刷术的原则是很好的 - 以及如何创造它。

这是一个重要的更新,可以帮助您重新思考项目,考虑采用新方法,还是回到更简单,更简化的设计。

所以今天,我们忽略了趋势和打破规则的方式,将重点放在排版理论上,以及“规则”如何成为创造惊人类型的重要指南。

大小和层次结构

大小事项。在屏幕上创建可读排版大纲时,大小可能是最重要的因素之一。微小的文字可能会令人震惊,难以看清。超大文字可能会以奇怪的方式突破线条并造成混乱。

可读排版有几层层次结构,以告诉用户第一,第二等读什么。有一个明显的规模,所以正文文本是整个设计的一个尺寸,标题是另一个尺寸,突破和小标题也有自己的规格。

跟踪和Kerning

经常感到困惑,跟踪和字距并不是一回事。克宁是调整一对字母之间的空间。跟踪是调整整个字符集之间的空间,例如段落或对文本块进行整体调整。

通常将Kerning应用于各个元素,以创建精确度并增强大文本的可读性和样式。跟踪通常用于收紧身体副本中的松散字体。

限制字体

太多的字体可能会令人无法抗拒和震撼。对于大多数项目来说,两个或三个字体就足够了。

选择一个固定类型选项的关键是选择一个风格变化丰富的类型家族。大多数高质量字体都带有多种样式 - 粗体,常规,斜体,浓缩,黑色等。通过选择具有多个选项的字体,您将拥有多种用途的权重和样式。(如果要将整个设计保留在单个字体系列中,某些系列甚至包括衬线和无衬线选项。)

混合和匹配样式

当你选择字体时 - 无可否认,这可能是许多设计项目中最难的部分 - 可以选择两种不同类型的字体,甚至是首选。

最常见的配对是衬线和无衬线。但是你不必拘泥于此。

在配对不同的样式和字体时,请查找具有类似x高度的字母(查找具有相同垂直小写“x”大小的字符集)以及碗的形状(封闭字母(例如“o”)内的空格)。

这些细节可以在字体感觉如何以及用户阅读文本的容易程度方面产生很大的差异。使用不同风格的类似字母仍然具有视觉熟悉性,可以使所有类型更容易一起阅读。

忘记字符的理由

大多数情况下,连字符和完整的理由是不必要的。

特别是在线,这些技术可以使文本一目了然,更难以消化和理解。连字符打破了阅读体验,完整的理由常常导致难以阅读的奇怪间距。

虽然这两个要素都在某些项目中占有一席之地,但它们通常应该避免。

不改变字体

你永远不应该调整字体。不要试图让它变得更胖或更高或更薄。改为选择一个新字体。

类型设计师努力为字体创建一组一致的字符,这些字符是可读的,并且符合字体的样式。不要试图改变一组字符的外观。你不会改进它们,并且经常会在这个过程中弄乱一个类型。

如果字体的工作方式不符合您的需要,请寻找其他的东西。尝试识别类似的字体工具,它可以识别外观相似的字体,以选择另一个在您的项目中可能更好的选项。

对比

使用印刷术进行对比设计。就像您使用不同的尺寸创建层次结构一样,请考虑不同的字体粗细,颜色和样式以提供视觉效果。

色彩是创造对比最有效和最容易的方法之一。理想的对比是浅色背景上的深色文字(或相反)。有几乎无限数量的颜色选项可以帮助您实现这一目标。使用彩色和印刷字体时,请注意某些颜色组合,例如右侧蓝色的鲜红色可能非常难以阅读。寻找在光线与黑暗,活力和饱和度方面不同的组合。

当谈到对比时,简单的背景通常最适合给文本空间进行阅读。但是,如果背景包含视觉元素(如图像或图案),则会在背景和前景文本元素之间创建文字大小的凹凸。

测量事项

度量是容纳文本的容器的大小。这可以是整个文本框架的宽度,也可以是多列格式的单个列的宽度。

衡量问题是因为屏幕上的字符数量(包括空格,字形和标点符号)会影响可读性。这个概念背后的理论是,如果行太长或太短,由于从一行到另一行不断来回移动,读者可能会厌倦阅读。

印刷风格的要素: “任何从45到75个字符的文字都被广泛认为是一个满意的文本大小的单行文本面的单列页面的长度。66个字符的行(包括字母和空格)被广泛认为是理想的。对于多列工作,更好的平均值是40到50个字符。“

这对于大多数项目来说是一个很好的起点,尽管许多项目倾向于大一点的字体大小,这会使字符数落在该范围的较小端。

尽管在本书首次发布时,移动排版不再是一个问题,但多列的指南是一个可接受的起点。您甚至可以选择稍微低一点,并针对小屏幕的每行最佳35个字符。

意派Coolsite360交互式线网页编辑系统

“创意不该受技术束缚,交互可以变得简单有趣”

相关文章

网友评论

    本文标题:网页基础:网页设计中美丽的字体

    本文链接:https://www.haomeiwen.com/subject/uysyjftx.html