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

中文排版规则

01仅以一种字体开始 (01 Start with only one font)

The first tip for non-designers dealing with typography is simple and will make your life much easier: Stop combining different fonts you like individually and try using only one font in your future compositions.

对于非设计师来说,处理字体的第一个技巧很简单,它将使您的生活更加轻松:停止组合您喜欢的不同字体,并尝试在以后的合成中仅使用一种字体。

If you don’t believe me, think for a moment about how many different fonts there are out there. And now think about how many great designers there are, who know exactly how to combine a fancy Merriweather with Montserrat to achieve a combination of tradition and modern aesthetic. So if you are not one of those highly educated or visually proficient people and think Merriweather is an American boxer, you should start to use only one font per design job you are doing.

如果您不相信我,请考虑一下那里有多少种不同的字体。 现在想想有多少位伟大的设计师,他们确切地知道如何将花哨的Merriweather与Montserrat结合起来以实现传统与现代美学的结合。 因此,如果您不是受过高等教育或视觉熟练的人之一,并且认为Merriweather是美国拳击手,则应该在您进行的每个设计工作中仅使用一种字体。

A visual comparison between a paragraph with mixed fonts and one with the same font in different styles.
Make your life easier and stick to one font in different weights.
让您的生活更轻松,并坚持使用不同粗细的一种字体。

Using two different fonts successfully in a layout is hard. It requires an in-depth understanding of the essence in type or an enormous portion of luck. In general, a good rule of thumb is, to avoid two typefaces that look similar to each other and have the same classification. For example, do not use Akzidenz Grotesk and Avenir–two per se excellent sans serif fonts–together in the same design because they share too many similarities to the unskilled eye. If you have to use two different typefaces, try using a mix of serif and sans serif instead. Maybe you were lucky enough and your combination has even been mentioned in this article of Digital Synopsis.

很难在布局中成功使用两种不同的字体。 它需要对类型的本质或运气的很大一部分有深入的了解。 通常,一个好的经验法则是避免两个看起来彼此相似且具有相同分类的字体。 例如,不要在同一设计中一起使用Akzidenz Grotesk和Avenir(本身就是两种出色的无衬线字体),因为它们与不熟练的眼睛有太多相似之处。 如果必须使用两种不同的字体,请尝试混合使用衬线和无衬线。 也许您很幸运,并且您的组合甚至在“ 数字概要”的这篇文章中被提及。

If you do not want to make your fortune dependent on chance and you aren’t familiar with the art of fresh typography and the decision-making process behind font-matching, just stick to your favourite font family. And make sure it comes with various weights to differentiate your heading and subheading from your body text without concerns.

如果您不想让自己的命运取决于偶然性,并且您不熟悉新鲜的排版艺术以及字体匹配背后的决策过程,那么请坚持使用您喜欢的字体家族。 并确保它带有各种权重,以使您的标题和小标题与正文毫无区别。

However, the next rule is going to help you with that.

但是,下一条规则将帮助您。

02只使用这十种字体 (02 Only use these ten fonts)

Most of the time we aren’t truly aware of the fonts that accompany us through our days. If you are a designer, the search for good typefaces is something like a scavenger hunt. Simply because there are so many great fonts out there, waiting to be used — I talk about you, delicious Inter. But most of us have like 1000+ fonts on their machines, some may have been never used, always sticking to the same set of five to ten typefaces for a reason.

在大多数情况下,我们并没有真正意识到过去伴随我们的字体。 如果您是设计师,那么寻找优质的字体就像寻宝游戏一样。 仅仅是因为那里有很多很棒的字体在等待使用-我谈论您, 美味的Inter 。 但是我们大多数人在他们的机器上喜欢1000多种字体,有些可能从未使用过,出于某种原因总是坚持使用相同的5到10种字体。

If you are always in the veld, chasing your next .tff download you potentially forget about the important things in life: creating stuff. I want to make your work easier here and show you the top 10 classic typefaces you can always use when in doubt:

