I created a method for Drop Caps.
Formula: font-size = (The height of all the lines together em) / 0.8em (line-height)
I hope it helps someone!
/* You have to use line-height on your <p> element, it changes The height of all the lines together em */
body{line-height:1.2;}
body *{line-height:inherit;}
/* 2 Lines(2.333em) Drop Caps for line-height 1.2 Example */
span.dropcaps{
float:left;
font-size:2.91625em;
height:0.8em;
line-height:0.8em;
margin-right:0.04em; /* optional */
margin-left:0.04em; /* optional */
}
/* 3 Lines(3.5em) Drop Caps for line-height 1.2 Example */
span.dropcaps{
float:left;
font-size:4.375em;
height:0.8em;
line-height:0.8em;
margin-right:0.04em; /* optional */
margin-left:0.04em; /* optional */
}
/* 4 Lines(4.667em) Drop Caps for line-height 1.2 Example */
span.dropcaps{
float:left;
font-size:5.83375em;
height:0.8em;
line-height:0.8em;
margin-right:0.04em; /* optional */
margin-left:0.04em; /* optional */
}
HTML:
<p><span class="dropcaps">L</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam a nunc ac nibh venenatis aliquet. Cras posuere, dolor eget aliquet lobortis, lorem quam viverra purus, non pretium urna tortor ac neque. Fusce iaculis justo eget luctus mattis. Pellentesque finibus nisi eu aliquam porta. Nam ut pharetra ligula, eget venenatis ex. Ut vel urna elementum, tincidunt quam at, auctor ipsum. Suspendisse sagittis metus non ante ultrices lacinia. Morbi quis orci erat. Mauris sed sapien maximus, aliquam mauris sed, ornare ante. Donec in ultricies sapien, sed aliquam est. Vivamus tristique sapien a dolor tincidunt tempor. Cras pretium sagittis nulla, in suscipit libero feugiat auctor. In ac dui id velit porta aliquam eget vitae eros.</p>