CSS Fonts font family, font size, Google Fonts

Text Properties

Text and font CSS controls how readable, scannable, and polished a page feels. Font family, size, line-height, weight, spacing, alignment, and decoration all affect how easily learners can read content.

Good typography starts with restraint. Choose clear font stacks, keep line lengths comfortable, use unitless line-height for body text, and avoid decorative effects that make reading harder.

Text properties affect the characters after the font has been chosen. They control alignment, decoration, casing, spacing, line height, truncation, and shadows.

Property	Values	Description
color	any color	Text color
text-align	left \| right \| center \| justify	Horizontal alignment
text-decoration	none \| underline \| overline \| line-through	Text decoration line
text-transform	uppercase \| lowercase \| capitalize \| none	Case transformation
text-indent	20px \| 2em	First line indent
letter-spacing	2px \| -1px	Space between characters
word-spacing	5px	Space between words
line-height	1.5 \| 24px \| 150%	Space between lines
white-space	normal \| nowrap \| pre \| pre-wrap	Whitespace handling
text-overflow	clip \| ellipsis	Overflow text handling
text-shadow	h v blur color	Shadow behind text

Text Properties - Examples

/* Text alignment */
.center  { text-align: center; }
.justify { text-align: justify; }

/* Text decoration */
a { text-decoration: none; }           /* remove underline from links */
del { text-decoration: line-through; }
.underline { text-decoration: underline dotted red; }

/* Text transform */
.uppercase  { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }

/* Spacing */
.heading {
    letter-spacing: 3px;   /* tracking */
    word-spacing: 5px;
    line-height: 1.6;      /* unitless - relative to font-size */
}

/* Text overflow - truncate with ellipsis */
.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* Text shadow: offset-x offset-y blur-radius color */
.shadow-text {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.glow-text {
    text-shadow: 0 0 10px #3498db, 0 0 20px #3498db;
}

/* Writing mode */
.vertical { writing-mode: vertical-rl; }

/* Text indent */
p { text-indent: 2em; }

Font Properties

Font properties choose the typeface and shape of the text. Always provide fallback fonts so the page still looks acceptable if the first font fails to load.

Property	Values	Description
font-family	'Arial', sans-serif	Font stack (fallbacks)
font-size	16px \| 1rem \| 1.2em \| 120%	Text size
font-weight	normal \| bold \| 100-900	Thickness
font-style	normal \| italic \| oblique	Italic/oblique
font-variant	normal \| small-caps	Small caps
font	shorthand	All font properties

Font Properties and Google Fonts

/* Font family - always provide fallbacks */
body {
    font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}
.code {
    font-family: 'Fira Code', 'Courier New', monospace;
}
.serif {
    font-family: 'Georgia', 'Times New Roman', serif;
}

/* Font size */
html { font-size: 16px; }   /* base size */
h1   { font-size: 2.5rem; } /* 40px */
h2   { font-size: 2rem; }   /* 32px */
p    { font-size: 1rem; }   /* 16px */
small { font-size: 0.875rem; } /* 14px */

/* Font weight */
.thin    { font-weight: 100; }
.regular { font-weight: 400; }
.bold    { font-weight: 700; }
.black   { font-weight: 900; }

/* Font shorthand: style variant weight size/line-height family */
h1 {
    font: italic small-caps bold 2rem/1.2 'Georgia', serif;
}

/* @font-face - custom fonts */
@font-face {
    font-family: 'MyFont';
    src: url('myfont.woff2') format('woff2'),
         url('myfont.woff')  format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* prevents invisible text during load */
}

Font Properties - HTML Example

<!-- Google Fonts - add in <head> -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&family=Open+Sans&display=swap" rel="stylesheet">

<style>
body {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}
h1 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
}
</style>