Web Design Summary 5
Stylin' Fonts and Text
Topic 1: Font Sources
There are three primary sources of fonts:
— The fonts that are installed on the user’s device.
— Fonts that are hosted on third-party sites, most notably Typekit and Google, and linked to your page using the link tag.
— Fonts that are hosted on your Web server and served to the user’s browser along with the page, using the @font-face rule
Topic 2: Fonts VS Text
Fonts are the different kinds of typefaces, while text describes words and characters. Fonts are categorized by different properties, such as font collections, font families, and font faces. Type porperties, on the other hand, include things like line height and letter spacing. The reason these type porperties are not relevant to font is because font specifically focuses on the style of each individual letterform/number/etc.
Topic 3: Font Properties
There are a few different porperties to be familiar with when working with fonts:
—font-family: determines the font that will be diplayed, for example, Arial or Times New Roman. 'Font family' is often used synonymously with 'typeface.'
—font-size: determines how small or large the font will be displayed. Fonts can be sized a couple different ways: through aboslute units (pixels or points) and through relative units (percentages or ems.)
—font-weight: determines how thick or thin the font will be diplayed. You can change font weight through numerical values (100, 300) or through words (light, medium, bold.) When defining weight by word, you may have to check which word the font-family uses to define each of its different weights.
—font-style: determines whether or not your font is italicized or not—sometimes includeds boldface.
—font-variant: this property allows you to change your font to small-caps.