.net网站开发实例,免费咨询在线医生,百度入驻哈尔滨,环保网站建设情况报告sans serifI first noticed it in this tweet. Exciting upcoming product and snazzy motion work aside, “What a fascinating logotype!”, I exclaimed!我在此推文中首先注意到了它。 我惊呼即将推出的激动人心的产品和令人眼花#xff0c;乱的动作#xff0c;“多么迷人…sans serifI first noticed it in this tweet. Exciting upcoming product and snazzy motion work aside, “What a fascinating logotype!”, I exclaimed! 我在此推文中首先注意到了它。 我惊呼即将推出的激动人心的产品和令人眼花乱的动作“多么迷人的标识” MakeSpace.MakeSpace 。 A few days after, I was browsing Teachable, and noticed a freshly rebranded and redesigned site. Typographic choices? Lo and Behold! There it was, again. 几天后我正在浏览Teachable 并发现了一个经过重新命名和重新设计的网站。 印刷选择 瞧 再次出现。 Now, I was a woman on a mission. I rallied some of my fellow type sleuths (h/t Kawal Oberoi and yash arora), and we found more! All newer brands, but most interestingly — across industries. A live video calling tool, a development project, a photographer’s portfolio and of course, an online course-hosting platform. 现在我是一名执行任务的女士。 我召集了一些我的同类型侦探(h / t Kawal Oberoi和yash arora )我们发现了更多 所有新品牌但最有趣的是-跨行业。 实时视频通话工具 开发项目 摄影师的作品集 当然还有在线课程托管平台。 Historically, one of the pillars of good visual design is contrast. Contrast creates hierarchy, in this case, typographic hierarchy, that helps distinguish elements from one another. This in turn, directs the reader’s attention through the content with intent and enhances the visual appearance. 从历史上看良好的视觉设计的Struts之一是对比度。 对比会创建层次结构在这种情况下为印刷层次结构有助于将元素彼此区分开。 反过来这可以有目的地通过内容引导读者的注意力并增强视觉外观。 So naturally, pairing serifs and sans serif might be the oldest rule in the book. Stylistically, they establish very clear contrast through their forms. Emotionally too, serifs feel older and more mature, while sans are perceived to be more contemporary and youthful. Typeface combinations pairing sans serif for the header with a serif body or vice versa are a dime a dozen, across print, web, and apps. A classic combination, almost impossible to get wrong. 很自然将衬线和无衬线配对可能是本书中最古老的规则。 从风格上讲它们通过其形式建立了非常清晰的对比。 在情感上衬线也感觉更老和更成熟而sans被认为更现代和年轻。 在打印Web和应用程序中字体组合将无衬线的标题与衬线体配对反之亦然一角钱。 一个经典的组合几乎不可能出错。 So, what’s special or unique here?It’s how alike and seamless they’re made to look. Almost competing or merging with each other. It’s the anti-contrast. 所以这里有什么特别之处或独特之处是使它们看起来多么相似和无缝。 几乎彼此竞争或合并。 这是反对比。 让我们分解一下 (Let’s break it down) Founders Grotesk by Klim Type Foundry and 创始人Grotesk以及IBM和Bold Monday的IBM Plex Serif by IBM and Bold Monday.IBM Plex Serif 。 To understand what’s going on, we first have to talk about x-height. It is exactly what the name suggests— the measure from the baseline to the top of a lowercase x. 要了解发生了什么我们首先必须讨论x-height 。 顾名思义它就是从基线到小写字母x顶部的量度。 Adobe Fonts has a good tool to help filter by x-height, and also font weight.Adobe字体有一个很好的工具可以帮助您按x高度和字体粗细进行过滤。 One of the key commonalities in all our examples is similar x-height in the choice of sans serif and serif fonts. This is the first thing that tricks us into reading through the words seamlessly, especially when appearing in larger blocks of text. Mixing typefaces with similar x-heights feels harmonious. There’s a lot of other decisions at play here, including but not limited to optical matching of weights, similar ascender (part of a letter that extends above the level of the top of an x) and descender (part of a letter that extends below the baseline) heights, but matching x-heights is an important one. 在我们所有示例中主要的共同点之一是在选择无衬线字体和衬线字体时x高度相似。 这是欺骗我们无缝阅读单词的第一件事尤其是当出现在较大的文本块中时。 混合具有类似x高度的字体感觉很和谐。 这里还有许多其他决策在起作用包括但不限于权重的光学匹配类似的升序(字母的一部分延伸到x的顶部上方)和降序(字母的一部分延伸到 x 以下)。基准)高度但匹配x高度是重要的。 From top → bottom: Square District One — Neue Haas Grotesk by Font Bureau, Domaine by Klim Type Foundry. Teachable — Reckless by Displaay Type Foundry, Basis Grotesque by Colophon Foundry. MakeSpace — Suisse Works Int’l of the Swiss Typefaces library.从上到下一号广场-Font Bureau的Neue Haas Grotesk Klim Type Foundry的Domaine 。 受教- 鲁莽的Displaay型铸造 基础怪诞的后记代工。 MakeSpace-瑞士字体库的Suisse WorksIntl 。 The simplest way to create this for your designs is go back to one of our examples from before: MakeSpace. It uses the Suisse family in serif and sans serif variants. And that’s it! Fonts within the same family have similar features, and so the contrast between them is largely limited to the addition/removal of serifs. 为您的设计创建此效果的最简单方法是回到以前的示例之一MakeSpace。 它在衬线和无衬线变体中使用Suisse系列。 就是这样 同一家族中的字体具有相似的功能因此它们之间的对比很大程度上限于添加/删除衬线。 Another example of using variants within the same type family to achieve this result.使用同一类型族中的变体来获得此结果的另一个示例。 最后的想法 (Final Thoughts) Vanderbrand, the team behind Square One District, explains their type choices on their website. Square One区背后的团队Vanderbrand在其网站上解释了他们的字体选择。 “The versatility of the primary typeface complements the atypical typographic system where serif and sans serif typefaces are used in combination to bring vibrancy and optimism…” “主要字体的多功能性补充了非典型字体系统在该系统中衬线字体和无衬线字体被结合使用以带来生机和乐观……” Vibrancy and Optimism. And without sounding too philosophical, I think it’s quite poetic that this trend, or style of pairing, whatever we’re calling it— highlights how everything, just like in typography, is beautiful, balanced and harmonious in spite of, but ever so often, because of our differences. 充满活力和乐观。 而且尽管听起来没有什么哲理性但我认为这种趋势或配对方式(无论我们称之为什么)颇具诗意强调了尽管印刷术中的一切就像印刷术一样都是美丽平衡且和谐的尽管如此但经常如此 因为我们与众不同。 If you’re interested in well-curated thoughts and tips about typography, please do subscribe to my newsletter: tiptoptypetips. You can expect a freshly-minted edition every fortnight. A quick roundup of all things typography — tricks, hacks, lists and more. 如果您对精心策划的排版想法和技巧感兴趣请订阅我的新闻通讯 tiptoptypetips 。 您可以每两周获得一份新鲜的版本。 快速汇总所有类型的排版-技巧黑客列表等。 翻译自: https://medium.com/swlh/a-sans-and-serif-meet-cute-b66672a78700sans serif
