Log in Sign up

Creating a Drop Cap in the Blog Template

Just thought I would share what worked for me for those looking to do the same thing.

Add to your CSS file. 

/* Drop Cap */
.entry > p:first-of-type::first-letter {
  color: #A52A2A;
  float: left;
  font-size: 3em;
  margin: .1em .1em .1em .1em;
  line-height: 0.85;
}

a month ago, 2 replies   developers   typography   Edit question

Thanks. You can use the initial-letter property to make it even simpler, but not sure about all browsers support. https://drafts.csswg.org/css-inline/#sizing-drop-initials

Answered a month ago · Edit answer

Looks like Firefox is the only browser that does not support it.

For those wondering how that code would look like... 

/* Drop Cap */ 
.entry > p:first-of-type::first-letter { 
initial-letter: 2 drop;
color: #A52A2A;
}

I have noticed using the initial-letter: psuedo can cause some funky formatting hence why I used my first code snippet.

Answered a month ago · Edit answer