Drop Caps and Minicaps

You can use drop caps and minicaps to enhance the appearance of your web pages. Drop caps such as the one at the start of this paragraph can be used to indicate the start of a new section within your document without having to break up the flow of the text by adding sub-headings. Minicaps can be used as an alternative way of adding emphasis to particular words without disrupting the flow of the text as much as making the text bold or italic would do. Use of either of these will at least give your pages a slightly different appearance and make your site stand out from other sites. Creating either drop caps or minicaps can be done very easily using simple stylesheet commands.

The creation of minicaps is extremely simple requiring only that you specify font-variant:small-caps; either in your stylesheet definition or within the span container that you use to surround the text that you want displayed in minicaps. For example you can code M<span style="font-variant:small-caps;">inicaps<span> within the page itself in order to create a short section of text in minicaps. Alternatively if you see yourself using minicaps a lot then you can code a class definition into your stylesheet such as:

 .cs {font-variant:small-caps;}

and then reference that class in your span command, for example M<span class="cs">inicaps<span> to achieve the same effect with a smaller piece of code.

Depending on how the minicaps look compared to the surrounding text you may also want to add font-weight:bold; into the stylesheet definition. You may even want to create both bold and non-bold versions of your minicaps style so that you can use whichever looks more appropriate.

Drop caps require somewhat more code in their stylesheet definitions and so if you intend using more than one drop cap (which you probably will or you lose the overall effect) then you are better off defining a dropcap class in your stylesheet. To define a drop cap we need to specify a font weight, size, class, and colour and we can do all three using the font: attribute in our stylesheet. A drop cap should be at least as high as three lines of the adjacent text in a serif font. You can select the colour for the drop cap to suite the colour scheme of the pages on your web site. As we need the following lines to wrap around we also need to specify that the specified letter is to float at the left of the page. This gives us a stylesheet definition like to this:

 .drop {font: bold 300% times,serif; color:#000099; float:left;}

About the only thing that you will want to change here is the colour although if you can guarantee that all of your paragraphs will always display at least four lines deep you may want to consider a larger size for your drop cap.

The span tags for the drop cap are positioned the opposite way to how we used them to create minicaps. Where with minicaps the first letter of the word was outside of the span container with the rest of the word included, with drop caps it is the first letter that is contained within the container and the rest of the word is outside, for example: <span class="drop">D</span>rop. Were you to include more than just the first letter of a paragraph in your drop caps class then this would spoil the effect as the result would no longer be a drop cap.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow