字號與磅值對應關系_終極版式指南：磅值，大寫與小寫，Em和En破折號等

字號與磅值對應關系

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.

通過更改顏色色調值，您可以在圖像中創建深度幻覺，還可以更改飽和度級別，以更好地將顏色應用于所需的情感或情緒。