SitePoint Podcast＃35：Mark Boulton的版式设计

Episode 35 of The SitePoint Podcast is now available! This week, Matt Magain (@mattymcg) catches up with Mark Boulton at Web Directions South 2009 to discuss web design, typography, and why they aren’t the separate things they may appear to be. A complete transcript of the interviews is provided below.

SitePoint Podcast的 第35集现已发布！ 本周，Matt Magain( @mattymcg )在Web Directions South 2009上与Mark Boulton进行了会谈，讨论了Web设计，版式，以及为什么它们与看起来似乎不一样。 下面提供了采访的完整笔录。

下载此剧集 (Download this Episode)

You can also download this episode as a standalone MP3 file. Here’s the link:

您也可以将本集下载为独立的MP3文件。 这是链接：

• SitePoint Podcast #35: Typographic Design with Mark Boulton (MP3, 12.6MB)

  SitePoint Podcast＃35：Mark Boulton的版式设计 ( MP3，12.6MB )

面试成绩单 (Interview Transcript)

Matt: This is Matt Magain from SitePoint. I’m at the Web Directions South conference and I’m speaking with Mark Boulton.

Matt：我是SitePoint的Matt Magain。 我正在参加Web Directions South会议，并且正在与Mark Boulton交谈。

Mark: Hello.

马克：你好。

Matt: Mark thanks for coming to Australia. When we spoke earlier, you mentioned that you love the place and that you contemplated moving here occasionally?

马特：马克感谢您来澳大利亚。 当我们较早发言时，您提到您喜欢这个地方，并且打算偶尔搬到这里吗？

Mark: Yes.

马克：是的。

Matt: Don’t you think you’d miss the British weather?

马特：您不认为您会错过英国的天气吗？

Mark: Judging by this week, no. You have your own blend of British weather here. Yeah, every time we come back… this is our third trip now – my wife and I used to live in Manly about 10 years ago for about six months and we came back for a wedding three years ago. Every time we come back, we have the same discussions about should we move here? It’s so beautiful. I think we’d miss a good cup of tea though, to be honest. The tea’s not great.

马克：从这个星期来看，没有。 您在这里拥有自己的英国天气。 是的，每次我们回来……这是我们第三次旅行–我和我的妻子过去大约十年前住在曼利，大约六个月，而我们三年前回来参加婚礼。 每次回来，我们都会讨论是否应该搬到这里？ 这个很漂亮。 老实说，我认为我们会想念一杯好茶。 茶不是很好

Matt: But the coffee’s excellent.

马特：但是咖啡很棒。

Mark: But the coffee’s excellent but I don’t drink coffee. So there you go.

马克：但是咖啡很棒，但是我不喝咖啡。 所以你去了。

Matt: It could be the deal breaker.

马特：这可能会破坏交易。

Mark: Yeah, it could be.

马克：是的，可能是。

Matt: So you’re quite well known for being a typographic designer. Can you tell our listeners what you think that term means?

马特：您以印刷设计师而闻名。 您能告诉我们的听众您该术语的含义吗？

Mark: Yeah. In short, it is designing with type primarily. It means… which is more than just the typeface. So it means all elements of typographic design from grids and hierarchy and typesetting, all that kind of stuff. It means focusing on that. So the difference between a typographic designer and a graphic designer is that a graphic designer does typographic design but it’s not their main focus. They’re often focused on imagery, photography, art direction, that kind of thing as well.

马克：是的。 简而言之，它主要是与类型一起设计。 这意味着……不仅是字体。 因此，它意味着来自网格，层次结构和排版的所有版式设计元素，以及所有类似的内容。 这意味着专注于此。 因此，版式设计师和平面设计师之间的区别在于，平面设计师可以进行版式设计，但这并不是他们的主要重点。 他们通常也专注于图像，摄影，艺术指导以及此类事物。

Matt: Right. So many of the readers and the listeners probably think of typography as being one aspect of design but you were saying in your talk that really you consider imagery and layout and color and that kind of stuff to be one aspect of typography.

马特：对。 如此众多的读者和听众可能认为排版是设计的一个方面，但是您在讲话中说，实际上，您将图像，布局和颜色以及此类内容视为排版的一个方面。

