使用灵感和工具在网页设计中掌握排版

印刷术是最难处理的趋势之一,这就是为什么它在2010年仍将保持新鲜。在所有对可用性的呼声中,网页设计师们害怕使用新的和不同的字体。我们现在意识到,知识在排版可以应用于几乎所有媒体领域的各种形式,包括平面设计和出版界。

为了在媒体中有效地应用排版,我们需要了解它是如何发展起来的,以及周围的人是如何使之成为可能的。这不仅丰富了我们对类型使用的更深层次的理解,我们将能够更明智地选择字体。

使用灵感和工具在网页设计中掌握排版

过去,网站使用各种字体或图片作为标题。然而,时代变了,趋势发展得很快。我们看到大量的网站使用新技术和工具来增强字体。API利用率,@font-face, CSS3,以及未来可能更多的替代方案。

最常见的网页排版错误

今天丰富的资源允许我们使用各种字体来增强我们的网站。对于访问者和web设计人员来说,这是非常令人兴奋的,因为他们可以进一步研究字体的使用。

最常见的网页排版错误

图片来源:Lee | Quoteskine

网上有大量的字体可供选择,但这并不意味着所有的字体都适用于特定的设计。每一种字体的设计都有其特定的特点,针对特定的理念、目的、印象和项目设计。所以,作为设计师,我们的工作就是将字体的概念与设计作品融合在一起。

字体的选择会影响访客的第一印象

你希望访客看到它时的第一印象是非常重要的。确保访问者不了解你的网站。你想让它看起来既保守又专业吗?还是独特而有创意?现在是时候对你网站的目标受众进行研究了。一个面向年轻和有创意的受众的网站,一个面向年长和成熟人群的网站,在你选择的字体类型中起着很大的作用。

使用太多字体

使用太多的字体会模糊你想画的印象。可能发生的最糟糕的事情是,它不允许你的访问者停留在你的网站上,这被称为关注水平。此外,如果你使用的是最新和常用的技术,比如API,过度使用字体会减慢网站的加载速度。一个很好的技巧是使用最少2种,最多3-4种不同的字体。

字体比例不正确:太大或太小

除了为网站的受众提供合适的字体大小之外,我们还应该注意使用合适大小的显示字体。但是,如果您的目标受众是年轻人和老年人,那么创建函数来增加或减少文本大小是明智的。

作为设计师,我们经常面临的挑战是如何实现不同字体和大小的和谐,有时还需要图像。找到比例感和平衡感通常有助于在你的网站中创建字体的相互作用。如果你刚刚开始,还没有信心,慢慢开始使用较少的字体和大小的变化。

跟踪,字距,前导和空白是你最好的朋友,为良好的版式

糟糕的排版很容易被发现,因为跟踪、排版和引导都很糟糕。这三个工作携手帮助你实现高质量的排版,并帮助读者阅读你的内容轻松。“字符窗口”可以在大多数有创意的软件中找到,它可以帮助你调整句子或字符的空间。要有耐心,因为它需要一段时间才能有良好的间隔感。

不要让你的段落触及页面的边缘。给你的内容留出一个可接受的空白。让页眉、段落、标题、边栏和页脚都有自己的空间。这有助于页面看起来更有条理,更能吸引读者的眼球。

网站与良好的排版

本节包含一些使用良好排版的示例。

3.0 Veerle的博客

3.0 Veerle的博客

3.0 Veerle的博客

极乐世界烧伤

极乐世界烧伤

极乐世界烧伤

有序列表

有序列表

有序列表

Webstock

Webstock

快乐的齿轮

快乐的齿轮

快乐的齿轮

多么可爱的名字

多么可爱的名字

多么可爱的名字

若昂安德雷德

若昂安德雷德

若昂安德雷德

设计的智慧

设计的智慧

设计的智慧

由巨大的

由巨大的

由巨大的

Pulchry

Pulchry

Twitter开发者大会

Twitter开发者大会

Twitter开发者大会

差距医务人员

差距医务人员

差距医务人员

Cogaoke

Cogaoke

37 signals

37 signals

Fajnechlopaki

Fajnechlopaki

在线排版工具

这里有一些在线排版工具来帮助你的内容设计。

翻转典型

翻转典型

翻转典型

TypeNavigator

TypeNavigator

Typetester

Typetester

WhatTheFont

WhatTheFont

CSS类型设置

CSS类型设置

CSS类型设置

PXtoEM

PXtoEM

FontStructor

FontStructor

衬线字体识别指南

衬线字体识别指南

衬线字体识别指南

Lorem Ipsum发电机

Lorem Ipsum发电机

Lorem Ipsum发电机

Identifont

Identifont

字体的松鼠

字体的松鼠

字体的松鼠

谷歌字体Previewer

谷歌字体目录

谷歌字体目录

TypeKit

Typekit

类型图

类型图

类型图

Cufon

Cufon

进一步的资源

  • 有效的网页排版的注意事项——这是网页设计的一个重要部分,但它经常被忽视(甚至以前被我忽视)。下面是20个注意事项,在评论部分,你可以告诉我们你可能漏掉了什么。
  • 50个有用的设计工具,美丽的网页排版-今天,我们将看看50个最有用的排版工具,技术和资源,创造有效的和富有表现力的设计。我们还将学习一些动手排版工具,帮助设计师和开发人员学习如何设计他们的Web内容的样式,交互式地测试它,并立即看到变化。这些工具是伟大的实验不同的字体类型为您的网站。
  • 40+优秀的免费字体专业设计-一个提示,往往不告诉,有免费的高质量的字体。如果你是一个学生平面设计师,你可能还买不起字体,所以这可能是一个不错的选择。
  • 30个最好的网络排版资源——下面的资源可以帮助你改善你的网络排版,不管你属于哪个阵营。有创建独特的排版的工具,参考资料和文章,可以教你排版原则,和大量的灵感和新闻,让你在网页排版的状态更新。
2020-03-12 17:46
相关热门