如果您始终不知所措,那么追逐您的下一个.tff下载文件可能会让您忘记生活中的重要事情:创造东西。 我想在这里简化您的工作,并向您展示在有疑问时可以使用的十大经典字体:

A list of 10 typefaces you should use in the beginning like Bodoni, Baskerville, Garamond, Sabon and Times New Roman.
Choose any font you like … as long it belongs to this list.
选择您喜欢的任何字体...只要它属于此列表。

If you don’t know the difference between Serif and Sans serif, “sans” simply means “without” and serifs are small lines or strokes attached to the end of a larger stroke. You know Arial, right? That is a typical Sans Serif typeface — Times New Roman, on the other hand, is a font with serifs. In general, benefits are using both Serif and Sans Serif fonts in different situations. A very simple approach is to use Serif fonts at smaller body copy sizes as they are usually easier to read. While Sans Serif fonts typically really stand out in large titles.

如果您不知道Serif和Sans Serif之间的区别,“ sans”仅表示“无”,而Serif是连接到较大笔画末尾的细线或笔画。 你知道Arial,对吗? 那是典型的Sans Serif字体,另一方面,Times New Roman是带有衬线的字体。 通常,在不同情况下同时使用Serif和Sans Serif字体是有好处的。 一种非常简单的方法是在较小的正文副本尺寸上使用Serif字体,因为它们通常更易于阅读。 虽然Sans Serif字体通常在大标题中真正脱颖而出。

Even in 2020, there is this infamous superstition, that you shouldn’t use serif fonts on a digital screen. This opinion still perseveres because, in the early days of digital design, you would have tried to avoid using serif typefaces on screens because of their small pixel density. However, this argument is no longer valid with today’s technology. You can use every font you like in every scenario you could imagine … as long it’s one of the above mentioned.

即使在2020年,也有这种臭名昭著的迷信,您不应该在数字屏幕上使用衬线字体。 这种观点仍然存在,因为在数字设计的早期,由于像素密度小,您可能会尝试避免在屏幕上使用衬线字体。 但是,这种论点在当今的技术中不再有效。 您可以在想像中的每种情况下使用喜欢的每种字体……只要它是上述内容之一。

03点数加倍 (03 Double your point size)

When you start with Web or Interface Design it’s often difficult to determine the font size of headlines, subheadlines, and body text. Yes, you can indeed use your gut feeling, but especially at the beginning, you should follow this simple rule: Always double your point size.

从Web或Interface Design开始时,通常很难确定标题,副标题和正文的字体大小。 是的,您确实可以使用自己的直觉,但是尤其是在开始时,应该遵循以下简单规则:始终将点大小加倍。

This is a good rule of thumb to make sure you get the right visual contrast between different parts of your design. Always double or halve your point size. So if we set our body text in font size 20, it is a good idea to set headlines at 40 pixels. In special cases, the incrementation can also be done by a factor of 3x or 4x.

这是一个很好的经验法则,可确保您在设计的不同部分之间获得正确的视觉对比。 始终将点数加倍或减半。 因此,如果将正文文本设置为字体大小20,则将标题设置为40像素是一个好主意。 在特殊情况下,也可以将系数增加3倍或4倍。

An image with an example paragraph showing how to double the point size in your designs.
When in doubt, try to double your point sizes when sizing type.
如有疑问,请在调整大小时尝试将点大小加倍。

Of course, this is just a tip for the right start in dealing with sizes in typography. And you don’t have to follow this rule in a sectarian way, you might as well experiment with other factors. Often an analysis of websites that use good type design and that you like can help a lot. To check the fonts of other websites quickly and easily, use chrome extensions like Fonts Ninja.

当然,这只是正确处理字体大小的提示。 而且您不必以宗派的方式遵循此规则,您也可以尝试其他因素。 通常,对使用良好字体设计且您喜欢的网站进行分析会很有帮助。 要快速,轻松地检查其他网站的字体,请使用Chrome扩展程序,例如Fonts Ninja 。