Mark: Yes, I do. I think that any image you use on a design should really fit into a grid and the grid is a typographic grid. It should be created and designed with the typography in mind as the primary thing. So yeah, they’re all related to type really and on the web, 99% of what we do as designers is typographic design. So you got the interaction layer on there as well making sure it’s usable and all the rest of it, but I think all of that is typographic design. I really do. So consider a designer like I did in university, designing an encyclopedia, you have to worry about navigation, you have to think about access structure, you have to think about hierarchy and flow because an encyclopedia is not read cover-to-cover, it’s a reference book. So it has to be navigated in the same way that a web site is. The similarities are pretty evident, in my view.

马克：是的，我愿意。 我认为您在设计上使用的任何图像都应该真正适合网格，并且该网格是印刷网格。 它的创建和设计应以排版为主要内容。 是的，它们确实与类型有关，并且在网络上都与类型有关，我们作为设计师所做的99％是印刷设计。 因此，您还要在其中获得交互层，并确保所有其他部分都可用，但是我认为所有这些都是印刷设计。 我是真的 因此，考虑一下像我在大学时所做的那样，设计一个百科全书的设计师，您必须担心导航，您必须考虑访问结构，您必须考虑层次结构和流程，因为百科全书不是从头到尾阅读的，它是一本参考书。 因此，必须以与网站相同的方式进行导航。 在我看来，相似之处非常明显。

Matt: The key slide in your presentation that stood out was the 9 factors of that typographic structure. It quite resonated for me but would you mind sharing how you came up with that structure and how you use it in your workflow?

马特：您的演示文稿中脱颖而出的关键幻灯片是该字体结构的9个因素。 它为我引起了共鸣，但您是否愿意分享您如何提出该结构以及如何在工作流程中使用它？

Mark: Yeah, yeah. It’s taken a while to get to that point. This is the third kind of model I’ve used to explain my thoughts about typography and what I think typography is. So it’s nine squares – and I don’t think I can remember all of them off the top of my head.

马克：是的，是的。 到这一点花了一段时间。 这是我用来解释有关印刷术以及印刷术是什么的第三种模型。 因此，这是九个正方形-我想我无法记住所有这些。

Ah, here we are. Now, we have function on the bottom, language, typesetting, and rhythm; and then above that we have three which represent form, grids, fonts, and hierarchy; and above that we have attributes which are layout, color, and content. All of those have to work together to create a strong typographic structure. You can remove a couple of those and still retain a strong structure.

啊，我们来了。 现在，我们在底部，语言，排版和节奏上有了功能； 然后在上面有三个，分别代表表单，网格，字体和层次结构； 除此之外，我们还有布局，颜色和内容属性。 所有这些都必须共同努力以创建一个强大的印刷结构。 您可以删除其中的几个，但仍保持坚固的结构。

So on the Web, we’ve had a very, very limited font choice to the point of actually most designers not considering the typeface that much. But we’ve got a really good, strong structure with all the other pieces in that to create really good strong typographic design on the Web. And just because we can’t choose our font, it doesn’t necessarily matter; we’re still doing pretty good typographic design.

因此，在Web上，我们的字体选择非常非常有限，以至于实际上大多数设计人员并未过多考虑字体。 但是我们拥有一个非常好的，牢固的结构以及所有其他部分，可以在网络上创建非常好的，强大的印刷设计。 只是因为我们无法选择字体，所以这并不重要。 我们仍然在做很好的排版设计。

Matt: I have to confess that one thing that came to mind when I saw you omit font from the structure was “but the center doesn’t hold!” Is having on the horizon this whole range of new fonts available for use as simple as dropping font into the equation or are we going to have to relearn the structure for every font?

马特：我不得不承认，当我看到您从结构中省略字体时想到的一件事是“但中心没有固定！” 是即将出现整个范围的新字体，就像将字体放入等式中那样简单，还是我们将不得不重新学习每种字体的结构？

Mark: Yeah, it’s not as simple as dropping it in which is one of my concerns about @font-face is that the barriers to entry for doing that are as simple as choosing Comic Sans from a drop-down. It requires no thought whatsoever. And choosing the font, you replace that bit in the middle with a different font and it has an effect on all the surroundings. So yeah, any font that does get dropped in there will affect the typesetting, will affect the layout, will affect the content, will affect the rhythm. So yeah, it’s going to have an effect.

