By Rex Chen
|
May 31, 2010
《连线》app 的一页多栏设计
一切起因于《连线》(Wired)杂志的 iPad 版的推出。该 app 的推出马上得到了赞誉,被 Adobe 称为「杂志的未来」(当然也由于这次制作是和 InDesign CS5 紧密合作推出的)。然而 Information Architects(iA)发文《iPad 上的〈连线〉是纸老虎》抨击《连线》app 的设计缺陷。其中最引争论的一点是关于 iPad 多栏设计的缺陷。在 iA 看来,iPad 的屏幕尺寸和交互属性决定了它不应该使用传统报纸一样的多栏设计。理由如下:
- 多栏设计硬性分割了正文,凌乱地将文字塞满了本来就很小的 iPad 屏幕。
- 多栏设计迫使设计师使用小字号,和加多断行,使阅读路径变得曲折困难。
- 将长文断成一个个缺乏联系的文字块,这种设计增加了整个导航和交互的复杂性(究竟应上下滚动(scroll)还是左右滑动(swipe))
- 多栏设计需要更多的连字符(hyphen);如果左右对齐,每栏的文字内被迫出现众多空档,如果左对齐,右边会出现难看的文字不齐
- 多栏设计让设计师经常按印刷品的思考方式想问题,每一页的页高也变成是固定的

By Metaphox
|
May 19, 2010

Google 于五月十九日开放在线字体服务(Webfonts),正式加入在线字体提供商的行列。与我们已经介绍过的 Monotype Web Fonts、FontShop 等字体商不同,Google 此次提供的字体与其诸多既有服务一样,不出所料地完全免费。
Google 目前提供的字体共有十八种,均为目前流传较为广泛的免费字体,包括为 Android 而开发的 Droid 系列,被称为「Fonts for Scholars」的 Cardo,为代码印刷而设计的 Inconsolata,业余之作而不胫走红的 Yanone Kaffeesatz 等等;更为引人注目的是本站曾介绍过其人其事的 IM Fell 字体,此次经由 Google 声势浩大地一口气发布了十个字体族,它的介绍页面也颇费篇幅地讲述了字体背后的历史。
与我们此前介绍的 Fonts.com 所提供的服务相比,使用这些字体无需付费,也不必注册,只消通过 Google Font API 在网页的 head 区域插入一行代码,即可获得对应某个字体的、以 @font-face 形式定义的 CSS font-family 定义,继而就可以在 CSS 中如同使用本地字体一样使用它们。对于浏览器的支持情况也不错,Google 声称 Chrome 4.249.4 以上、Firefox 3.5 以上、Safari 3.1 以上、IE 6 以上均可渲染。使用 iPhone OS 和 Android 的设备目前尚不支持此项服务,不过这一功能的实现应指日可待。对于我们来说,也许唯一的遗憾就是此次发布的字体仅限于拉丁字符集。
在 Google 公布在线字体服务之后,Typekit 紧接着宣布它们此前的几周内已经与 Google 密切合作,在 GitHub 上放出了 JavaScript 开源项目 WebFont Loader ,让用户可以更进一步地控制字体的加载和渲染,也使得其他人能够在自己的网站上提供网络字体服务。此次 Google 所公布的诸多免费字体亦都被增加到了 Typekit 的字库中,所有用户都可以使用。用户还可以选择使用 Google 的 AJAX API 来调用 Typekit 的字体,这样一来在 Google 的免费服务和 Typekit 的付费服务之间切换,只需要更动一行代码。
Google 这一字体服务的显示效果可以在我们的测试页面上看到。(更新:Google 提供了自己的效果预览器。)
By Rex Chen
|
May 4, 2010
Monotype Fonts.com Web Fonts
测试页面
Monotype 今天宣布,Fonts.com 开始提供网页字体(web fonts)嵌入服务,加入了 FontShop、TypeKit 的队伍,表明网页字体将成为字体商新的利润点。
Monotype 的 web fonts 除了凭借 Linotype 拥有庞大优质的字库外,还支持超过四十种语言,包括日文和繁/简体中文,这也是我们最为关注的亮点。Monotype 声称自己研发出的专利技术可以保证体积较大的东亚字体获得理想的加载速度。在测试中,我们发现这一技术的确缓解了字体大小这个传统瓶颈对嵌入东亚字体所带来的影响。

By Rex Chen
|
May 2, 2010

VerTick 实现效果
我们的网站技术人员 Metaphox 有一天在 Twitter 上看到了 Nehan 这一使用 JavaScript 来实现日文直排(竖排)的工具,就以其为基础做出了一款 WordPress 主题:VerTick(Demo 演示)。目前这款主题已经基本完工,Metaphox 决定将它发布,以供有兴趣的人使用。同时,关于这款主题的使用细节,我们也对 Metaphox 进行了简单的采访,内文如下。

