Michael Gearon

initial-letter CSS property guide

Michael Gearon

Last updated on

The initial-letter is a CSS property that allows you to control the styling of the first letter of the element. There are many ways to “hack” this look by wrapping the first letter in a span and then add CSS for that class to fake the look. However by using the initial-letter property we can achieve this look without any hacks as well as controlling the number of lines it occupies, if it’s raised or sunken.

Example of initial-letter

p:first-of-type::first-letter { 
  initial-letter: 2;
}
<p>Curabitur blandit tempus porttitor. Vivamus...</p>

In our example we are targetting the article element, and then within that the first paragraph and then zooming in further targetting the first letter. We are then saying for that first letter, of the first paragraph to add the property initial-letter a value of 2.

The result is that the first letter will now span over 2 lines, simple! If we wanted to span over 3 or 4 lines then all we need to do is update that value and that’s it.

Raise and drop

It’s also possible with the initial-letter property to control if the first letter goes down or goes up. If it is not specified then the browser assumes it is drop that you want to use.

Drop

In this example it will drop the first letter down 3 lines

p:first-of-type::first-letter { 
  initial-letter: 3 drop;
}

Raise

This will raise the first letter up over 2 lines

p:first-of-type::first-letter { 
  initial-letter: 2 raise;
}

Raise and drop

You can also have a mixture of both raise and drop by specifying two number values

p:first-of-type::first-letter { 
  initial-letter: 2 3;
}

Full syntax and values

initial-letter: normal | [ ] |  && [drop | raise]

Browser support

At time of writing the browser support isn’t very good, it is not supported in IE, Edge, Firefox or Chrome. It is supported by Safari using the -webkit- prefix

Further reading

First published on

Michael Gearon

Written by

Michael Gearon

Senior Interaction Designer and Co-Author to Tiny CSS Projects