TIL6 - CSS - Typography

CSS Typography

1. Font-Family

The font-family property defines the 'typeface' or the 'type or font' of text

ex) font-family: Helvetica;

The font-family property specifies a list of fonts, from highest to lowest priority

a font specified in the font-family can be a value of either:

• <family-name>
  > ex) "Times New Roman", "Helvetica", "Garamond"
• <generic-name>
  > ex) "serif", "sans-serif", "monospace", "cursive"

The first font that the browser finds to be installed in the computer or is available for download - via HTML <link> attribute or CSS @font-face property - will be used by the browser as the font for the particular element

It is best practice to include at least one <generic-name> font in the list of the font-family property, since there is no guarantee that a given font is available

If the font name has white space, you need to enclose the font name in quotation marks:
> ex) font-family: "Times New Roman";

*The default font-family in most browsers is 'Times New Roman'

*See '10. Fallback Fonts' below for more details on the font-family property

*font-family documentation page:
https://developer.mozilla.org/en-US/docs/Web/CSS/font-family

2. Font-Weight

*The font-weight property defines the 'boldness' of text

2 ways to define the font-weight:

• keywords
  > ex)

font-weight: bold;
font-weight: normal;
font-weight: light;

• numeric
  (numeric scale of 100-900, in increments of 100)
  > 400 is the default font-weight for most text
  > 700 represents 'bold'
  > 300 represents 'light'
  > ex)

font-weight: 800;
font-weight: 400;

• not all fonts can be assigned a numeric font-weight

3. Font-Style

*The font-style property can be used to italicize text

font-style: italic;

*the default value for font-style is normal

4. Word-Spacing

The word-spacing property can increase or decrease the spacing between words in a body of text
> ex)

word spacing property
--> word    spacing    property

px vs. em

• You can use either px values or em values to change word-spacing
• em values are preferred, because em values allow the spacing to remain relative to the font-size
  > em is a unit in typography equal to the currently specified point size. for example, for a 16pt typeface, 1em = 16pt

*the default word-spacing is usually 0.25em

it is not very common to increase the spacing between words, but it can help with the readability of boldened or enlarged text

5. Letter-Spacing

The letter-spacing property increases or decreases the spacing between individual letters
> ex)

letters
--> l e t t e r s

• em values are used, like word-spacing

*the technical term for adjusting space between letters is tracking

6. Text-Transform

The text-transform property can be used to format the letter case of text

uppercase makes text all UPPERCASE
lowercase makes text all lowercase

• ex)

text-transform: uppercase;
text-transform: lowercase;

7. Text-Align

The text-align property can be used to align the text position in the browser

text-align can take any of 3 values:

• left - the default value
• center
• right

8. Line-Height

The line-height property can be used to modify the leading of text

Anatomy of line-height:
<image source: codecademy.com>

line-height can be defined in several ways:

• unitless ratio value - this is an absolute decimal number without units, and it defines line-height as a ratio of the font-size
• a unit value - any valid CSS unit such as px, em, rem, %

Generally, the unitless ratio value is the preferred method, since it is based exclusively on the font-size of text, which means it is responsive to changes in the font-size and thus adjust automatically

9. Serif vs. Sans Serif

<image source: codecademy.com>

10. Fallback Fonts

For a user to be able to see the fonts specified by the CSS in the browser on his computer, the user needs to have those fonts installed on his computer or the fonts must be available for download via HTML <link> attribute or CSS @font-face property

In CSS you can include fallback fonts in the list of the font-family property, so that these fallback fonts will be shown to the user in case the specified fonts intended by the CSS is not installed or is not available for download

• in the font-family property, you can list fonts in <family-name> or <generic-name> values
• the first font that is installed on the user's computer or can be downloaded will be used by the browser
• ex)

font-family: "Helvetica", "Aria", sans-serif;

11. Linking Fonts

In modern days, use of open-source fonts available for public download is more common, instead of having fonts hard installed on the computer
> google fonts is a very good source of such open-source fonts:
https://fonts.google.com/

From google fonts, you can search for fonts, select a single font or multiple fonts, and also select certain styles for the fonts (bold, italic, etc.)
> after making your selection, you can copy & paste the link attribute provided by google fonts for the particular font selection to the head of your HTML file
> ex) for the font-family "Space Mono" with styles 400, 700, and 700 italic selected:

• the <link> attribute:

<link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,700&display=swap" rel="stylesheet">

• CSS rules to specify:

font-family: "Space Mono", monospace;

12. @font-face rule

Instead of using <link> in HTML to import the non-user fonts, you can also import those fonts directly in CSS stylesheet with the @font-face selector

Steps:
1. In the browser, enter and go to the url for the selected font(s)
2. Locate all /* latin */ labels (there can be more than one depending on how many fonts and styles for each you selected)
3. You need to use all the @font-face rule sets under all of the /* latin */ labels
4. At the very top portion of the CSS stylesheet, create @font-face selector and paste the @font-face rules copied from the brower
5. repeat for all /* latin */ labels

In addition to using @font-face to import non-user fonts from the web, you can also use it for local files

Syntax:

@font-face {
  font-family: "*Name of the font";
  src: url(*relative path to the font file*) format(*font file extention*);
}

• ex)

@font-face {
  font-family: "Custom Font";
  src: url(../fonts/custom-font.woff2) format("woff2"),
       url(../fonts/custom-font.woff) format("woff),
       url(../fonts/custom-font.ttf) format("truetype");
}