There are also other more complex ratios in scaling fonts up and down like “Major Third” and the “Golden Ratio”, that you can check out here with the handy tool Type-Scale. Also, examine the rule of 8dp increments. The “Double your point size” rule is though the most practical and remarkable one in your daily work.

在向上和向下缩放字体时,还有其他更复杂的比例,例如“主要比例”和“黄金比例”,您可以在此处使用方便的Type-Scale工具进行检查。 另外,检查8dp增量的规则。 “将您的点数加倍”规则虽然是您日常工作中最实用,最出色的规则。

04对比事项:跳过字体粗细 (04 Contrast matters: Skip font weights)

In the other tips, you have already heard about font weights. To get a better understanding of that term if you’ve never heard of it: The weight of a typeface is the thickness of the outline. While in normal text editing tools like Word there are usually just two font thicknesses (normal and bold), we as designers can choose from a variety of font weights — as long as we have a font family that allows this.

在其他技巧中,您已经听说过字体粗细。 如果您从未听说过该术语,则可以更好地理解它:字体的粗细是轮廓的粗细。 尽管在普通的文本编辑工具(如Word)中,通常只有两种字体粗细(常规和粗体),但作为设计师,我们可以从各种字体粗细中进行选择-只要我们有允许使用此字体的字体家族即可。

Take Helvetica for example, it’s probably the most loved typeface on planet earth and millions of designers have used it since it’s development in 1957. The problem with this timeless classic though is, that it has only a limited amount of different font weights and the subsequently added weights are not as consistent for example the variants of the font Univers. This is the reason for the success of Helvetica Neue, a new take on of the classic with a more structurally unified set of heights and widths made up of 51 fonts including nine different weights.

以Helvetica为例,它可能是地球上最受欢迎的字体,自1957年问世以来,已经有数百万设计师使用了它。尽管这个永恒的经典字体存在问题,但它的字体粗细有限,其后例如,增加的权重与Univers字体的变体不一致。 这就是Helvetica Neue成功的原因,Helvetica Neue是经典的新代表,其高度和宽度在结构上更加统一,由51种字体组成,包括9种不同的粗细。

An image, showing the differences in font weights of classic Helvetica and Helvetica Neue.
Helvetica Neue offers much more variety than classic Helvetica.
Helvetica Neue提供的品种比经典Helvetica多得多。

Don’t get me wrong, there are several situations where three font weights are more than enough and Helvetica has proven it’s usability multiple times in the past. But Helvetica Neue allows you to achieve visual contrast much easier, which brings me back to tip four: Skip a font-weight in between.

别误会我的意思,在某些情况下,三种字体的权重已绰绰有余,而Helvetica过去已多次证明其可用性。 但是Helvetica Neue使您更轻松地获得视觉对比度,这使我回到了提示四:跳过两者之间的字体粗细。

What that means is, if you want to have a striking headline and some decent body text, try to format the headline in Bold and the body in Light or even thin of it’s still readable and the font family is offering you the possibility. The reason behind that is visual contrast.

这就是说,如果您想要醒目的标题和一些体面的正文,请尝试将标题格式设置为粗体,将正文格式设置为浅色,甚至仍然可以理解,并且字体家族仍然为您提供可能性。 其背后的原因是视觉对比。

A comparison between a paragraph with great visual contrast and one with bad visual contrast because of their font weights.
Try to be bold or light, never regular.
尝试大胆或轻描淡写,永远不要常规。

Slight changes in font-weight may often get overlooked by the audience, so to try to catch their eye with diversity and bolden up your typography to make them notice a difference.

字体粗细的细微变化通常可能会被观众忽略,因此请尝试以多样化吸引他们的注意力,并加粗您的排版以使他们注意到与众不同。

05注意构图中的空间 (05 Mind the space in your composition)

A picture with the Apple Slogan “One more thing …” in white Helvetica on a dark background.

Do you know, why Apple is putting their “one more thing” slogan in tightly kerned Helvetica onto a large screen year and year again completely isolated? Because it is striking. And the reason for that is called white space or negative space.