马克：是的，这不是简单的删除操作，这是我对@ font-face的关注之一，即这样做的进入障碍就像从下拉菜单中选择Comic Sans一样简单。 它不需要任何思考。 然后选择字体，将中间的那个位替换为另一种字体，它会影响所有周围环境。 所以，是的，任何确实落入其中的字体都会影响排版，影响版面，影响内容，影响节奏。 是的，它将产生影响。

Matt: You mentioned Comic Sans and you mentioned in your presentation that you had perhaps mistakenly been held up as a defender of the font. Do you want to talk about, maybe clarify for some people what your stance is on Comic Sans and where it fits in the big picture?

Matt：您提到了Comic Sans，并且在演示中提到您可能错误地被认为是字体的捍卫者。 您是否想谈一谈，或者向某些人澄清您对Comic Sans的立场以及它在大背景下的立场？

Mark: Yeah, I can almost hear that people are listening to this. I can almost hear the fury building in some designers’ minds. Yeah, I don’t think Comic Sans is a bad typeface. I think it’s been used by bad designers or it’s been used by people who aren’t designers at all but are trying to make a design decision without having the right tools available to them.

马克：是的，我几乎可以听到有人在听。 在一些设计师的脑海中，我几乎可以听到这座愤怒的建筑。 是的，我认为Comic Sans并不是坏字体。 我认为它已经被糟糕的设计师使用，或者被根本不是设计师但试图在没有合适工具的情况下做出设计决定的人们所使用。

My mum and dad, whatever, for their church might create a newsletter. They want it to be friendly so they use Comic Sans. And we see that all over the place and it’s not a bad typeface but it’s just been used in the wrong context so many times because the barrier to entry is so low and we don’t have to have any typographic schooling whatsoever to be able to choose it from a drop-down. But it’s not a bad font. People berate it for no good reason, I see. It’s a font that’s been overused. It’s not a font that is inherently bad.

我的妈妈和爸爸，不管他们为他们的教会做些什么，时事通讯。 他们希望它友好，因此他们使用Comic Sans。 而且我们看到的到处都是，它不是一个坏的字体，但是它被用在错误的上下文中很多次了，因为进入的门槛太低了，我们不必进行任何印刷学就可以从下拉菜单中选择它。 但这不是一个坏字体。 我知道人们无缘无故地指责它。 这是一种已被过度使用的字体。 它不是一种固有的不良字体。

Matt: So, talking about bad fonts, someone at the end of your session asked about free fonts and your response was that you thought the majority of them were rather crappy.

Matt：因此，在谈论不良字体时，在您的课程结束时有人向您询问免费字体，您的回答是您认为其中的大多数都是糟糕的。

Mark: Yes.

马克：是的。

Matt: So what’s the difference between a bad font and a font like Comic Sans which people conceive to be bad?

Matt：那么，不良字体和人们认为不良的Comic Sans之类的字体有什么区别？

Mark: There are a few things. So the actual quality of the software, so how does it render on different platforms and in different browsers. The biggest thing that I see quite a lot with free fonts is bad kerning, the distance between letters are kerning pairs. So if you have a capital T with a lowercase r next to it, the r has to go underneath the crossbar of the T. And all of those kinds of things, the spacing for all of those has to be generated by a typographer at some stage in the production of the font and with free fonts, because they’re free and because there’s no commercial weight behind them or backing, then perhaps that time is reduced and as a result, the kerning is not as good. Also, free fonts don’t generally have the breadth of weights available which makes it quite counterproductive to be used commercially. Quite a lot of designers will choose a typeface in the print world and will want a full family of fonts to be able to use throughout the design so that they can use just one typeface and get away with it right across many applications. Free fonts, generally, are only available in single weights. They’re very rarely available in multiple weights. So that’s another issue and they take a long time. I’m not having a go at free fonts whatsoever.

