33岁想从头学做网页设计

by James Barnard

詹姆斯·巴纳德(James Barnard)

从头开始设计字体-并在24小时内将其提交给Google字体 (Designing a font from scratch — and submitting it to Google Fonts in 24 hours)

一日建造 (One Day Builds)

I’m a huge fan of Adam Savage’s One Day Builds. At the beginning of the day he starts with a pile of materials, and ends up holding something that he once coveted (this one is my favourite).

我是Adam Savage的“一日构建”的忠实粉丝。 一天开始时，他从一堆材料开始，到最后拿着他曾经梦co以求的东西( 这是我的最爱 )。

So with this in mind (and a day off from work), I set myself a challenge…

因此，考虑到这一点(还有一天的工作时间)，我给自己设定了挑战……

Create an entirely new font, from scratch, and submit it to Google Fonts in under 24 hours.

从头开始创建一个全新的字体，并在24小时内将其提交给Google字体。

I had a couple of letters already sketched out in an old notebook. I wanted to create a tall, sans-serif, display font that could be used in posters, or large scale artwork. In my early days at Men’s Health, I would have to use fonts like ‘Tungsten’ or ‘Heron’, which were terrible for chunks of body copy, but amazing when used in headlines, or for promotional material (which was my main job there). This was the style I set out to create.

我已经在一个旧笔记本上画了几封信。 我想创建一个高大的，无衬线的显示字体，可以在海报或大型艺术品中使用。 在Men's Health的早期，我必须使用诸如“钨”或“ 苍鹭 ”之类的字体，这些字体对于大量的身体复制非常可怕，但是当用作标题或宣传材料时却令人惊叹(这是我的主要工作) )。 这就是我开始创造的风格。

星期三下午1点 (1pm, Wednesday)

I went straight to Adobe Illustrator with the two or three letter styles I had sketched out. I set up five grid lines on my artboard, one each for the descender line, baseline, x-height, cap height and ascender line. I then decided on a width for the capital letters, and from there, the thickness of the stem (e.g. the width of the letter I).

我直接用草拟的两三个字母样式去了Adobe Illustrator。 我在画板上设置了5条网格线，每条分别用于下降线，基线，x高度，顶盖高度和上升线。 然后，我决定了大写字母的宽度，然后决定了茎的厚度(例如，字母I的宽度)。

I did a lot of research on letter proportions and ratios, and actually measured some existing fonts, working out how the lowercase letters should relate to the caps. From here, I made some rules:

我对字母的比例和比率进行了大量研究，并实际测量了一些现有的字体，弄清楚小写字母应如何与大写字母联系起来。 从这里开始，我制定了一些规则：

• X-height = 2 × height of ascender/descender.X高度= 2×上升/下降高度。
• Stem width = 1/4 capital letter width杆宽= 1/4大写字母宽度
• Lowercase width = 3/4 capital letter width小写字母宽度= 3/4大写字母宽度

From here I created the letters O and B first. I made a decision that any letters that would usually have curves, would have a rounded corner instead. Most letters would be a tall block shape, but with letters like O, B and D, the edges with curves would have rounded corners.

在这里，我首先创建了字母O和B。 我决定所有通常具有曲线的字母都将变为圆角。 大多数字母将是一个高大的块形，但是使用O ， B和D等字母时，带有曲线的边缘将具有圆角。

The outside corner would have a 12mm radius, and the inside had 6mm. With these rules agreed, plus a height for my crossbar (across the letter H) I started churning out my capital letters.

外角的半径为12mm，内角的半径为6mm。 同意这些规则，再加上一个横线的高度(在字母H上 )，我开始准备大写字母。

My font was very simple, but with one defining ‘flourish’, if you will. Any aperture, which is the opening in a letter, like the cut in the letter C, or the end of any arc, like the curved end of the letter J, would be cut at an angle. The hardest letters here were G and K.

我的字体非常简单，但如果可以的话，它的定义是“蓬勃发展”。 任何Kong，即字母的开口(如字母C的切口)或圆弧的末端(如字母J的弯曲端)，都将被切成一定角度。 这里最难的字母是G和K。

With the CAPS completed, I moved on to the lowercase letters. This was undoubtedly harder, but with my rules agreed upon, it was just a case of churning through them. I used a lot more of my ‘flourishes’ here, especially at the end of the ascenders and descenders. The letters f, g, a and e were the trickiest, as they were completely new styles.

完成CAPS后，我继续使用小写字母。 无疑这很难，但是在我同意规则的情况下，这只是搅动规则的一种情况。 我在这里使用了很多“蓬勃发展”，尤其是在上升和下降的末尾。 字母f ， g ， a和e是最棘手的，因为它们是全新的样式。

星期三晚上9点 (9pm, Wednesday)

I was now moving on to some of the extra glyphs, like the question mark and exclamation mark. My pace picked up, and before bed I had managed to work up around 35 of them.

我现在正在研究一些其他字形，例如问号和感叹号。 我的步伐加快了，睡前我设法解决了其中的35个问题。

星期四的早上 (Thursday morning)

In the morning, I completed the numbers 0 to 9 pretty quickly, and then began to actually create the font file.

早上，我很快完成了数字0到9，然后开始实际创建字体文件。

This was completely new territory. Ian Barnard, a calligrapher pal on twitter (with my surname), recommended a program called Glyphs, which you can download for a free 30-day trial.