您知道吗,为什么苹果公司将紧紧紧紧围绕的Helvetica的“另一件事”口号又一次又一次地完全隔离在大屏幕上? 因为令人震惊。 其原因称为空白或负空格。

For every design work you are doing, whether it’s a magazine or an app, many different visual elements make up the whole layout. And there is one section beside the text, illustrations or images that is invisible. However it is maybe the most important one in terms of visual aesthetic: the white space between your elements, which indicates the presence of a canvas. Design theory promotes the use of negative space for elegance and ensuring a quality user experience.

无论是杂志还是应用程序,对于您进行的每项设计工作,整个布局都包含许多不同的视觉元素。 在文字,插图或图像旁边有一个看不见的部分。 然而,就视觉美感而言,它可能是最重要的一个:元素之间的空白表示画布的存在。 设计理论促进了负空间的使用,以达到优雅并确保高质量的用户体验。

So when in doubt, try to let your layout “breathe” a little by reducing the number of things going on at your canvas. If you stuck in your design process, duplicate the artboard and attempt to reduce a certain section of your composition by half and look at the result. Maybe it sucks, maybe not. It is worth trying.

因此,如果有疑问,请尝试通过减少画布上正在进行的事情来让布局稍微“呼吸”。 如果您陷于设计过程中,请复制画板,并尝试将构图的特定部分缩小一半,然后查看结果。 也许很烂,也许没有。 值得尝试。

06奖励之一:永远不要使用Comic Sans或Papyrus (06 Bonus one: Never use Comic Sans or Papyrus)

That one was obvious, right? If not, look at how your decisions as a designer can have a significant impact on the lives of others:

那是显而易见的,对吧? 如果不是,请查看您作为设计师的决定如何对他人的生活产生重大影响:

Watch Ryan Gossling go crazy over AVATARs use of papyrus–the second-worst font in the world.
观看Ryan Gossling为AVATAR使用纸莎草纸而疯狂-这是世界上第二大不良字体。

翻译自: https://uxdesign.cc/5-typography-rules-for-non-designers-7fb72bb40984

中文排版规则

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/274386.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基本响应性的Web设计测试工具

在重新设计页面的过程中。要使页面完全响应的设计(这意味着它会重新调整大小根据浏览器的尺寸和方向)。如iPhone和iPad的移动电话和平板电脑我碰到了一些非常方便的响应设计工具,帮我测试网站在不同的屏幕响应。下面的这些响应的网页设计工具…

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

ux设计Mating calls, warning grunts, and supportive coos are some of the sounds heard throughout the animal kingdom. All species use finely-tuned noises to communicate to one another and inform others of an action or behavior. We humans aren’t all that dif…

css3高级和低级样式属性先后顺序

写css hack 时,由于hack主要针对的是个别浏览器,hack的书写顺序应当是从一般到特殊的写法。 如: .box { width:200px; height:200px; position:fixed; left:0; top:0; _position:absolute; } 如果颠倒顺序,从特殊到一般&#xff0…

sans serif_Sans和Serif相遇可爱

sans serifI first noticed it in this tweet. Exciting upcoming product and snazzy motion work aside, “What a fascinating logotype!”, I exclaimed!我在此推文中首先注意到了它。 我惊呼即将推出的激动人心的产品和令人眼花,乱的动作,“多么迷人…

[ckeditor系列]ckeditor 自己写的一个简单的image上传js 运用iframe的ajax上传

ckeditor最近修改一个上传的,原来的Image的上传插件功能很多,但是自己用,没有必要,就进行了修改,后来就改成了目前的样子,根据_samples/api_dialog.html 进行了修改,把页面里面的调用都进行了修…

sql 避免除0错误_设计简历时避免这3个常见的UX错误

sql 避免除0错误重点 (Top highlight)Having a great looking resume on hand is very important when you’re looking for a job. It is your ticket to land the interview that will get you one step closer to that one job you’ve been dreaming of.在找工作时&#xf…

一个网站自动化测试程序的设计与实现