By Rex Chen
|
February 18, 2010
进行中的新设计。Image: Research Studios
BBC(英国广播公司)作为全球最重要的媒体机构之一,一直在新媒体和设计领域领先全球。从它成功的新闻网站到近年来 iPlayer 网络播放平台都成为各国媒体效仿的对象。本周 BBC 发布了新网络视觉系统的预览,阐述了宏大的新概念。两年前我们提到 BBC 的「Global Visual Language 2.0」,项目旨在为 BBC 网站提供新的统一的视觉语言。该项目使用了新的视觉系统,包括网格、字体、颜色和新的播放器等等。
两年后的今天,BBC 决定更上一层楼,决定更新这一网络视觉系统,以期成为再次媒体设计的全球标准。这次的设计试图「创造一种新的设计哲学」、「寻到 BBC 的灵魂」,以及「让 BBC 更加有区别性和识别性」。这次设计 BBC 也邀请了英国著名设计师和字体师 Neville Brody 作为顾问,由 BBC 创意总监 Ben Gammon 与 BBC 用户体验和设计部门共同完成。设计目标的关键词展现出这次设计的雄心:现代英国、时事、强势、独特、领先、综合、通用和最佳。

By Metaphox
|
February 5, 2010
以 Computer Modern 字体排印的《The Art of Computer Programming》第一卷。
现代个人计算机软件中可以进行排印或者出版准备工作的系统,以所见即所得型为主流,从早期的 Apple MacPublisher、Aldus PageMaker,到曾经非常兴盛的 QuarkXPress,以及现在的 InDesign 莫不如是,甚至连 Microsoft Word 都可以归入此类 。但是,在桌面计算机的图形化用户界面尚未普及时,字符终端上其实已经出现了优秀的排字工具。这一工具也许并不够直观,不过这或许也不失为其优点:写作者可以将精力集中于文档的内容、而非其展现形式之上;作为源文件的纯文本并不依赖于平台而存在,易于管理和版本控制;用于处理源文件的程序也可以极富扩展性。这实际上是典型的计算机程序设计理念,这样的系统也的确是出于一个计算机科学家之手——你也许已经猜我在说什么:TeX。

By Metaphox
|
January 22, 2010

