Text and Typography in CSS

Selectors in CSS

Font Typeface

* {
  font-family: "Helvetica";
}

div {
  font-family: "Helvetica", monospace;
}
  • accepts a comma-separated list of strings,
  • referring to specific and or generic font families

Generic fonts are:

  • serif,
  • sans-serif,
  • monospace
  • cursive

Full list of generic font-families

Selectors in CSS

Font Styling

  • font-style
  • font-weight - 100 -900
  • font-size

Selectors in CSS

Font Color

  • color - used to define color of the text.
p {
  color: red;
}

p:hover {
  color: white;
  background-color: black;
}

p::selection {
  color: blue;
  background-color: yellow;
}

Selectors in CSS

Font Spacing

  • line-height - Change the space between lines
  • letter-spacing - Change the space between letters
  • word-spacing - Change the space between characters 
p {
  line-height: normal;
  
  letter-spacing: 0.2em;
  
  word-spacing: 0;
}

Selectors in CSS

Text transform

/* capitalize the first character
 *  of every word; */
.capitalize {
  text-transform: capitalize;
}

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

/* lower the entire text */
.lowercase {
  text-transform: lowercase;
}

Selectors in CSS

Text decoration

.b {
  text-decoration-line: line-through;
  text-decoration-color: slateblue;
}

/* shorthand for text-decoration-line 
 * and text-decoration-color */
.c {
  text-decoration: overline lime;
}

/* adds all 3 lines on the same text */
.d {
  text-decoration-line: 
    underline overline line-through;
  text-decoration-color: aqua;
}

Selectors in CSS

Text Indent

p {
    text-indent: 3em;
}

Takes either a length (for example, 10px, 2em) or a percentage of the containing block’s width.

Selectors in CSS

Text-align

.align-left {
  text-align: left;
}

.align-right {
  text-align: right;
}

.align-start {
  text-align: start;
}

To align text inside the container.

Different than indenting.

Selectors in CSS

Text Overflow

.to-clip {
  text-overflow: clip;
}

.to-ellipsis {
  text-overflow: ellipsis;
}

To handle text larger than container.

Selectors in CSS

Word Break

.normal {
  word-break: normal;
}

.break-all {
  word-break: break-all;
}

To handle text larger than container, but at a word level.

Selectors in CSS

Text directions


.break-all {
  writing-mode: vertical-rl;
  text-orientation: mixed; /* upright */
}

Selectors in CSS

Text Shadows

.a {
  text-shadow: 0 1px 2px #0005;
}

.c {
  color: lightyellow;
  text-shadow: 1px 1px blue, 
    2px 2px 0 cyan, 
    -1px -1px 0 red, 
    -2px -2px 0 yellow;
}

.b {
  color: #feff;
  text-shadow: 1px 1px 2px #f01c,
    1px -1px 2px #f0cc,
    -1px 1px 2px #f0fc,
    -1px -1px 2px #f0fc,
    0 0 16px #f0fa,
    0 0 64px #f0fd;
}

text-shadow: takes 4 args,

(x-offset, y-offset, blur-radius, color),

can apply multiple shadows with comma