sans serif

I 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 Works&Int'l 。

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-b66672a78700

sans serif


http://www.taodudu.cc/news/show-893909.html

相关文章:

  • sql 避免除0错误_设计简历时避免这3个常见的UX错误
  • 如何编写数据库可视化界面_编写用于数据可视化的替代文本
  • reloaddata 跳动_纸跳动像素
  • 利益相关者软件工程_改善开发人员团队与非技术利益相关者之间交流的方法
  • 响应式网格项目动画布局_响应式网格及其实际使用方式:常见的UI布局
  • 时间轴ui设计_我应该在UI设计上花更多时间吗?
  • 移动端分步注册_移动应用程序的可用性测试:分步指南
  • 插图 引用 同一行两个插图_提出食物主题中的插图
  • 脸部细微表情识别_您可以仅使用面部表情来控制字体吗?
  • 用户体验设计师能为seo做_用户体验设计师可以从产品设计历史中学到什么
  • orton效果_如何使图片发光:Orton效果
  • hp-ux锁定用户密码_UX设计101:用户研究-入门需要了解的一切
  • extjs6 引入ux_关于UX以及如何摆脱UX的6种常见误解
  • illustrator下载_Illustrator笔工具练习
  • 怎么更好练习数位板_如何设计更好的仪表板
  • hp-ux锁定用户密码_我们如何简化925移动应用程序的用户入门— UX案例研究
  • 微信公众号无需二次登录_您无需两次解决问题-您需要一个设计系统
  • 视觉工程师面试指南_选择正确视觉效果的终极指南
  • 问题反馈模板_使用此模板可获得更好,更有价值的UX反馈
  • iofd:文件描述符_文字很重要:谈论设计时18个有意义的描述符
  • 数据可视化 信息可视化_可视化哲学的黎明
  • 重口味动漫_每种口味的图标样式
  • 从头开始vue创建项目_我正在以设计师的身份开始一个被动的收入项目。 从头开始。...
  • 英国文化影响管理风格_文化如何影响用户体验
  • element ui 空格_空格是您的UI朋友。 大量使用它。
  • qt 设计师缩放_重新设计缩放体验
  • 安卓应用部件_设计应用程序小部件的痛苦和喜悦
  • ux设计中的各种地图_UX设计中的空白
  • ux设计中的各种地图_如何在UX设计中使用颜色
  • figma设计_Figma中简单,可重复使用的设计系统

sans serif_Sans和Serif相遇可爱相关推荐

  1. ux设计_声音建议:设计UX声音的快速指南

    ux设计 Mating calls, warning grunts, and supportive coos are some of the sounds heard throughout the a ...

  2. 中文排版规则_非设计师的5条排版规则

    中文排版规则 01仅以一种字体开始 (01 Start with only one font) The first tip for non-designers dealing with typogra ...

  3. 工作经验教训_在设计工作五年后获得的经验教训

    工作经验教训 This June it has been five years since I graduated from college. Since then I've been working ...

  4. 线框模型_进行计划之前:线框和模型

    线框模型 Before we start developing something, we need a plan about what we're doing and what is the exp ...

  5. react动画库_React 2020动画库

    react动画库 Animations are important in instances like page transitions, scroll events, entering and ex ...

  6. facebook有哪些信息_关于Facebook表情表情符号的所有信息

    facebook有哪些信息 Ever since worldwide lockdown and restriction on travel have been imposed, platforms l ...

  7. 见证开户_见证中的发现

    见证开户 Each time we pick up a new video game, we're faced with the same dilemma: "How do I play t ...

  8. vue路由匹配实现包容性_包容性设计:面向老年用户的数字平等

    vue路由匹配实现包容性 In Covid world, a lot of older users are getting online for the first time or using tec ...

  9. ui设计基础_我不知道的UI设计的9个重要基础

    ui设计基础 重点 (Top highlight) After listening to Craig Federighi's talk on how to be a better software e ...

最新文章

  1. requests.exceptions.ConnectionError: (‘Connection aborted.‘, BadStatusLine(“‘‘“,))
  2. 转 JavaScript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)...
  3. 暑期总结之--c#界面设计作业Mini U-NET(多图杀猫)
  4. Codeforces 989C (构造)
  5. boost::iostreams模块实现大文件偏移量使用 file_descriptor 进行测试
  6. drools 执行函数_Drools可执行模型还活着
  7. vue项目查看构建后项目报告,项目个模块依赖占比比例情况
  8. js基础知识汇总05
  9. 计算方法——C语言实现——LU分解法求解非线性方程
  10. 北京儿研所自制药一览表,宝妈们必读!转
  11. PS:PS将彩色相片变成纯黑白色
  12. c语言求m n最小公倍数,最大公因数和最小公倍数的求法 求mn的最大公约数C语言...
  13. led灯条串联图_LED灯如何串联?
  14. 解决NameError: name ‘xxx‘ is not defined
  15. iOS视频——视频文件、播放视频
  16. Unity对于手柄的支持
  17. P6专题:P6 EPPM和PPM基本概念
  18. WordPress发布新文章Email通知注册用户
  19. 电视家海信html安装不了,海信电视(盒子)安装电视家方法
  20. 智能外呼系统到底有多智能

热门文章

  1. 发布 项目_第十八期科创基金项目发布会圆满结束
  2. group by很多字段是不是会很慢_女生回复我总很慢,怎么办?
  3. php记录已经点击过,最近一次的PHP面试题记录,office已到手!
  4. execve系统调用_张凯捷—系统调用分析(3) (基于最新Linux5.0版本系统调用日志收集系统)...
  5. mysql 主从优点_MySql主从配置实践及其优势浅谈
  6. linux c显示日期,Linux C判断日期格式是否合法
  7. Office Word界面和页面字体模糊不清的解决方案
  8. JAVA语法——经典题目01
  9. socket与socketServer通信
  10. 【Python】Python Mako模板使用