于一月21日发布的 Mozilla Firefox 3.6 版本提供了对于 WOFF (Web Open Font Format) 字体格式的支持。关于这一字体格式的意义,本站之前的《字体数字化简史与 WOFF》一文已有提及,而我们今天将简单地演示 WOFF 格式的具体使用及其效果。对于网页设计者来说,使用 WOFF 格式与使用此前已经被支持的 TrueType 或 OpenType 格式在方法上并无不同,都是通过 CSS 的 @font-face 等规则完成的。首先是通过指定 WOFF 格式的字体文件之 URL 来定义一个 font-family 名称:
@font-face {
font-family: myfontname;
src: url(link/to/the/woff-font/fontname.woff) format("woff"),
url(link/to/the/ttf-font/fontname.ttf) format("truetype");
}
通过以上代码,支持 WOFF 的浏览器如 Firefox 3.6 将自动下载 link/to/the/woff-font/fontname.woff 这一字体,不支持 WOFF 但是支持内联 TTF 的浏览器则会自动下载 link/to/the/ttf-font/fontname.ttf。(Internet Explorer 两者都不支持,对应解决方案请参见这里。)由网页设计者自行决定的 myfontname 则是这些字体的代称,设计者可以在接下来的 CSS 中使用它来定义页面元素所使用的字体,例如:
#content{
font-family: myfontname, Georgia, serif;
}
此外,仅限于 Windows、Linux 平台的 Firefox 非标准 CSS 属性 text-rendering 同样可以用来控制 WOFF 的渲染方式。其可取值及对应效果是:
- auto
- 默认值。浏览器会自行猜测应该优化字体的渲染速度、可读性还是精准度。对于基于 Gecko 引擎的浏览器如 Firefox 而言,取此值也就意味着对尺寸大于20像素的文本会使用
optimizeLegibility,否则使用 optimizeSpeed。
- optimizeSpeed
- 优化速度。Gecko 将尽可能快速地渲染字体,而不保证字体的可读性和精准度。Kerning (字母间距微调)和 ligatures (连字)将被禁用。
- optimizeLegibility
- 优化可读性。Gecko 将强调文本的可读性而不是字体渲染的速度和精准度,Kerning (字母间距微调)和 ligatures (连字)也会被启用。
- geometricPrecision
- 优化精准度。Gecko 将强调字体渲染的精准度而非速度和可读性,目前其效果与
optimizeLegibility 相同。
请注意这一属性会被 Mac 平台上的 Gecko 引擎忽略,渲染效果将总是 optimizeLegibility。
具体用例如下:
/* make sure all fonts in the HTML document display in all its
glory, but avoid inadequate ligatures in class foo elements */
body { text-rendering: optimizeLegibility; }
.foo { text-rendering: optimizeSpeed; }
根据 Mozilla 的这篇文章,字体业界对 WOFF 的支持也已经开始。FontFont 甚至提供了一个免费的 WOFF 字体展示,其中除了包含本文所介绍的内容,还有 WOFF 的 MIME Type、防止字体外链的方法等。我们在这里给出一个略经修改的在线版本,当然需要使用 Firefox 3.6 来访问。Windows 用户请注意浏览时不应禁用 ClearType。
By Rex Chen
|
January 18, 2010
虽然我们关注西文,但这里有一则关于 Mac OSX 雪豹的新中文字体 Hiragino Sans GB 的英文文章,很有意思。苹果相当重视这次简体中文字体的开发,与开发公司商讨下,由大日本 Screen(大日本スクリーン)和北京汉仪合作开发。汉仪有20位设计师和20位工程师。主设计师钟女士与来自日本方面字游和 Screen 的工作人员于07年底会面。当场没有翻译,只能通过比划点头来确认总体修改方向。
新字体根据 Adobe GB 1-4 字集修改,两万九千字,两个磅值。设计根据中国标准(GB)在日本的版本上修改。中国字体的设计要求要硬朗,日本设计师猜测是否由于中国早期甲骨文和碑刻的材料影响。字体随雪豹出版,独立商业版本只在日本发行,售价580美元(近4000人民币) 。来自中国信息处理产品标准符合性检测中心的70岁检验师特地致信,称赞设计水准。汉仪方面表示这是他们第一次听说这种情况。
我们以前有文讨论苹果默认中文字体。简体字原本处理方法是 STXihei,但日文 Hiragino Kaku Gothic 胜出不只一点,唯有简体字不全+汉字是日本标准,新的 Hiragino Sans GB 将提高简体屏幕字体标准。
(本文原载于本站 Twitter,via @Shotype_en)
更新
jjgod 在技术方面也有提到雪豹中文字体升级。
繁体方面类似的 Hiragino Sans CNS 在正式版本中被苹果放弃,最后的默认字体是 Heiti TC。Heiti TC 在各方面要逊色于 Hiragino 系列,而 Hiragino Sans GB 有完整的繁体字集,因此更换原因不得而知。在繁体版本上更换默认字体请参考这里。
By Colourphilosophy
|
December 7, 2009

推出了 Myriad MM 后不久,Adobe 以 TrueType 字体格式发布了 Myriad Web(网页版),专为屏幕显示而优化过。Myriad Web 字体家族包含5种字体:Myriad Web Pro Bold,Myriad Web Pro Regular,Myriad Web Pro Condensed Italic,Myriad Web Pro Condensed 和 Myriad Web Pro Italic。
2000年,Adobe 公司把字体格式全面推进到 OpenType 标准。基于最初版本的Myriad Pro(Pro 意为 professional,专业版)的 OpenType 格式字体家族也再次登场。设计师 Christopher Slye 和 Fred Brady 参与了扩展设计的工作。相比 Myriad MM,增加了扩展拉丁字母字符集,希腊字母和西里尔字母,还包括了一些旧体风格数字(文本数字)。
Myriad Pro 的 Regular,Bold,Italic 和 Bold Italic 被捆绑进了 Adobe Reader 7.0及其后的版本,是 Adobe Reader 默认的无衬线字体。也就是说,当我们在阅读一篇包含拉丁文的 PDF 文档时,我们很可能在不知情且无意识的状态下,反复观看着 Myriad 字体。Myriad Web 被包含在 Adobe 网络专业字体包中。通过捆绑式销售,Myriad 伴随 Adobe 公司在数字图形领域的称霸,悄悄地潜入了我们的电脑。

By Colourphilosophy
|
December 4, 2009

Myriad,英语单词,意为「无数的」。同时,「Myriad」也是一款字体的名字。由罗伯特·斯林巴赫(Robert Slimbach,1956年-)和卡罗·图温布利(Carol Twombly,1959年-)在1990年到1992年期间以 Frutiger 字体为蓝本为 Adobe 公司设计。
Myriad 是早期数码字体时代的先驱,伴随着技术的成长一路走来。如今,它更多地和我们相见在显示屏幕上。当然,还有那著名的标榜设计的电子品牌。
1992年,耗时2年开发的 Myriad 终于发布了历史上第一个版本:Myriad MM。这款温和且具有良好可读性的人文主义无衬线字体,集诸多当时最新的数字字体技术于一身。 