0. Introduction

This article tries to answer some of the common questions related to font. Most of the content are extracted from the paper in Reference 1.

1. Font Format

TrueType (.ttf)

• Edit the sshd config file to includa a Match User block
  • sudo nano /etc/ssh/sshd_config
  • add below code to the very bottom of the file

OpenType (.otf)

• Jointly by Microsoft and Adobe.
• Extension of TrueType that adds support for PostScript font data.
• Advantages:
  • broader multi-platform support: works on both PCs and Macs
  • Better language support – it includes the standard range of Latin and many international characters
  • An OpenType font file can contain many non-standard glyphs

Embeded OpenType (.eot)

EOT is supported exclusively by Internet Explorer versions 8.x and lower. EOT fonts’ digital rights management technique prevents them from being copied and used without a license.

Web Open Font Format (.woff)

WOFF is a font format for use in web pages. WOFF files are OpenType or TrueType fonts, with format-specific compression applied and additional XML metadata added. 

WOFF Version 1 uses the widely available zlib compression (specifically, the compress2 function), typically resulting in a file size reduction for TrueType files of over 40%. Since OpenType CFF files (with PostScript glyph outlines) are already compressed, their reduction is typically smaller.

WOFF 2.0, based on the Brotli compression algorithm and other improvements over WOFF 1.0 giving more than 30% reduction in file size.

Some servers may require the manual addition of WOFF’s MIME type to serve the files correctly. Since February 2017, the proper MIME type is font/woff for WOFF 1.0 and font/woff2 for WOFF 2.0. Prior to February 2017, the standard MIME type for WOFF 1.0 was application/font-woff, and some applications may still use the old type, though it is now deprecated.

SVG

SVG fonts describe glyph outlines as vector objects, which usually results in larger file sizes. SVG is the only format that can be used for the iPhone, iPad, and iPod touch prior to iOS 4.2.

2. Font-size (or font-height) Measurement

In the ‘print’ world, the standard unit to measure font height is point (pt).

In the web world, in addition to point, there are many other ways which can be categorized into 2 groups: fixed-height measurements and relative font measurements.

Fixed-height measurements

• pixels (px). Based on the resolution of the screen
• points (pt). 1 pt = 1/72 of an inch
• picas (pc), 1pc = 12 pts
• inches (in)
• cm
• mm
• x-height (ex). Based on the height of the lowercase x character

Relative font measurements

• Ems (em)   Based on the default font size in the viewer’s browser.
  • 1 em = 16 px (the default font-size of most browsers
  • em = required pixel value / parent font pixel value
  • em can be specified to 3 decimal places
• rem – Relative to the font-size of the root element
• Percentages (%)   Like ems, based on the default preferences of the browser, and calculated relative to the surrounding text.
• vw – Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.

3. Typographic Factors

Some strategies to create typographical hierarchy work well in print but are not ideal on the web. Examples of this include italics, underlining, and change of orientation.

• Although italics often are used in printed matter to give emphasis, they pixelate horribly on a computer screen. They clash with the natural square pixel grid and are best avoided on web pages, especially at smaller sizes in a condensed space.
• Underlining has a special meaning on a web page. It indicates a hypertext link, so it really is not a good idea to use underlining for any other purpose lest the reader be confused.
• A line of type that is upside-down on a page is very noticeable, but also is difficult to read. On a printed page the reader could simply turn the page around, but that’s not quite so easy with a desktop computer.

4. Typeface vs. Font

The terms typeface and font often are confused. Here are some explanations of the differences between the two.

• Typeface
  • A typeface is a design created by a type designer. It incorporates the specific letter-forms that include the variations of stroke weight, the forms of serifs, the counter shapes, the finial styles, the lengths of ascenders and descenders, and any other characteristics that differ from one type design to another.
  • Each typeface is known by a name, such as Arial, Times New Roman, etc. The term “typeface” originated from movable type, whose blocks of wood or metal each contain a relief image of a character on one surface (the “face”).
• Font
  • A font is the digital representation of a typeface. It is a collection of all the characters of a typeface in one size (12pt/1in) and one style (bold/italic). For example, Arial in 12pt size is a font, Arial in 18pt size is a font, and Arial bold in 24pt is also a font.
• Type Family (or Font Family)
  • The complete assembly of all sizes and styles of one typeface forms a type family. Web designers sometimes refer to it as a “font family” because that is the name of the CSS declaration.

5. Line-height

6. Letter-spacing

• Letter-spacing is the amount of space between a group of letters.
• word-spacing is another CSS property that can be specified to further tweak the text display. Word-spacing is the size of the space between words. By default, it is 0.25em.
• Using two spaces after a period—a habit that came from using the old monospaced typewriter—is inappropriate for the web. A page of text with two spaces between every sentence looks riddled with holes. Remember always to use one space between sentences.

Reference

1. Web typography
2. W3Schools.com