设计协作,用摹客

更好的产品协作设计平台,设计师的利器,产品经理的帮手,工程师的伙伴

文章分类
设计1+2,摹客就够了!

摹客,支持Sketch/PS/XD/Figma/Axure设计稿交付、自动标注切图、全流程协作。助力产品团队高效工作!

立即开启
【友情推荐】uimaker - 专注于ui设计,为ui设计师提供ui设计相关教程、素材及灵感。

了解更多
入门教程 了解更多
成都君德鑫力达科技发展有限公司

分享到微信朋友圈:

打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。

博客 > 产品设计 > 从零开始设计一种字体,并在24小时内将其提交给Google

从零开始设计一种字体,并在24小时内将其提交给Google

THomas
2018-05-02
88473

我是亚当·萨维奇的“一天设计字体”的巨大粉丝。在一天的开始,他从一堆设计稿开始,最后得到的是他曾经梦寐以求的东西(这是我最喜欢的)。

因此,把这些放在心里(在一天下班后),我给自己设定了一个挑战。

创建一个全新的字体,从零开始,并在24小时内提交给谷歌字体。

我已经在旧笔记本上草拟了几个字母。我想创建一个可以在海报或大型艺术品中使用的高大的、无衬线、可显示的字体。在时尚健康杂志的早期,我不得不使用像‘Tungsten’或‘Heron’这样的字体,这些字体在复制时看起来是非常糟糕的,但是在头条新闻或者宣传材料中使用时,会达到非常惊人的效果(当时是我的主要工作)。这是我开创的风格。

非常粗糙的草图

星期三,下午1点

我直接使用Adobe Illustrator将两个或三个字母的样式进行了绘制。 我在美工板上设置了五条网格线,分别用于下沿线,基线,x字高,大写高度和上沿线。然后我决定了大写字母的宽度,并从那里确定了词干的粗细(例如字母I的宽度)。

我在字母比例方面做了大量研究,而且实际测量了一些现有的字体,计算出小写字母应该如何与大写字母相关联。从这里,我制定了一些规则:

  • X字高= 2×上沿/下沿线的高度。
  • 字宽= 1/4大写字母宽度
  • 小写字母宽度= 3/4大写字母宽度

规则说明

从零开始设计一种字体

从这里我首先创建了字母O和B。我做了一个决定,通常任何有曲线的字母都会有一个圆角。大多数字母将是一个高的方块形状,但像字母O,B和D,曲线的边缘将有圆角。

外角的半径为12mm,内侧为6mm。有了这些规则的确定,再加上我的横杠(横跨字母H)的高度,我开始大量设计我的大写字母。

从零开始设计一种字体

我的字体很简单,但是如果你愿意的话,你可以定义一个“花式”的字体。任何一个开口的字母,像字母C中的切口,或任何弧形的末端,如字母J的弯曲端,都将被切成一个角度。这里最难的字母是G和K。

大写字母完成后,我转向小写字母。毫无疑问,这会更难,但是根据我的规定,这只是一个大量复制的过程。我在这里使用了更多的“花式”,特别是在上沿和下沿的末端。字母f,g,a和e是最棘手的,因为它们是全新的风格。

星期三,晚上9点

从零开始设计一种字体

我现在正在继续设计一些额外的字形,如问号和感叹号。我的速度加快了,在睡觉之前,我已经设法处理了大约35个字形。

星期四早晨

早上,我很快完成了数字0到9的设计,然后开始真正创建字体文件。

这是一个全新的领域。Ian Barnard,是我twitter上的(我的姓氏)的一个书法家朋友,推荐了一个名为Glyphs的程序,你可以下载一个,有30天免费的试用期。

我下载了Glyphs Mini,并观看了几个教程视频,然后才意识到我把illustrator的文件完全设置错了。因此,我必须手工粘贴每个字符,并将其缩放以匹配应用程序中的指南。

从零开始设计一种字体

星期四,早上10点

随着我的准备到位,我开始调整间隔和字母的字距。这部分是非常耗时的。在你对此设置之前,你必须掌握这个应用程序中的一系列键盘快捷键。在开始字距调整之前,你必须尽可能地将字母间距调整到接近文件的外观。

显然,作为一个经验法则,测量字母O(中间的孔)的宽度,然后除以3,这就是你应该从字母的左右两侧开始的间隔距离。

星期四,早上11点

随着间距的设置(考虑到更宽的字母,如M和W),我开始了字距。这是一个非常艰苦的过程。我访问了这个网站,并将设计的字体粘贴到他们的字距文本框实例里面。

使用键盘快捷方式(使用本教程),我逐渐调整了字距组,并将每个看起来都不顺眼的字距进行了调整。最明显的是V和A之间的距离,但是在这个例子中有很多字母对,是我没有想到的。

一旦完成,我将文字转换为所有的大写字母,然后再重做一遍,把小写字母与大写字母进行配对。

从零开始设计一种字体

星期四,晚上12:59

我导出了我的字体并将其转换为一个.ttf文件,准备提交给Google。里面有不少字形仍然丢失(如方括号和版权符号),我确信谷歌不会接受。但是我也没有时间把全部语言支持所需的大量口音包括在内。

名字叫什么呢?

考虑后取名为:Odibee Sans

从零开始设计一种字体

发音为“oh-dee-bee”。我自己“一天设计的字体”(ODB)。

后记

我在2017年5月份向Google Fonts团队提交了Odibee Sans,现在还在添加字体。这个团队非常正确地建议我应该花点时间来改进设计(虽然他们承认这违背了项目的精髓)。

考虑到这一点,我又花了一天的时间在字体上。我已经添加了扩展拉丁语支持所需的所有额外字形(我认为)。我还对30个左右的字形做了一些重大修改,其中包括字母(大写字母)S,B,R和小写字母s,c,y,a,e,r,f,t,p,q 和j,以及一些数字的调整。

从零开始设计一种字体

最重要的是,现在有超过1500个字距调整对,这对字体有了很大的改进。

我还建立了自己的网站。

从零开始设计一种字体

这个网页也是我借助Adobe Muse在一天内完成的。

谢谢你的阅读!我很乐意阅读你可能在一天内处理过的任何项目。如果你能腾出时间,这是一个非常有效的技术。

原文作者:James Barnard

原文地址:https://medium.freecodecamp.org/designing-a-font-from-scratch-and-submitting-it-to-google-fonts-in-24-hours-152a30c57095



上一篇
如何不失理智地成为一名Web开发人员

Cherry   05/02

如何从众多面试者中“脱颖而出”获得第一份设计师实习工作?

Summer   04/29

下一篇
需要帮助?

我是小摹,你的7*12小时产品顾问

立即扫码加入官方微信群

官方热线:19130671449

服务邮箱:service@jongde.com