Max Huber 启发设计决策：将平凡的主题变成令人兴奋的视觉传达

多年前，我希望我能为家喻户晓的人做广告项目，因为我认为线上工作会带来创造性的满足感。 我很幸运能与许多知名企业和慈善机构合作，但回顾过去，我的小项目在创意上是最令人满意的。

通常，大品牌已经制定了指导方针，这意味着我没有多少空间来试验和锻炼我的创造力。 我并不是说品牌指南不重要，但我更喜欢从事那些我觉得自己增加了最大价值和一点点自己的项目。

如今，产品公司似乎对改进界面和简化用户体验更感兴趣。 当我使用产品时，我会重视这些东西，但我发现从事这些项目的回报较少。 知名客户仍然具有一定的吸引力——在我的投资组合中加入徽标对业务有好处——但我现在正在寻找能够让我自由地发展我的创作兴趣的项目。

我着迷于设计如何讲述有关产品和服务的引人入胜的故事，即使是那些可能被某些人认为平凡的故事。 我喜欢探索如何使用图像、布局和排版以视觉上独特的方式传达信息。 最重要的是，我喜欢利用我在艺术指导和平面设计方面的经验和兴趣来帮助企业、慈善机构，有时甚至是个人，否则他们可能会接触到他们。

“我不试图代表机器说话。 相反，我试图通过对元素、操作和使用的图形展示，让它们为自己说话。”

— 乔瓦尼·平托里

即使是备受推崇的知名设计师也花时间处理平凡的主题并制作出标志性的作品。 从瑞士移居美国后，Erik Nitsche 为《时尚芭莎》、《生活》和《名利场》等杂志撰稿。 但最受认可的是他为通用动力公司所做的工作。 Nitsche 在航空航天和国防公司担任艺术总监五年期间，开发了一个信息设计系统，该系统产生了年度报告、海报、技术数据和 Dynamic America，这是一本 420 页追溯公司历史的书。

意大利设计师 Giovanni Pintori 在商业产品制造商 Olivetti 工作了 31 年，他应用于广告、日历和海报的简单风格和几何形状发展成为公司的设计词汇。

Max Huber 出生于瑞士，职业生涯的大部分时间都在意大利工作。 虽然他的作品集包含了许多意大利领先品牌的作品，但他为 La Rinascente 超市设计的食品标签和包装纸也令人着迷。

这三位设计师以及更多类似的设计师可以告诉我们，即使是最平凡的主题也可以通过设计提供令人兴奋的交流机会。 这就是我每天都在努力记住的事情。

灵感来自 Max Huber

尽管不如他的许多同时代人知名，Max Huber 是瑞士最杰出的设计师之一。 胡贝尔于 1919 年出生于巴尔，他在瑞士和意大利之间迁徙，直到二战结束。

在米兰的早期职业生涯中，Huber 在 Antonio Boggeri 的工作室工作，在那里他受到了混合媒体的影响，包括插图、摄影和排版。 从 1950 年到 1954 年，Huber 为意大利高端百货连锁店 La Rinascente 工作，并于 1954 年获得了其首个金罗盘奖（Compasso d'Oro）。

1940 年代，米兰是意大利前卫运动的中心。 在那里，胡贝尔与艺术家、设计师和知识分子混在一起。 这种混合刺激了胡贝尔，他尝试融合许多弟子的创造性工作。

Huber 从未从表面上看待这些影响。 他处理照片，从背景中剪下主题，并将它们与颜色和形状的块混合。 彩色条纹为 Huber 的设计增添了动感，他为 Monza Autodromo（米兰著名的赛道）设计的海报与比赛本身一样令人兴奋。

Huber 经常使用平面形状——箭头、圆圈和漩涡图案——并将它们与单色和双色调照片重叠。 他的唱片封面设计和他为自己的爵士乐系列制作的表壳充满活力。