马克：有几件事。 因此，软件的实际质量如何，如何在不同的平台和不同的浏览器中呈现。 我看到的很多关于免费字体的最大问题是字距紧缩，字母之间的距离是字距对。 因此，如果您的大写字母T旁边有一个小写字母r，则r必须位于T的横线下方。所有这些内容，所有这些字符的间距都必须由印刷者在某些位置生成在生产字体和使用免费字体的阶段，因为它们是免费的，并且因为它们背后或背后没有商业上的分量，所以也许时间减少了，因此字距调整不那么理想。 同样，免费字体通常没有可用宽度的宽度，这使其在商业上使用适得其反。 很多设计人员会在打印世界中选择一种字体，并希望一整套字体能够在整个设计中使用，以便他们只使用一种字体就可以在许多应用程序中使用。 通常，免费字体仅以单个粗细提供。 它们很少以多种重量提供。 这是另一个问题，而且需要很长时间。 我什么都没有免费字体。

Type design is a completely different discipline. My hat goes off to type designers because it’s hard work, it takes a long, long time to do, and it’s no wonder that foundries are being very protective of normally years and years of work.

字体设计是一门完全不同的学科。 我的帽子是字体设计师的工作，因为它很辛苦，需要很长很长的时间，而且难怪代工厂在正常的工作岁月中会得到很好的保护。

Matt: I have a question about fixed and fluid layouts. It’s obviously one of those topics that generates almost religious fervor in debate and discussion. The concept of a grid and the concept of vertical rhythm, they’re all things that seem to work quite well for a fixed layout. Is it possible to apply those concepts to a fluid layout as well?

马特：我对固定式和流动式布局有疑问。 显然，这是在辩论和讨论中引起几乎宗教热忱的主题之一。 网格的概念和垂直节奏的概念，对于固定的布局，它们似乎都可以很好地发挥作用。 是否可以将这些概念也应用于可变布局？

Mark: Yes, it is. It’s just your base unit of measurement needs to be relative rather than fixed. So you can use percentages or ems. Quite often using ems for any of that kind of layout stuff is actually preferable to using pixels because an em is related to your type so that there’s an inherent relationship between the layout and the typeface that you’re using.

马克：是的。 只是您的基本度量单位需要相对而不是固定。 因此，您可以使用百分比或ems。 实际上，经常将em用于此类布局中的任何东西实际上比使用像素更可取，因为em与您的类型有关，因此布局和所用字体之间存在固有的关系。

Matt: What about incorporating IAB ad units, which are pixels and which won’t change as text size increases or decreases?

马特：如何并入IAB广告单元，它们是像素，并且随着文本大小的增加或减少而不会改变？

Mark: Yeah. Well, I think that comes down to control. I keep mentioning this over the past couple of days and people like Khoi Vinh had been talking about this for years and I’m only coming around to his way of thinking, I guess. Designers on the Web have to lose control and that’s difficult for designers to do. It’s not because we’re being difficult, it’s because the way we’re schooled and the way that we are; it’s part of our kind of DNA is to control the message and control the design and asking us to lose control is actually quite hard to do. I think that’s why a lot of designers end up going fixed because they can control it to a degree.

马克：是的。 好吧，我认为这归结为控制。 在过去的几天里，我一直在提起这个问题，像Khoi Vinh这样的人多年来一直在谈论这个问题，我想我只是想着他的想法。 Web设计人员必须失去控制权，这对设计人员来说很难做到。 这不是因为我们很难，而是因为我们的教育方式和我们的生活方式。 这是我们DNA的一部分，就是控制信息并控制设计，而让我们失去控制实际上是很难做到的。 我认为这就是为什么许多设计师最终固定下来的原因，因为他们可以在一定程度上控制它。

Matt: Maybe it’s their clients that can’t give up the control?

马特：也许是他们的客户不能放弃控制权？

Mark: Maybe it is. That’s a big thing as well. It’s clients’ expectations as well but clients’ expectations work in reverse as well. I’ve had clients who expect full-width, expect fluid layouts and ask generally why is there a lot of white space over here on the screen? So it works both ways.

马克：也许是。 这也是一件大事。 这也是客户的期望，但客户的期望也相反。 我有一些客户期望全角，期望流畅的布局并通常问为什么屏幕上的空白空间很大？ 因此它可以双向工作。

I don’t know whether I even answered your question though.

我不知道我是否回答了你的问题。

Matt: Well, let’s move on. In your talk, you cited the definition of typography that you agreed with was a mechanical notation and arrangement of language.

马特：恩，让我们继续。 在您的演讲中，您引用了您同意的版式定义，即机械符号和语言排列。

