Topic Overview | MART 341 Intro-Web-Dev

CSS Fonts, Decorating and Alignment

Topic Overview

Typography

Typography Typefaces Font Categories TODO

Using Fonts

The font-family Property Fallback Fonts and Stacks Making Font Choices TODO

Sizing

Setting Size Fixed Size Relative Size Using Sizes TODO

Adding Meaning

Setting Bold and Italic Font Weight Font Style Using Weights and Styles TODO

Decorating

Font Variant Text Transform Text Decoration TODO

Spacing

"Space: The Final Font-tier..." Leading Kerning Tracking Word Spacing TODO

Alignment

Horizontal Alignment Vertical Alignment Indentation TODO

Pseudos

Pseudo-Selectors Pseudo-Elements Pseudo-Classes Setting States TODO

Self-Hosted Fonts

Including Fonts Fonts Directory Fonts Stylesheet The @font-face Selector Family Source Other Properties The @font-face Rule TODO

Library-Hosted Fonts

Sourcing Fonts Navigating Google Fonts Option A - Downloading Fonts Option B - Standard Embeds Option C - @import Embeds TODO

CSS Fonts, Decorating and Alignment

Moving on with CSS, this week will cover text and fonts. Despite being a very graphic art, the success of a website is usually heavily dependent on how it treats its use of written elements. To study this, we will look at:

Typography
Choosing Fonts
Normal, Hover, and Active States

Grasping these concepts will make your text visually interesting without sacrificing structure and legibility.

By the end of this Topic, we hope you:

Know how to source fonts from the web.
Understand the difference and usage of system, web, and web-safe fonts.
Have considered appropriate text styling, balancing “fun” and “functionality” in your site design.