`

[iA 旧文] 网页设计工作的 95% 在于字体排印

 
阅读更多

网上 95% 的信息是文字。从逻辑上讲,网页设计师自然应该充分掌握型塑文字信息的技巧,换句话说,就是字体排印(typography)技巧。


信息设计 = 字体排印

1969 年,著名瑞士字体排印师埃米尔·路德写过一段关于当年的印刷品的话,用来描述今天的网站也适用:

我们正被印刷品的洪流淹没,个体作品的价值正被稀释,因为被诱惑包围的现代人根本不可能读完所有印出来的内容。字体排印师的工作就是把印出来的海量文字分拣、组织、诠释,从而让读者更容易找到自己感兴趣的内容。

只要稍微发挥一下想像力(把印刷品换成互联网),以上文字就可以视为对信息设计师的工作内容描述。信息设计师的工作恰恰就是「把印出来的海量文字分拣、组织、诠释,从而让读者更容易找到自己感兴趣的内容。」

与微观意义上的字体排印(字体与间距的细节)相比,宏观字体排印(整体的文字排版结构)涵盖了今日被称作「信息设计」的诸多方面。今天的信息设计师做的正是三十年前的字体排印师的工作:

字体排印的任务很明确:通过书写文字传递信息。无论出于何种理由和考量,字体排印的这一功能都不可忽视。无法阅读的印刷品是一件没有目的的产品。

对字体排印进行优化就是对易读性、亲和性、可用性(!)、以及整体的视觉平衡进行优化。把一块块的文字与图片混排,这难道不是平面设计师、可用性专家和信息架构师的工作吗?那么为何这个话题总是被忽略?

字体太少?分辨率太低?

我们最常听到的关于网页字体排印的论点——或者说抱怨——就是网页上可用的字体太少。另一个论点是屏幕分辨率太低导致像素化 / 抗锯齿字体难以阅读。

可用的字体太少是一个不相干的问题:意大利文艺复兴时期的字体排印师只有一种字体可用,但他们排出的印刷品是史上最美的之一。

speciamen.gif
(图片来源:Information Architects)

字体排印师不应该过分在意有哪些字体可用的问题。事实上,选哪种字体不应是他考虑的重点。有什么字体,就用什么字体,并尽量把它用好。

选字体 ≠ 字体排印。

第二个论点也没有好到哪去。印刷品肇始之初的印刷质量远逊与我们今天用的屏幕。更重要的是,经过专业的字体排印师处理的屏幕字体完全可以很易读。

信息设计探求的不是如何使用好的字体,而是如何达到好的字体排印效果。两者截然不同。任何人都可以用字体,有些人很擅长选择好的字体,但精通字体排印术的只是极少人。

把文字当作用户介面

没错,不同的浏览器与操作系统平台显示字体的方式不一样,这很讨厌。没错,屏幕分辨率的问题让人很难专注阅读超过五分钟以上。但没办法,网页设计师的工作之一,就是确保文字在所有主要浏览器和平台上读来都同样轻松和舒心。正确的行距、字距、留白以及适当的色彩运用都能改善易读性。但这些还不够。优秀的网页设计师不仅知道如何处理作为内容的文字,他还可以把文字用作用户介面。看一眼 Khoi Vinh 的网站你就懂我的意思:

koih.gif
(图片来源:Information Architects)

此外还有一些更加有名的把文字当作介面的「非装饰性」网站:谷歌、eBay、Craigslist、YouTube、Flickr、Digg、Reddit、Delicious。你很难否定文字作为介面的必要性,它是成功设计的唯一标准。成功的网站总是既有简单的介面,也非常容易辨识。但这是另外的话题了。

分享到:
评论

相关推荐

    网页95%的设计是排版.doc

    网页设计的核心在于排版,这一观点源于Information Architects Japan的研究,原文指出"Web design is 95% typography"。尽管这个比例可能引发争议,但不可否认的是,排版在网页设计中占据极其重要的地位。在大部分...

    以图书字_中国字体排印简介借鉴.pdf

    【字体排印的重要性】 字体排印,作为可视化书面表达的一种艺术形式,其影响力远超...随着设计技术的发展和对字体排印理解的深入,我们可以期待更多富有创意和情感共鸣的字体作品在未来涌现,继续丰富我们的视觉世界。

    网页设计三剑客中文版教程之-网页设计基础借鉴.pdf

    本教程“网页设计三剑客中文版教程之-网页设计基础借鉴”旨在为初学者提供一套全面的学习路径,帮助他们理解和掌握网页设计的基础知识。在网页设计中,通常有三个关键元素被称为“三剑客”,它们分别是HTML(超文本...

    网页UI设计.doc

    95%的网页设计是关于排版的,这并非夸张。排版决定了信息的呈现方式,直接影响用户的阅读体验、易用性和吸引力。网页中的大部分内容都是文字,因此良好的排版是提升用户体验的关键。 排版不仅仅是选择字体那么简单...

    《字谈字畅》(TypeChat)是全球首家用华语制作的字体排印主题播客节目

    《字谈字畅》(TypeChat)是全球首家用华语制作的字体排印主题播客节目。此项目从其网站爬取各期的_typechat-link。此项目从其网站爬取各期的_typechat-link.zip

    浅谈平面设计和网页设计.doc

    平面设计和网页设计都是创意和技术的结合体,以视觉为媒介来传达信息和理念。两者在艺术创作、电脑技术、数字技术的运用上有共通之处,但也有各自的特点。 首先,平面设计主要涉及印刷品,如海报、宣传册、杂志、...

    解决网页设计一定会遇到的210个问题.rar

    网页设计是数字时代的核心技能之一,它涉及到许多技术、美学和用户体验方面的知识。这份名为"解决网页设计一定会遇到的210个问题"的压缩包文件,显然是为帮助设计师们应对在网页设计过程中可能遇到的各种挑战而准备...

    帮同学做的网页设计作业,仿西邮官网.zip

    【标题】:“帮同学做的网页设计作业,仿西邮官网.zip”揭示了这是一份针对网页设计的学习项目,其中包含了模仿西安邮电大学(西邮)官方网站的设计元素和布局。在网页设计领域,模仿知名网站是一种常见的学习方法,...

    行业文档-设计装置-两夹一式外语书刊的排印方法.zip

    《两夹一式外语书刊的排印方法》是一份深入探讨印刷行业的专业文档,主要关注的是外语书刊的特殊排印技术。在设计和制作过程中,这种“两夹一式”的方法对于确保外语书籍的可读性、美观性和印刷质量具有重要意义。...

    网页设计师

    网页设计师是互联网行业中不可或缺的角色,他们负责创建和维护吸引人的、功能齐全的网站,为用户提供卓越的在线体验。网页设计不仅涉及视觉美学,还包括交互性、用户体验和网站性能等多个方面。下面将详细介绍网页...

    跨媒体编排2022平面设计课程-视频教程网盘链接提取码下载 .txt

    平面设计师可能会利用字体排印、视觉艺术、版面(page layout)、电脑软件等方面的专业技巧,来达成创作计划的目的。平面设计通常可指制作(设计)时的过程,以及最后完成的作品。 视频大小:1G

    设计书.zip

    虽然没有提供具体的标签,我们可以假设这个压缩包可能涵盖了平面设计、UI/UX设计、网页设计、产品设计等多种设计领域的知识。以下是对这些设计领域的一份详尽概述: 1. 平面设计:平面设计是视觉传达的艺术,它包括...

    平面设计完全手册拆书稿.pdf

    8. PC端网页 UI 设计:PC端网页 UI 设计是平面设计中一个重要的组成部分,包括网页设计、界面设计等。 9. 移动端 UI 界面设计:移动端 UI 界面设计是平面设计中一个重要的组成部分,包括手机APP设计、平板电脑设计...

    whatfont.rar

    这个插件专门设计用于提升用户的网页浏览体验,特别是对于那些关注网页设计和字体排印的用户。它提供了实用且易于操作的功能,帮助用户识别在网页上使用的字体类型。 描述中提到,WhatFont是一个专业的Chrome网页...

    欧美风格音乐网页(共三个页面)

    本资源包名为“欧美风格音乐网站”,包含了三页具有欧美风格的音乐网页设计。这些页面的设计旨在体现一种独特的音乐文化氛围,融合了西方的审美和音乐元素,为用户带来沉浸式的音乐体验。下面将详细探讨其中涉及的...

    BR-050psd网页模板_网站psd效果图切片_PSD欧美日韩风格前端页面.zip

    网页设计与前端开发是IT行业中不可或缺的组成部分,而PSD(Photoshop Document)文件则是设计师进行网页设计时常用的一种格式。本压缩包“BR-050psd网页模板_网站psd效果图切片_PSD欧美日韩风格前端页面.zip”包含了...

    web界面设计期末考试资源专用

    【标题】"Web界面设计期末考试资源专用"涵盖了多个与Web界面设计相关的知识点,这门课程旨在培养学生在网页设计和开发中的创新思维和技术能力。在准备期末考试时,学生需要深入理解并掌握以下核心概念: 1. **网页...

    Joppatowne

    标题“Joppatowne”很可能是指的是一种特定的字体设计,这在描述中得到了进一步的确认,因为标签是“字体”。在这个情境下,我们主要关注的是“Joppatowne”字体及其特性。 “Joppatowne”字体可能是一款独特设计的...

    Phattphreddy

    同时,Web设计师还可以将这种字体转化为Web字体格式(如WOFF或SVG),以便在网页上使用并确保跨浏览器兼容性。 此外,了解字体排印的基本原则也对有效使用Phattphreddy有所帮助。比如,与更细的无衬线字体搭配可以...

Global site tag (gtag.js) - Google Analytics