字号与磅值对应关系
Typography is a field that deals with the written word and how letters and characters are presented.
印刷术是处理文字以及字母和字符的显示方式的领域。
The same letters can be styled in different ways to convey different emotions. And there are all kinds of tradeoffs around style versus readability.
相同的字母可以用不同的方式来表达不同的情感。 在样式与可读性之间存在各种折衷。
In this article, we’ll look at some of the smaller - but still important - details related to typography like point size, upper vs lower case letters, em vs en dashes, kerning, and more.
在本文中，我们将介绍一些较小的但仍很重要的与排版有关的细节，例如磅值，大写与小写字母，em与破折号，字距调整等。
点大小 (Point Size)
The point size is a way to introduce standardization to typography. The point size is the smallest unit of measurement.
磅数是将标准化引入印刷术的一种方法。 点大小是最小的度量单位。
In metal type, point size refers to the height of the metal body on which a typeface’s character is cast. In digital typefaces, the metal body is replaced by an invisible box known as the em square. Each character fits inside that em square or em box. The em size of a font is equal to its point size.
在金属类型中，磅值是指将字体字符铸在其上的金属体的高度。 在数字字体中，金属主体被一个称为em square的不可见盒子代替。 每个字符都适合该em正方形或em框。 字体的em大小等于其磅值。
html{
font-size:16px;
}
body{
font-size:1em; // 1em is equal to 16px
}The point size is also used to measure leading (line-height), line length and other elements, apart from font size.
除字体大小外，磅值还用于测量行距(行高)，行长和其他元素。
In digital typefaces, one point is equal to 1/72 of an inch. Twelve points make one pica. Six picas make one inch. A common way of representing picas and points is as follows:
在数字字体中， 一个点等于1/72英寸 。 一分十二分。 六个十二点活字等于一英寸。 表示异食癖和点的常见方式如下：
- 1 pica = 1p 1 pica = 1p
- 1 point = 1 pts or p1 1点= 1分或p1
- 6 picas and 3 points = 6p3 6点活字和3点= 6p3
- 7-point Open Sans with 9 points of leading = 7/9 Open Sans 7分全胜(Sans)领先9分= 7/9全胜
The optimal point size for print is usually between 10-12 points while that for web, the optimal point size is between 15-25 points.
打印的最佳点尺寸通常在10-12点之间，而对于卷筒纸，最佳点尺寸在15-25点之间。
In CSS, you should set font-size in ems or rems than pixels as the former are scalable in nature. Recently, there has been much talk about fluid typography using the newly introduced units vw and vh.
在CSS中，您应该以ems或rems设置字体大小，而不是像素，因为前者本质上是可扩展的。 最近，关于使用新引入的单元vw和vh的流体印刷术的讨论很多。
Learn more about it here : Fluid Typography
在此处了解更多信息： 流体印刷术
Remember, different fonts set at the same point size will not appear to be of the same size due to their individual characteristics, namely—x-height, stroke modulation or contrast and character-width.
请记住，设置为相同字体大小的不同字体由于其各自的特征(即x高度，笔划调制或对比度和字符宽度)而看起来不会具有相同的大小。
大写和小写 (Upper and Lower Case)
Uppercase (UC) is alternatively referred to as caps and capital. It is a typeface of larger characters. Lowercase (LC) is a typeface of small characters. As long as the shift key is not being pressed and the Caps lock is not active, everything typed is in lowercase. The Uppercase and Lowercase is often synonymous with Majuscule and Minuscule.
大写(UC)也称为上限和大写。 它是大字体的字体。 小写(LC)是小写字母的字体。 只要不按下Shift键且Caps锁不处于活动状态，键入的所有内容均使用小写字母。 大写字母和小写字母通常是Majuscule和Minuscule的同义词。
Many languages have two different written representations of their letters, upper case and lower case, also known as majuscule and minuscule forms.
许多语言有自己的字母， 大写和小写 ，也被称为大写字母和微不足道形式的两种不同的书面申述。
Upper case and lower case letters are often mixed in the same piece of text. The use of cases is decided by grammar, but a variety of case styles also exists. Certain case styles are common in computer programming, referred to as naming conventions, like CamelCase and snake_case.
大写字母和小写字母通常混合在同一文本中。 案例的使用由语法决定，但是也存在多种案例样式 。 某些案例样式在计算机编程中很常见，称为命名约定 ，例如CamelCase和snake_case。
大写： (Uppercase:)
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
ABCDEFGHIJKLMNOPQRSTU VWXYZ
小写： (Lowercase:)
a b c d e f g h i j k l m n o p q r s t u v w x y z
abcdefghijklmnopqrstu vwxyz
Capitalization is important for the following reasons:
大小写很重要，原因如下：
- Passwords: passwords are case sensitive, so capitalization add an extra level of security. 密码：密码区分大小写，因此大写字母增加了额外的安全性。
- Measurements: When dealing with computer measurement, and other measurements, capitalization is important for identifying the exact type of measurement. For example, “Mb” (short for Megabit) and “MB” (short for Megabyte) are two different types of measurements with different values. 度量：在处理计算机度量和其他度量时，大写对于确定度量的确切类型很重要。 例如，“ Mb”(兆位的缩写)和“ MB”(兆位的缩写)是两种具有不同值的不同类型的测量。
- Commands 指令
- File names, directories and paths. 文件名，目录和路径。
Ems和Ens (Ems and Ens)
Ems and Ens are a form of the punctuation mark called ‘dash’. Although similar in appearance to a hyphen, they serve different purposes.
Ems和Ens是标点符号的一种形式，称为“破折号”。 尽管外观上与连字符相似，但它们具有不同的用途。
Em Dash (Em Dash)
Use an Em dash to denote a break in the sentence. Substitute it for a comma or to denote a pause in a sentence. They are also used to attribute a quote to a speaker. An Em dash is one em wide—the width of a point size of a typeface. Don’t put any spaces before and after an em dash.For example: The noise from the neighbor’s house—it’s killing me.
用破折号表示句子中的中断。 将其替换为逗号或表示句子中的停顿。 它们还用于将报价单赋予发言人。 破折号是一个em宽度-字体的磅值的宽度。 请勿在破折号之前和之后放置任何空格。例如：邻居家的声音—杀死了我。
- Command for an Em dash on a mac : Shift-Option-Hyphen Mac上Em破折号的命令：Shift-Option-连字符
- Command for an Em dash on Microsoft Word : Alt + Ctrl + (minus) 在Microsoft Word上使用Em破折号的命令：Alt + Ctrl +(减号)
Em dash in HTML :
—or—HTML中的破折号：
—或—
恩达什 (En Dash)
Use an En dash as a replacement for the word ‘to’ or to denote a range of numbers. An En dash is half the width of an Em dash. Don’t put any spaces before and after an en dash.For example: The first world war lasted from 1914–1918.
用破折号代替“ to”一词或表示一系列数字。 破折号是破折号宽度的一半。 在破折号前后不要留任何空格。例如：第一次世界大战始于1914年至1918年。
- Command for an En dash on a mac : Option-Hyphen Mac上的破折号命令：Option-连字符
- Command for an En dash on Microsoft Word : Ctrl + (minus) Microsoft Word上的破折号命令：Ctrl +(减号)
En dash in HTML :
–or–HTML中的破折号：
–或–
紧缩和跟踪 (Kerning and Tracking)
Kerning refers to the spacing between two individual characters within a word.
字距调整是指单词中两个单独字符之间的间距。
Tracking refers to the spacing between words.
跟踪是指单词之间的间距。
Some typefaces are not designed to be kerned or tracked too loosely and vice versa. If one kerns or tracks too tightly or too loosely, they risk sacrificing readability and legibility.
某些字体的字距调整或跟踪设计得不太宽松，反之亦然。 如果一个字距或轨道太紧或太松，它们就有牺牲可读性和可读性的风险。
When deciding how tight or loose to kern or track your text, it is advisable to first consider the scale at which the text will be interacted with. If it is to be printed, how far away from the printed text will the viewer be? Will they be driving by? Will it be on read on a backlit screen?
在决定紧紧或松散紧迫或跟踪文本时，建议首先考虑与文本进行交互的比例。 如果要打印，查看者距离打印文本有多远？ 他们会开车吗？ 可以在背光屏幕上阅读吗？
One should also consider the positive and negative ground when tracking and kerning. Tracking too tightly or too loosely can result in awkward figure/ground relations that will distract the user.
跟踪和字距调整时，还应该考虑正面和负面的基础。 跟踪得太紧或太宽松都会导致尴尬的身形/地面关系，从而分散用户的注意力。
易读性 (Legibility and Readability)
易读性 (Legibility)
Legibility means being able to differentiate different characters in a text. Legible text implies it can be easily interpreted. Look at the unique characteristics of a typeface when considering legibility. Some of the considerations are as follows:
易读性意味着能够区分文本中的不同字符。 清晰的文字意味着可以轻松地对其进行解释。 考虑易读性时，请查看字体的独特特征。 一些注意事项如下：
You should use each typeface according to it’s context and intended usage. Look into it’s history and it’s best use case scenarios. For example : Garamond is best used for large bodies of text on print whereas Georgia for screen.
您应该根据每种字体的上下文和预期用途来使用它 。 查看它的历史和最佳用例场景。 例如：Garamond最适合用于打印大量文本，而Georgia用于屏幕。
Keep in mind whether the typeface is for display text or body text.
请记住，字体是用于显示文本还是用于正文文本 。
The x-height of a typeface is the size of the lowercase ‘x’ in a typeface. A typeface with medium to high x-height results in a text legible at even small sizes.
字体的x高度是字体中小写字母'x'的大小。 X高度为中等到较高的字体，即使是很小的字体，也可以使文本清晰易读。
Conventionally, serif typefaces are more legible for body text than their sans-serif counterparts.
按照惯例， 衬线字体的字体比无衬线字体更易于理解。
可读性 (Readability)
Readability means arranging group of words or a blocks of text in such a way to make the text more accessible. The idea is to reduce the amount of effort required to read a body of text.
可读性意味着以使文本更易于访问的方式排列单词或文本块。 这样做的目的是减少阅读正文所需的工作量。
Stephen Coles remarks that readability, not only begs the question of “Can you read it?” but whether ” do you want to read it?”.
斯蒂芬·科尔斯(Stephen Coles)指出，可读性不仅要提出“您可以阅读吗？”的问题。 但是是否“您想阅读？” 。
Jason Santa Maria points out in his book On Web Typography that reading is not a linear activity. We read in a back and forth motion called saccades, which is our eyes hopping from one point to another. Also, text with familiar words makes it easier for us to read. Some basic points to remember when considering readability are as follows:
杰森·圣玛丽亚(Jason Santa Maria)在他的《 网络印刷术》一书中指出，阅读不是线性活动。 我们朗读来回运动，称为“ saccades” ，这是我们的眼睛从一个点跳到另一个点。 同样，带有熟悉单词的文本使我们更容易阅读。 在考虑可读性时要记住的一些基本要点如下：
Contrast refers to the change in thickness of the stroke in different parts of the letter. Higher the contrast, higher the change in stroke. Use medium to low contrast typefaces for long bodies of text.
对比度是指字母不同部分的笔画粗细的变化。 对比度越高，笔画变化越大。 对于较长的正文，请使用中低对比度字体。
Line Height refers to the distance between two lines of text. You do not want to make the block of text neither too tight nor too loose. You can control line height in CSS by the property ‘line-height’. For most texts, you can set it between 1.2 to 1.5 (without any units).
行高是指两行文本之间的距离。 您不想使文本块既不太紧也不不太松动。 您可以通过属性“ line-height”控制CSS中的行高。 对于大多数文本，您可以将其设置为1.2到1.5(不带任何单位)。
Line length (measure) refers to the average number of characters in a line of text. A large line length hampers readability by making it difficult for our eyes to scan the text. Usually about 45-75 characters per line is optimal for a body of text. If you plan on increase the line length beyond that, then also take care to increase the line height so that there is enough space between two lines of text. In CSS, you can set the width of the container, and by using the em unit, you can get close to a set number of characters, depending on the width-to-height ratio of the font. Example: width: 35em;
行长 (度量)是指一行文本中的平均字符数。 较大的行长会导致我们的眼睛难以扫描文本，从而影响可读性。 通常，每行文本大约45-75个字符是最佳选择。 如果您计划增加行长，请注意增加行高，以使两行文本之间有足够的空间。 在CSS中，您可以设置容器的宽度，通过使用em单位，您可以接近设置的字符数，具体取决于字体的宽高比。 例如：width：35em;
Tracking refers to adjusting the space between characters in a text. Adding tracking means adding white space between characters and vice versa. At small font sizes i.e. less than 10pts, adding tracking helps in improving readability. Similarly, for large headings, use negative tracking to bring the letters closer. You can control tracking in CSS via ‘letter-spacing’ property. For example : letter-spacing: 0.05em;
跟踪是指调整文本中字符之间的间隔。 添加跟踪意味着在字符之间添加空格，反之亦然。 在较小的字体大小(即小于10pts)下，添加跟踪有助于提高可读性。 同样，对于大标题，请使用负向跟踪使字母更接近。 您可以通过“ letter-spacing”属性控制CSS中的跟踪。 例如：字母间距：0.05em；
Font size refers to the size of the font used in a text. For mobile display, use sizes of at least 12px. You can control font-size in CSS via ‘font-size’ property. Example: font-size: 48px;
字体大小是指文本中使用的字体大小。 对于移动显示，请使用至少12像素的尺寸。 您可以通过'font-size'属性控制CSS中的字体大小。 例如：font-size：48px;
As you can see, you need to take into account a lot of factors to ensure optimal legibility and readability. Remember, there are no hard and fast rules for any of the above described factors. They are mere guidelines which might help you to train your typographic eye better.
如您所见，您需要考虑很多因素以确保最佳易读性和可读性。 请记住，上述任何因素都没有硬性规定。 它们仅是准则，可以帮助您更好地训练印刷眼睛。
颜色和色调值 (Color and Tonal Value)
In color theory, a tonal value is produced by adding white, grey, or black to a selected color. This does not change the hue but does alter the colorfullness, also known as saturation. When discussing tonal value, there are three main terms that must be discussed: Tint, Tone, and Shade.
在色彩理论中，通过将白色，灰色或黑色添加到选定的颜色来产生色调值。 这不会改变色调，但会改变色彩度，也称为饱和度。 在讨论音调值时，必须讨论三个主要术语：色调，色调和阴影。
Tint is the addition of white to a color. Tint can be used to highlight an area as well as begin to create the illusion of depth on an object.
色调是白色添加到一种颜色。 淡色可用于突出显示区域以及开始在对象上产生深度幻觉。
Tone is the addition of grey to a color. The tonal color creates a more muted and less saturated color.
色调是将灰色添加到颜色中。 色调颜色创建了更柔和和更不饱和的颜色。
Shade is the addition of black to a color. Shade can be used to darken and area to create the illusion of depth on an object.
阴影是黑色添加到一种颜色。 阴影可用于使区域变暗并在对象上创建深度错觉。
By altering a colors tonal value, you can create the illusion of depth in images as well as alter the saturation level to better apply color for a desired emotion or mood.
通过更改颜色色调值，您可以在图像中创建深度幻觉，还可以更改饱和度级别，以更好地将颜色应用于所需的情感或情绪。
有关排版的更多信息： (More on Typography:)
翻译自: https://www.freecodecamp.org/news/typography-in-detail-point-size-em/
字号与磅值对应关系
1434
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