CSDN博客不再经常更新,更多优质文章请来 粉丝联盟网 FansUnion.cn! (FansUnion) 代码 下载地址:http://download.csdn.net/detail/fansunion/5018357(免积分) 代码亮点:可读性很好,注释详尽 背景 工作中,在维护一…

如何编写数据库可视化界面_编写用于数据可视化的替代文本

如何编写数据库可视化界面什么是替代文字 (What is Alt Text) Alt text (sometimes called Alt tags or alternative text) are written descriptions added to images that convey the meaning of the visual. Good alt text helps more people understand the content. Assis…

reloaddata 跳动_纸跳动像素

reloaddata 跳动I would like to open with a problem.我想开一个问题。 Why are so many designer going straight to pixels?为什么这么多设计师直接使用像素? Over the past few years i’ve witnessed this in my team, my clients and others throughout th…

使用自定义RadioButton和ViewPager实现TabHost效果和带滑动的页卡效果。

参考自http://www.apkbus.com/android-86125-1-1.html 这篇文章技术含量一般,大家别见笑。源码我以测试,在底部可下载。 好了先上效果图: 以下是实现步骤: 1、准备自定义RadioButton控件的样式图片等,就是准…

利益相关者软件工程_改善开发人员团队与非技术利益相关者之间交流的方法

利益相关者软件工程Whether you’re working on a startup or a big company, keeping your stakeholders and non-technical partners engaged and up to date on what the tech team has been building can be hard.无论您是在初创公司还是大公司中工作,都要让您的…

响应式网格项目动画布局_响应式网格及其实际使用方式:常见的UI布局

响应式网格项目动画布局重点 (Top highlight)第二部分 (Part II) Now that you have a basic understanding of how to use grids, you might be wondering how to apply them to layouts you see on the web. Responsive grids are a method to systematically align your des…

时间轴ui设计_我应该在UI设计上花更多时间吗?

时间轴ui设计Let’s start with an example of communication skills: they are important for any profession, and you expect any professional to have a decent level. However, excellent communication skills won’t make up for the lack of core expertise. Imagine …

移动端分步注册_移动应用程序的可用性测试:分步指南

移动端分步注册Written by Justin Mifsud由贾斯汀米夫苏德 ( Justin Mifsud)撰写 The mobile market is huge and growing at a very fast rate. With an estimated 4.5 billion subscribers worldwide, it is forecasted that the number of mobile phones will surpass the …

插图 引用 同一行两个插图_提出食物主题中的插图

插图 引用 同一行两个插图I have a page in my portfolio, which is about search functionality. I wanted that page to feel fun and engaging, to convey a positive vibe, so I decided to add illustrations to it.我的投资组合中有一个页面与搜索功能有关。 我希望该页面…

脸部细微表情识别_您可以仅使用面部表情来控制字体吗?

脸部细微表情识别原型 (The prototype) Facetype is the name of Adam’s interactive project, in which the emotions detected from a person’s facial gestures control a variable font. To each detected emotion corresponds a specific typeface, which keeps transfo…

uva10891Game of sum

题意:经典的取石子游戏是这样的:有一堆石子,A、B两个人轮流取,每次取一颗,只能从边上取,每个石子有相应的价值,A、B两人都想使得自己的价值最多,两个人足够聪明,问最后价值分别是多少 本题则是可…

用户体验设计师能为seo做_用户体验设计师可以从产品设计历史中学到什么

用户体验设计师能为seo做Many things have changed from tool design in the prehistoric era to today’s digital product design. However, we can see surprisingly many similarities. Especially when it comes down to one particular aspect: usability.从史前时代的工…

orton效果_如何使图片发光:Orton效果

orton效果Have you ever seen an impossibly dream-like landscape photo? One with a slow burning, glowing sunset. That’s really the best way to describe it, the image looks as if it’s glowing. You might be thinking, “wow, I wish I was that good and could …

UVA10785 The Mad Numerologist

虽然是sorting的压轴,但是比起前面真心水题。这个专题结合前面string的很多,排序相对简单了,qsort基本解决。 题目: The Mad Numerologist Numerology is a science that is used by many people to find out a mans personality,…