Web Typography: Font styling

Font sizing ratio using EM

Rule of thumb: Heading font size ÷ Body copy font size = 1.96;
(Multiply by 2 your body size)

Another option is to use a traditional scale (6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72)
or the Fibonacci sequence (e.g. 16 – 24 – 40 – 64 – 104) to get natural typographic results. More info:
Best Practices from best blogs
How to size text in css

Letter spacing

Do not letterspace your lowercase content

Word spacing

In CSS, word space is set with the word-spacing property which has a default value of normal. The default word space is equivalent to approximately 0.25 em, although the exact value will depend on information encoded within the digital font file. To change the word spacing, you should specifiy a length in ems. This length is added to the existing word space;

Concrete Poetry

         raven told
him nothing nevermore
      and Vincent's circling
         crows were a threat to destroy
          sunlight. Now I saw a bird, black with a yellow
            beak, orange rubber legs
              pecking to kill the
                lawn, storm bird
                 hates with claw,
                   evil beak,
                   and eye.

Some tools for helping shaping your poetry:   en space
  em space
  3-per-em space
  4-per-em space
  6-per-em space
  figure space
  punctuation space
  thin space
  hair space

Content & pseudo class :after

Indent & p + p

You can make

Indent decorations (using the space as indentation as decoration) or playing with outdents (negative indentation)


Text Flare

Text Shadow

  1. The color of the text-shadow (#6374AB)
  2. The X-coordinate of the text-shadow (20px), relative to the text
  3. The Y-coordinate of the text-shadow (-12px), relative to the text
  4. The blur radius of the text-shadow (2px), which means the amount of space the shadowtext is 'stretched', causing a blur effect. 0 means: no blur. Don't set this value too high, the shadowtext quickly becomes illegible.

3D text

It means...

Retro Design

HTML5: More info on Custom Data Attributes

Mask image

Mask image supported only by Webkit (Chrome & Safari)
SVG Mask supported by Firefox
Full explanation on SVG and CSS Masks support


Adding classes, to letters, words or line split, to have control over them.
Use it only for titles!