这是全新的领域。 Twitter上的书法家Ian Barnard (用我的姓氏)推荐了一个名为Glyphs的程序，您可以下载该程序以免费试用30天。

I downloaded Glyphs Mini and watched a couple of tutorial videos, then realised I’d set up my illustrator file completely wrong. So I had to paste each character in manually and scale it up to match the guides in the app.

我下载了Glyphs Mini，并观看了一些教程视频，然后意识到我设置我的Illustrator文件完全错误。 因此，我必须手动粘贴每个字符并按比例放大以匹配应用程序中的指南。

星期四上午10点 (10am, Thursday)

With my characters in place, I went about spacing and kerning the letters. This part was incredibly time consuming. There are a series of keyboard shortcuts in this app which you absolutely must master before setting out on this. And before starting the kerning process, you have to get your letter spacing as close as possible to how you want the file to look.

放置好角色后，我开始对字母进行间距和字距调整。 这部分非常耗时。 在此应用中，您必须完全掌握一系列键盘快捷键，然后才能进行设置。 并且在开始字距调整过程之前，您必须使字母间距与文件的外观尽可能接近。

Apparently as a rule of thumb, measure the width of the counter of the letter O (the hole in the middle) and divide that by three. That is the spacing distance you should start with on the left and right side of your letters.

显然，根据经验，测量字母O的计数器宽度(中间的Kong)，然后将其除以三。 那是您应该在字母的左侧和右侧开始的间距。

星期四上午11点 (11am Thursday)

With the spacing set up (accounting for wider letters like M and W) I started kerning. This was a massively painstaking process. I visited this website, and pasted in their example kerning text.

随着间距的设置(考虑到M和W等较宽的字母)，我开始了字距调整。 这是一个艰苦的过程。 我访问了该网站 ，并粘贴了示例字距调整文本。

Using the keyboard shortcuts (use this tutorial) I plodded through and adjusted kerning groups for every single distance that didn’t look right to me. The obvious ones are between V and A, but there are so many letter pairings within that example copy that I wouldn’t have thought of.

使用键盘快捷键( 使用本教程 )，我遍历并调整了字距调整组，以适应每个我觉得不合适的距离。 显而易见的是在V和A之间，但是该示例副本中有太多字母对，我没想到。

Once complete, I converted the kerning text to all caps and did the whole thing again, to pair the capital letters.

完成后，我将字距调整文本全部大写，然后再次进行整个操作，以将大写字母配对。

星期四中午12:59 (12:59pm Thursday)

I exported my font and converted it to a .ttf file ready to submit to Google. With quite a few glyphs still missing (like square brackets and copyright symbols), I was certain that it wouldn’t be accepted. I also didn’t have time to include the multitudes of accents required for full language support.

我导出了字体并将其转换为.ttf文件，准备提交给Google。 由于仍然缺少许多字形(例如方括号和版权符号)，我确信它不会被接受。 我也没有时间包含全面语言支持所需的多种口音。

It’s not the greatest of fonts, but it wasn’t bad for my very first go. And considering I had to teach myself how to use the Glyphs software from scratch, and it was completed in a single day, I was pretty proud!

它不是最出色的字体，但对于我的第一次使用来说还不错。 考虑到我必须自学如何从头开始使用Glyphs软件，并且该软件在一天内完成，我感到非常自豪！

名字？ (The name?)

Odibee Sans

奥迪比·桑斯(Odibee Sans)

…pronounced “oh-dee-bee”. My very own ‘One Day Build’ (ODB).

…发音为“哦，蜜蜂”。 我自己的“一日构建”(ODB)。

后记 (Afterword)

I submitted Odibee Sans to the Google Fonts team back in May 2017, and as it stands the font is still in their pipeline to be added. The team quite rightly suggested that I should spend some additional time on the font to refine the design (although they admitted that this was against the spirit of the project).

我于2017年5月将Odibee Sans提交给了Google字体小组，目前看来该字体仍在他们的开发中 。 团队非常正确地建议我应该花一些时间在字体上，以完善设计(尽管他们承认这样做违背了项目的精神)。

With this in mind I spent an additional day on the font. I have since added all the extra glyphs (I think) required for extended latin support. I also made some major changes to around 30 of the glyphs, including new styles for the letters (caps) S, B, R, and lower case s, c, y, a, e, r, f, t, p, q and j, as well as a couple of number tweaks.

考虑到这一点，我花了一天的时间在字体上。 从那以后，我添加了扩展拉丁语支持所需的所有其他字形(我认为)。 我还对大约30个字形进行了一些重大更改，包括字母(大写)S，B，R和小写字母s，c，y，a，e，r，f，t，p，q的新样式和j，以及一些数字调整。

On top of this, there are now more than 1500 kerning pairs, which has made a massive improvement to the typeface.

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

And I made a website! odibeesans.com

我做了一个网站！ odibeesans.com

The site was also made in a day using Adobe Muse. More on this here.

该网站还使用Adobe Muse在一天之内完成。 在这里更多。

Thanks for reading! I’d love to read about any projects you may have tackled in one day. It’s quite an effective technique, if you can spare the time (God bless the freelance lifestyle)!

谢谢阅读！ 我很想阅读您可能在一天之内完成的所有项目。 如果您可以节省时间，这是一项非常有效的技术(上帝保佑自由职业者的生活方式)！

翻译自: https://www.freecodecamp.org/news/designing-a-font-from-scratch-and-submitting-it-to-google-fonts-in-24-hours-152a30c57095/

33岁想从头学做网页设计