Learning CSS
- Part 1: Introducing Selectors
- Part 2: Nesting Selectors
- Part 3: Backgrounds and Colors
- Part 4: Margins, Borders, and Padding
- Part 5: Positioning
- Part 6: Working with Fonts
Cascading StyleSheets (CSS) is a web technology designed for use with HTML. Using CSS allows for the separation of the presentation from the content and can help with customizing layout, colors, and accessibility settings.
Working with Fonts
The predominate type of content in HTML documents is text. Because of this, there exist many CSS rules for changing how the text is presented and the ways in which it could appear depending on the settings of web browsers.
CSS Units
While the px (pixel) unit was introduced in the section on the box model of elements, there are many other types of CSS units that can be used in determining the size of elements.
Absolute Lengths
- cm: measurement in centimeters.
- in: measurement in inches.
- mm measurement in millimeters.
- px: a measurement in screen pixels.
- pc: a measurement in picas. (1 pica is 12 points; 6 picas per inch).
- pt: a measurement in points. (1/72nd of an inch)
Relative Lengths
- em: measurement for the height of a font in the size of a given font. (If font was set to to 12pt, each “em” unit would be 12pt and 3em would be 36pt.)
- ex: measurement relative to the height of font’s lowercase letter “x”.
- vh: 1% of browser window size height.
- vw: 1% of browser window size width.
- vmin: 1vw or 1vh, whichever is smaller.
- ch: Measurement of the width of the “0” (zero)
- rem: Font-size of the root element
- vmax: 1% of browser window size larger dimension
Font Sizes
The CSS rule font-size is one of many that accepts different CSS units.
To double the size of all text within paragraph elements, adding a rule font-size: 2em would increase their size based on the relative size of the initial font size.
Set to an absolute size like inches, the text would grow even bigger.
Font Families
The CSS rule font-family is used to set the font family to use for the text within that elements and any of its children. Usually, font families are sets of fonts that start with a named font and then usually include at least one other “fallback” font like serif or sans-serif as a default increased the named font is not installed or available in the web browser.
Font Families are often divided into three categories: serif, sans serif, and monospace fonts.
Serif Fonts
- Georgia, serif
- “Palatino Linotype”, “Book Antiqua”, Palatino, serif
- “Times New Roman”, Times, serif
Sans-Serif
- Arial, Helvetica, sans-serif
- “Arial Black”, Gadget, sans-serif
- “Comic Sans MS”, cursive, sans-serif
- Impact, Charcoal, sans-serif
- “Lucida Sans Unicode”, “Lucida Grande”, sans-serif
- Tahoma, Geneva, sans-serif
- “Trebuchet MS”, Helvetica, sans-serif
- Verdana, Geneva, sans-serif
Monospace Fonts
- “Courier New”, Courier, monospace
- “Lucida Console”, Monaco, monospace
Codepen Example:
See the Pen Learning CSS: Part 6: Working with Fonts by Dan Cox (@videlais) on CodePen.
Digital Ephemera 