虽然他作为排版师的技能并不总是得到认可，但 Huber 的作品充满了鼓舞人心的排版。 他毫不费力地在现代衬线字体和现代无衬线字体之间切换，并且在使用这两种字体时看起来很舒服。 虽然瑞士风格与新怪诞的无衬线字体最为相关，但 Huber 的衬线字体同样令人鼓舞。

Huber 定义了网格来强调文本对齐，然后使用大标题和严格层次结构中的文本。 但他也不害怕玩字体，将它设置在不同寻常的角度并尝试透视。

从 1960 年代到 1992 年去世，Huber 参与了各种委托，包括品牌重新设计和以路易斯·阿姆斯特朗 (Louis Armstrong) 为特色的爵士壁纸设计，他称之为 Rhythm。 他的客户 Oscar Braendli 委托 Huber 设计展览。

Huber 还为 Adriano Olivetti 设计，并以同样的实验热情接受了这些项目。 两者都是独特的设计如何将最平凡的主题变成令人兴奋的视觉传达的明显例子。

他们证明，在客户和设计师之间的关系中的协同作用和信任可以带来可持续数十年的非凡成果。

尽管他的标志性风格在他的一生中不断发展，但 Huber 对实验的承诺仍然存在。 甚至在他的一生中，他都将他的风格中的各个元素——大胆的色块、标志性的形状、摄影处理和强大的排版——纳入其中，Huber 建立了一个非常多样化的作品集。 晚年，Huber 在瑞士南部小镇卢加诺教授平面设计，巧合的是，我在瑞士工作时就住在这里。 他于 1992 年在门德里西奥（我的瑞士办事处所在的地方）去世，附近的基亚索有一座博物馆专门展示他的作品。

Max Huber 上只有一本书，你应该在书架或咖啡桌上找到它的空间。 Stanislaus von Moos、Mara Campana 和 Giampiero Bosoni 的“Max Huber”（2006 年）。 这是他整个职业生涯的完整作品目录，由认识 Max Huber 的人撰写。

识别旧式（人文主义）字体

设计更改的时期通常随着技术的进步而逐步进行。 当今网络的真实情况——以及 CSS 的发展如何影响在线可能发生的事情——也是早期排版发展的情况。 一些早期的字体是人文主义的，因为它们的起源是 15 世纪中叶的手写体。

但是，当钢冲压技术——直到 19 世纪用于排版的金属块——变得更加精确时，字体变得更加精致。

这种精确度使字体设计师能够为我们现在所说的旧式字体添加华丽。

人文主义字体通常包括带有倾斜横杆的小写“e”，而旧式字体则引入了水平横杆。

字体中的应力是在字母的较薄部分之间绘制的角度。 在具有垂直应力的字体中，这条线是从上到下垂直绘制的。 在具有对角线（人文主义）压力的字体中，字母最薄部分之间的线以一定角度绘制。

旧式字体延续了对角线强调的人文主义风格，但在最粗和最细的笔划之间有更多的对比。 旧式字体经常被括起来，因为它们具有将衬线连接到笔画的曲线。

巴斯克维尔由约翰巴斯克维尔在 1750 年代设计。 他的字体一直很受欢迎，并且有许多现代解释。 Garamond 风格的字体在印刷设计中仍然很受欢迎，并且 Monotype Garamond 与多个 Microsoft 产品捆绑在一起。

旧式类型

尽管它的布局非常规，但我只需要四个常规元素来开发这种老式设计。 页眉、横幅分区、段落和页脚元素：

 <header>…</header> <div>…</div> <p>…</p> <footer> <svg>…</svg> </footer>