Mark: Yes.

马克：是的。

Matt: My question is, does the word ‘mechanical’ imply that the art of typography is more of a science than an art?

马特：我的问题是，“机械”一词是否意味着印刷艺术更多是一门科学而非一门艺术？

Mark: Yes, I think it is. I think type design, so the design of the letterforms, that’s more akin to art. There’s a lot of art craft in that process.

马克：是的，我认为是。 我认为是字体设计，所以字体的设计更类似于艺术。 在这个过程中有很多Craft.io。

To design a certain typeface to convey a certain feeling or idea for a large body of text is very, very challenging. That’s more kind of art and craft.

设计某种字体来传达大量文本的某种感觉或想法是非常非常具有挑战性的。 那是一种艺术和手Craft.io。

Typographic design, the stuff that I’m talking about, is more science, really. There are rules, there are ways of doing things and it’s less about art than type design, absolutely.

印刷设计，我正在谈论的东西，实际上是更多的科学。 有规则，有做事的方法，绝对不是艺术而是字体设计。

Matt: And my final question, I thought your presentation was fantastic, but I couldn’t work out whether you were pessimistic or optimistic about the imminent arming of hobbyists and everyone with a whole stack of new fonts to choose from.

马特：我的最后一个问题是，我认为您的演讲很棒，但我无法确定您是对业余爱好者以及即将拥有大量新字体可供选择的所有人的武装是悲观还是乐观。

Mark: Yes, I was being a bit of both, I think. I’m a little bit pessimistic at the moment because I feel like we’re giving hand grenades to kids. I think without the right tools in place such as Comic Sans in drop downs, we’re not giving people the right tools to make good design decisions. For designers, I think that it’s exciting and it’s a good place to be. However, I don’t think we’ve got the right fonts to use yet on the Web. The difference between web fonts and fonts designed for prints is huge. Not only technically but in the actual design of the typefaces themselves and I just don’t think we’re there yet with the right typefaces available. I’d love to see, I mentioned at the end of my talk, I’d love to see browser vendors or big corporations step up to the plate like Microsoft did and invest in getting some web fonts designed and then distributed on whatever platform whether it’s something like TypeKit or if it’s the foundries themselves, getting some way of getting the right typefaces into the right hands because at the moment, putting Garamond or Bodoni on the Web is not great.

马克：是的，我想我两者兼而有之。 我现在有点悲观，因为我觉得我们正在给孩子们投掷手榴弹。 我认为，如果没有适当的工具(例如下拉菜单中的Comic Sans)，我们就无法为人们提供正确的工具来做出良好的设计决策。 对于设计师来说，我认为这很令人兴奋，而且是一个理想的去处。 但是，我认为我们尚没有合适的字体在网络上使用。 Web字体和设计用于打印的字体之间的差异是巨大的。 不仅在技术上，而且在字体本身的实际设计中，我只是认为我们还没有合适的可用字体。 我很想看到，我在演讲结束时提到，我希望看到浏览器供应商或大公司像Microsoft一样站出来，投资设计一些Web字体，然后在任何平台上分发它就像TypeKit一样，或者如果它是铸造厂本身，则可以通过某种方式将正确的字体输入正确的手中，因为目前，将Garamond或Bodoni放在网络上并不好。

Matt: Thank you very much for your time, Mark. I appreciate it.

马特：非常感谢您的宝贵时间，马克。 我很感激。

Mark: Thank you very much.

马克：非常感谢。

Matt: Enjoy the rest of your time in Australia.

马特：享受您在澳大利亚的剩余时间。

Mark: Thank you.

马克：谢谢。

Kevin: This episode of the SitePoint Podcast was produced by Karn Broad, and I’m Kevin Yank. Bye for now!

凯文： SitePoint播客的这一集由Karn Broad制作，我叫Kevin Yank。 暂时再见！

Theme music by Mike Mella.

Mike Mella的主题音乐。

Thanks for listening! Feel free to let us know how we’re doing, or to continue the discussion, using the comments field below.

谢谢收听！ 欢迎使用下面的评论字段让我们知道我们的状况，或者继续讨论。

翻译自: https://www.sitepoint.com/podcast-35-typographic-design-mark-boulton/