正如我在过去的问题中所展示的，我的过程从添加基础样式开始，包括这种旧样式字体：

 body { background-color: #6e2838; font-family: "old-style"; color: #f7eed7; }

即使在最小的屏幕上，Trabant 标头也会主导我的设计。 此标题混合了两个图像。 第一个是可扩展的 SVG Trabant 标志。 为了对辅助技术隐藏这个表示图像，我添加了一个 ARIA 角色并将其隐藏属性设置为 true。 然后，我在第二张图片中添加了一个不同的 ARIA 角色 img，一张被称为“有史以来最糟糕的汽车”的图片：

 <header> <img src="header.svg" alt="" role="presentation" aria-hidden="true"> <img src="header.png" alt="Trabant" role="img"> </header>

无论其父元素的宽度如何，我都需要大的 Trabant 徽标保持完美的圆形。 纵横比是元素的宽度 (x) 和高度 (y) 之间的比率。正方形的比例为 1:1，黄金比例为 1.618:1，宽屏媒体的比例为 16:9。

2009 年，Thierry Koblentz 开发了一种流行的保持内在比率的技术，它使用 padding-top 应用于元素或其中的伪元素。 不同的填充百分比创建不同的比率：

 1:1 100% 4:3 75% 16:9 56.25%

这个标志是圆形的，所以它占据的盒子应该始终保持方形。 我添加一个 :before 伪元素并将其顶部填充设置为 100%：

 header:before { content: ""; display: block; padding-top: 100%; }

现在我的标题中有三个元素。 通过将伪元素和我的图像放置在同一个网格区域中，CSS Grid 使堆叠它们变得容易：

 header { display: grid; } header:before, header img { grid-column: 1; grid-row: 1; }

为了使这些图像水平和垂直居中——无论它们可能变得多宽或多高——我将它们都对齐并对齐到中心：

 header { align-items: center; justify-content: center; }

最后，为了将我的 Trabant 的照片和它的 SVG 标志混合在一起，我添加了一个值为 overlay 的混合混合模式：

 header img:last-of-type { mix-blend-mode: overlay; }

我的横幅部分包含一个大的双音标题，后跟三个短段落：

 <div> <h1>Sparkplug <span>with a roof</span></h1> <p>VEB Sachsenring Automobilwerke Zwickau</p> <p>Manufactured in East Germany</p> <p>1957–1990</p> </div>

我将此标题对齐到右侧，然后收紧其领先以补充其大尺寸。 然后，我将强调色应用到其中添加了双色调效果的 span 元素：

 h1 { font-size: 4.875rem; line-height: 1.1; text-align: right; } h1 span { color: #f85981; }

为了不强调横幅的第二段，我使用 :nth-of-type 伪类选择器并减小其大小：

 #banner p { font-size: 1.424rem; } #banner p:nth-of-type(2) { font-size: 1rem; }

为每种屏幕尺寸设置了这些基础样式后，我通过添加具有三个自动调整大小的行的三列对称网格来介绍中型屏幕的布局：

 @media (min-width: 48em) { body { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto auto; padding: 4rem; } }

页眉和横幅分区都填满了我的布局的整个宽度。 我将横幅放在第一行，即使它在我的 HTML 中排在第二位：

 header, #banner { grid-column: 1 / -1; } header { grid-row: 2 / 4; } #banner { grid-row: 1; }

调整字体大小以保持平衡的层次结构是跨屏幕尺寸开发设计最令人满意的方面之一。 这也是最具挑战性的项目之一。 我通过将它们向上移动我的印刷比例来增加标题和两个段落的大小：

 h1 { font-size: 8rem; line-height: 1.1; text-align: center; } #banner p { font-size: 2.027rem; } #banner p:nth-of-type(2) { font-size: 1.266rem; }

我的标题占据了大屏幕的一半宽度，我平衡了它的视觉重量和其余内容，包括超大标题。 虽然这个设计看起来不对称，但它的网格是对称的，包含六个等宽的列：

 @media (min-width: 82em) { body { grid-template-columns: repeat(6, 1fr); grid-column-gap: 2vw; grid-row-gap: 2vh; } }

标题涵盖了我布局中的前三列和所有三行：

 header { grid-column: 1 / 4; grid-row: 1 / 4; }

我需要将横幅的标题和分区放在我的网格上，而不是包含它们的横幅。 我将该部门的显示属性更改为内容，这有效地将其从 DOM 中删除以进行样式设置：

 #banner { display: contents; }

我使用列号和行号将横幅的子元素放在我的标题对面。 接下来，我再次增加标题的大小，然后放置运行文本的分区和段落，将分区之前的列留空。 这为我的页脚创建了一个空间：

 #banner h1 { grid-column: 4 / -1; grid-row: 1; font-size: 6.5rem; } #banner div { grid-column: 5 / -1; grid-row: 2; } body > p { grid-column: 5 / -1; grid-row: 3; }

最后，我将页脚放在我正在运行的文本旁边，这增加了这种老式设计的不对称外观：

 footer { grid-column: 4; grid-row: 3; }

将插图和摄影与大胆的形状和清晰的排版融合在一起是 Huber 标志性风格的一个决定性方面。 通过选择当代的旧式字体并使用当今的技术——包括混合模式和网络字体——我们可以效仿 Huber 的例子，创造具有经典感觉的现代设计。

过渡字体

在 17 世纪，启蒙时代是一场拒绝传统艺术、文学和哲学的知识运动。 1692 年，路易十四委托制作了一种基于科学原理而非书法的新字体。 结果是 Romain du Roi，一种基于 2,304 个方格网格的字母字体。

Romain du Roi 的设计比大多数以前的字体更精确，其笔触在粗细之间形成了鲜明的对比。 它影响了现在著名的字体设计师 John Baskerville、Giambattista Bodoni 和 William Caslon。 他们的工作消除了人文主义书法的所有痕迹，创造了过渡（新古典）字体，利用了新墨水和更高质量的纸张。

在过渡字体中，小写字母具有垂直或几乎垂直的重音。 包括“b”、“d”、“h”和“l”在内的升序字母的头部衬线通常更水平。 许多笔画的末端用球形末端标记，而不是有角度的、钝的或衬线。

当代过渡字体很受欢迎，包括由 Jelle Bosma 于 2004 年为 Microsoft 的 ClearType Font Collection 设计的 Cambria。 Cambria 与 Windows Vista 一起发布。 Georgia 由 Matthew Carter 于 1993 年设计。Mrs Eaves 由 Zuzana Licko 于 1996 年设计，是 Baskerville 的变体，以 John Baskerville 的妻子 Sarah Eaves 的名字命名。

识别现代字体

虽然旧式和过渡字体增强了粗笔和细笔之间的对比，但现代字体将这一特征发挥到了极致。 Modern 一词可能会产生误导，因为这种风格的第一个字体是由 Firmin Didot 于 1784 年设计的。 Didot 是 Francois-Ambroise 的儿子，包括 Ambroise 在内的几种字体都以他的名字命名，当然还有 Didot。

Giambattista Bodoni 将他的名字命名为 Didone 风格的字体，粗细笔划之间的对比突然发生了变化。 这些字体还具有不带括号的衬线，粗细之间有锐角，垂直轴和开放字母中的小孔，包括小写字母“a”。

现代字体通常被视为优雅和时尚的选择。 这就是为什么当您浏览摆满时尚杂志的货架时，您会发现他们经常使用 Didone 字体作为他们的标头。

但这些相同的特征——极端的对比度、更小的孔径和垂直轴——也出现在个性迥异的现代字体中。

现代字体

我只需要三个结构元素来实现我下一个受 Huber 启发的设计； 一个包含两个 Trabant 徽标、一个横幅分区和我的主要内容的标题：

 <header> <div><svg>…</svg></div> <div><svgv…</svg></div> </header> <div class="banner">…</div> <main> <ul>…</ul> <p>…</p> </main>

这些基础样式为每个屏幕增添了个性，无论其大小。 他们添加了现代的高对比度字体和将 Trabant 的轮廓与线性渐变混合的背景，以增加此设计的深度：

 body { background-color: #34020B; background-image: url(body.svg), linear-gradient(180deg, #6E2838 0%, #98304D 21%, #34020B 99%); font-family: "modern"; color: #fff; }

我将 Trabant 蓝图水平放置到一半，而渐变在我的页面上重复：

 body { background-position: 50vw 2rem, 0 0; background-repeat: no-repeat, repeat-x; }

横幅包含一个大标题。 我在我的 HTML 中添加了明确的换行符，并添加了一个 span 元素来为特定的单词添加颜色。 然后，我将横幅中的段落分组为一个部分。 这将允许我在此过程中稍后在更大的屏幕上更改其在布局中的位置：

 <div> <h1>The worst <span> car ever made</span></h1> <div> <p>VEB Sachsenring Automobilwerke Zwickau</p> <p>Manufactured in East Germany</p> <p>1957–1990</p> </div> </div>

我的蓝图背景图像的位置为大标题留出了空间。 为了确保它不会超出我允许的空间，我将此标题的最大宽度限制为视口宽度的一半：

 #banner h1 { max-width: 50vw; }

然后，我为 span 元素添加颜色并调整横幅类型的大小，增加标题大小并减少其前导以创建一个实心文本块：

 #banner h1 { font-size: 4rem; line-height: 1; text-transform: uppercase; } #banner h1 span { color: #f85981; } #banner p { font-size: 1.424rem; } #banner p:nth-of-type(2) { font-size: 1rem; }

此设计包括 Trabant 规格列表； 它的燃料容量和消耗，加上东德政府定义的汽车价格：

 <li> <h3>Two-stroke fuel tank</h3> <p><b>6.3</b>gallon</p> </li> <li>…</li> <li>…</li>

这种 HTML 顺序在没有样式的情况下是有意义的，但我需要将标题和段落组合在视觉上颠倒以形成更紧密的副本块。 我通过将列表项指定为弹性容器并将它们的默认方向从行更改为列反向来翻转标题和段落的顺序：

 li { display: flex; flex-direction: column-reverse; } ul p { font-size: 1.802rem; } ul p { color: #f85981; }

在选择字体时，数字设计是一个重要的考虑因素。 当类型设置为小尺寸时，您的选择可能取决于清晰度和可读性。 许多有特色的现代字体中的数字具有独特的曲线和其他特征，这些特征在以较大尺寸使用时有助于设计的个性。

我想在这个设计中突出数字的特点，所以我加大了粗体元素。 虽然我通常不提倡更改任何字体的跟踪，但增加这些数字的字母间距有助于突出它们的字符：

 ul pb { font-size: 4.5rem; letter-spacing: .05em; line-height: .8; color: #fff; }

我的规格列表中​​的价格还包括一个包含东德货币代码 DDM 的 span 元素：

 <li> <h3>Official state price</h3> <p><b>7,450</b> <small>DDM</small> </li>
 <li> <h3>Official state price</h3> <p><b>7,450</b> <small>DDM</small> </li>

对我来说，每一个印刷元素——无论多么小——都是一个尝试有趣的字体处理的机会。 这个小元素的微小足迹使其非常适合旋转到垂直位置，因此它整齐地坐在大数字旁边：

 ul p small { font-size: .889rem; text-align: right; transform: rotate(180deg); writing-mode: vertical-rl; }

这种程度的排版细节对于基础样式来说可能看起来太过分了，但我在为小屏幕设计字体时和为大屏幕设计布局一样多。

这也意味着我只需要对中等大小的屏幕进行细微的调整，首先通过更改我的 CSS 渐变背景中的颜色值并将我的 Trabant 蓝图重新定位到屏幕中心，距离顶部 30rem：

 @media (min-width: 48em) { body { background-image: url(body.svg), linear-gradient(180deg, #6E2838 0%, #98304D 20%, #34020B 100%); background-position: 50% 30rem, 0 0; } }

将布局引入中型屏幕只需将两个标题徽标放在屏幕的相对两侧。 我在标题中添加了两个对称的列并对齐徽标以平衡它们的中心线：

 header { display: grid; grid-template-columns: 1fr 1fr; align-items: center; width: 100%; }

我将第一个徽标对齐到左侧，第二个对齐到右侧：

 header > *:first-child { text-align: left; } header > *:last-child { text-align: right; }

超大标题是展示许多现代字体中复杂细节的绝妙方式，因此我增加了它的大小并利用我添加到我的 HTML 中的空白将其单词分成三行：

 #banner h1 { white-space: pre; max-width: 100vw; font-size: 8rem; }

而在小屏幕上，横幅的段落跟在 HTML 中一样跟随标题，我想将它们与我的标题结合起来创建一个有趣的印刷元素。

我使用绝对定位将包含这些段落的分区移动到位。 当标题改变大小时，基于文本的 top 和 left 值允许这些段落保持在正确的位置：

 #banner { position: relative; margin-bottom: 25rem; } #banner div { position: absolute; top: 8.25em; left: 20em; }

对于我最后的中等尺寸屏幕调整，我将我的无序列表变成了一个弹性容器，并将其项目设置为占用均匀数量的可用水平空间：

 ul { display: flex; } li { flex: 1; }

为多种屏幕尺寸调整设计是我非常喜欢的挑战。 为了利用大屏幕上可用的额外空间，我将网格值应用于 body 元素以创建三个对称的列：

 @media (min-width: 82em) { body { display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 2vw; }

此设计中的元素不重叠，因此我使用 grid-template-areas 来简化它们。 这个设计有九个网格区域，我给每个网格区域起一个反映其内容的名称； 标题、横幅、数据和主要内容：

 body { grid-template-areas: "header header ." "banner banner data" ". . main"; }

我使用区域名称放置这些元素，这允许我更改它们在我的布局中出现的位置，而不会改变它们在我的 HTML 中的位置：

 header { grid-area: header; } #banner { grid-area: banner; } main { display: contents; } main > p { grid-area: main; } ul { display: block; grid-area: data; }

发现 Slab Serif（埃及）字体

这种最终的衬线字体分类首次出现在 19 世纪早期的广告海报中，并且 - 其块状字体 - 旨在吸引注意力。 Slab serif 的一个定义特征是通常不带括号的衬线，它以 90° 角与阀杆相交。

Clarendon 不仅仅是一种字体的名称，而是一种 Slab serif 字体的名称。 虽然许多 Slab serif 中的字体具有均匀的线宽，但 Clarendon 风格打破了惯例，在最粗和最细的笔划之间有更明显的差异。 与其他 Slab serif 不同，Clarendon 有弯曲的括号。

Archer 的球形终端赋予其独特的外观，深受印刷和在线设计师的欢迎。 Sentinel，也是 Hoefler & Co. 的公司，在 2012 年的连任竞选中被巴拉克奥巴马使用。 像 Archer 一样，它有多种粗细，包括斜体。

我选择了 Erik Spiekermann 和 Ole Schafer 的 ITC Officina Serif 作为我的第一本书 Transcending CSS，尽管当时我并不精通字体设计。 同样由 ​​Erik Spiekermann 设计的 FF Unit Slab 有多种粗细、斜体和对 107 种不同语言的支持。

Dalton Maag 是我最常使用其字体的字体制造商。 我为我最近的书籍封面选择了他们的 Lexia，我喜欢它最厚的广告重量的个性，尤其是斜体。 您应该熟悉同样由 Dalton Maag 撰写的 Mokoko，因为我选择它作为本系列的标题和标题。

巴拉克·奥巴马 (Barack Obama) 选择了 Hoefler & Co. 的 Slab serif，而民主党候选人伯尼·桑德斯 (Bernie Sanders) 则选择了 Joshua Darden 的 Jubilat 进行 2016 年总统竞选。 Jubilat 是用途最广泛的 Slab 衬线字体之一，有 11 种粗细搭配斜体字。

平板衬线需要注意

尽管视觉上很复杂，但开发我的最终设计只需要很少的结构元素。 我选择的元素应该看起来很熟悉，因为我已经在几种组合中使用过它们。

标题再次包含两个 SVG 图像，一个横幅部分包括标题和第一段，以及一个显示 Trabant 规范的无序列表。 这一次，我还包括了两个 SVG 元素。 一个是巨大的 57 数字，第二个是沿着弯曲路径的装饰性文字：

 <header> <svg>…</svg> <svg>…</svg> </header> <svg>…</svg> <div>…</div> <div>…</div> <ul>…</ul> <div> <svg>…</svg> </div>

将其中三个元素组合在一起形成了对该设计的图形介绍。 我从包括颜色的基础样式开始，并介绍了平板衬线字体：

 body { background-color: #8a8988; font-family: "slab"; color: #f7eed7; }

我将标题的宽度限制为 220px 并集中对齐其内容：

 header { margin-bottom: 2rem; width: 220px; text-align: center; }

为了让我准确控制它们的外观，并使它们能够缩放以适应任何视口的宽度，我使用 SVG 开发了我的超大数字。 这个可扩展的图形包括两条路径，为了确保它向所有人传达其内容，我在我的 SVG 中添加了一个 ARIA 标签和一个标题元素：

 <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 750 690" role="img" aria-label="1957. The year Trabants were first produced"> <title>The year 1957</title> <path d="…"/> <path d="…"/> </svg>

此 SVG 中的两个数字重叠，以增加深度； 我降低了它们的不透明度，然后使用混合模式来混合它们的颜色：

 body > svg path { opacity: .75; } body > svg path:nth-of-type(1) { fill: #f5e3B4; } body > svg path:nth-of-type(2) { fill: #ba0e37; mix-blend-mode: multiply; }

我介绍图中的最后一个组成部分是垂直单词“Duroplast”，这是一种用于制造 Trabant 车身的纤维增强塑料。 您可以在我的 HTML 中查找此元素，但您不会找到它，因为我使用伪元素生成此内容。 我定位生成的内容，将其书写模式更改为垂直，然后将其旋转 180 度：

 body { position: relative; } body:after { content: "duroplast"; position: absolute; top: 2rem; right: 2rem; font-size: 7rem; transform: rotate(180deg); writing-mode: vertical-rl; }

由于这个伪元素有效地遵循流内容，它以堆叠顺序出现在其上方，使其可以与其他元素混合并为该设计增加额外的深度：

 body:after { mix-blend-mode: overlay; }

Trabants 在其生命周期内产生的数量是使用较低级别的标题开发的，然后是两个段落：

 <div> <h3>Units produced</h3> <p>1957–1990</p> <p>3,096,999</p> </div>

这些元素的视觉顺序与 HTML 不同，我使用 Flexbox 更改它们在其父分区中的顺序。 首先，我将 flex-direction 从默认行更改为列：

 #content { display: flex; flex-direction: column; }

然后，我使用 order 属性对三个元素重新排序，将标题放在最后：

 #content h3 { order: 3; font-weight: normal; text-transform: uppercase; }

最后，我增加了第二段的大小以匹配下面的列表项编号。 这给人的印象是这个内容和下面的无序列表是同一个元素的一部分：

 #content p:nth-of-type(2) { font-size: 4.5rem; }

小屏幕上的空间可能非常宝贵，但这并不意味着我们不能大胆地使用我们的排版。 随着屏幕变得更大，有更多的机会来尝试排版设计。

我通过将网格值应用于 body 元素来将布局引入到中型屏幕，以创建六个对称的列和四个自动调整大小的行：

 @media (min-width: 48em) { body { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, auto); } }

然后，我使用行号将标题和横幅分区放入第一行。 我的横幅占据了前三列，而标题则占据了最后三列：

 header { grid-column: 5 / -1; grid-row: 1; } #banner { grid-column: 1 / 4; grid-row: 1; }

我将现在巨大的数字放在我的网格上并降低它们的 z-index 值，以便它们出现在我的布局中的其他元素后面：

 body > svg { grid-column: 1 / -1; grid-row: 2 / 4; z-index: -1; }

我用网格值替换以前的 :after 伪类定位并增加其字体大小以填充更多可用空间：

 body:after { position: static; grid-column: 4; grid-row: 1 / 3; z-index: 1; font-size: 10rem; }

尽管建立在对称网格上，但将一些列留空会产生不寻常的不对称设计：

 #content { grid-column: 2 / -1; grid-row: 3; mix-blend-mode: difference; } ul { grid-column: 1 / -1; grid-row: 4 / -1; }

然后我整体增加字体的大小，以便在中型屏幕上给人留下深刻印象：

 #content h3, #content p { color: #31609e; } #content h3 { font-size: 1.75rem; } #content p:nth-of-type(1) { font-size: 3rem; } #content p:nth-of-type(2) { font-size: 8rem; }

路径上的 SVG 文本

使用 SVG 呈现文本最令人兴奋的原因之一是它遵循了一条路径，这是一种单独使用 CSS 无法实现的设计设备。 我弯曲的 SVG 包括一个圆形路径，以及一个包含我的内容的文本元素。 我将此文本包含在 SVG textPath 元素中，并使用其 href 属性值将其链接到上述路径的 ID：

 <div> <svg viewBox="0 0 750 700" xmlns="https://www.w3.org/2000/svg"> <path fill="none" stroke="none" d="…"/> <text> <textPath href="#curve-path">…</textPath> </text> </svg> </div>

我不希望这条曲线出现在小屏幕上，所以我在我的基础样式中将其父分区的显示值更改为 none。 使用最小宽度媒体查询，然后我将该值还原为阻止以显示它以用于中等大小的屏幕，将其放置到我的网格上并增加其 z-index 值。 这使它按堆叠顺序向前推进：

 #curve { display: none; } @media (min-width: 48em) { #curve { display: block; grid-column: 1 / 6; grid-row: 2 / 4; z-index: 2; transform: translateY(-1.5rem); } }

有了这个文本，我使用熟悉的 font-size 和 text-transform 样式，然后是 SVG 填充和 text-anchor 属性，它们从路径的开头设置我的文本：

 #curve text { font-size: .889rem; text-transform: uppercase; fill: #fff; text-anchor: start; }

我自信的排版选择要求我也勇敢地选择更大屏幕的布局。 我之前选择的六个对称的列和四行提供了以多种方式放置我的元素的潜力。

已经定义了我所有的排版样式，剩下的就是将我的元素移动到新的位置，将标题、横幅划分和无序列表放在我现在巨大的数字旁边：

 @media (min-width: 64em) { body { grid-column-gap: 2vw; align-items: start; } body > svg { grid-column: 1 / 5; grid-row: 2 / 5; z-index: -1; } header { grid-column: 5 / -1; grid-row: 1; } #banner { grid-column: 5 / -1; grid-row: 2; } #content { grid-column: 1 / 4; grid-row: 4; } #curve { grid-column: 1 / 5; grid-row: 1 / 4; } ul { grid-column: 5 / -1; grid-row: 3 / -1; display: block; } }

阅读该系列的更多内容

• 启发设计决策：Avaunt 杂志
• 受启发的设计决策：紧迫事项
• 启发设计决策：欧内斯特杂志
• 启发设计决策：Alexey Brodovitch
• 启发设计决策：Bea Feitler
• 启发设计决策：Neville Brody
• 启发设计决策：Otto Storch
• 启发设计决策：Herb Lubalin
• 启发设计决策：Giovanni Pintori
• 启发设计决策：Emmett McBain
• 启发设计决策：Bradbury Thompson

注意： Smashing 会员Smashing 会员可以访问设计精美的 Andy 的 Inspired Design Decisions 杂志的 PDF 以及本文中的完整代码示例。 您可以直接从 Andy 的网站购买本期的 PDF 和示例以及所有其他问题。