The undersigned

I have been thinking about uncial’s (drop cap’s), since it is a “feature” I often use when designing books, and I though about how it is used online. Uncial’s can really do something good for the look of long articles, in the start of chapters in a book etc, but if done wrong, they are nothing but ugly.

When working with print work, you know that what you do on the screen, is how the final result will look. You don’t have to think about screen resolutions, web safe fonts, a user increasing/decreasing the font size etc. - all the things you would have to think about working with web design.

I have searched around for some uncial CSS tutorials, and this is some of the results google found for me:

• How to make beautiful drop caps
• Magazine Style CSS Drop Caps
• CSS Drop-Caps
• Drop caps via CSS2

How should an uncial look?

When you do a uncial, the first result you get, and what people tend to use as final, would look something like this:

But what an uncial should look like, is this:

You might quickly see the differences, but to quickly explain, look at this picture:

1. The “tree” of the uncial letter should be aligned with the front edge
2. The first text line should be closer to the uncial letter than the next lines
3. The second and third text line (and fourth and fifth…) should be aligned with the same indent. There is no standard indent value for this, one will have to justify it until he/she think it looks good.

How about CSS then?

I don’t know, and I really don’t care that much. It is probably possible to do, but it would always cause trouble when the user increases/decreases the font size, or if you see it on in MSIE, Firefox, Opera, Safari or whatever on Mac, Win, Linux …

I believe that many things we know from the history of books and print design is funny to mix up with new media, such as web design, but not everything works well both places. E.g. many people are looking forward to CSS3’s column features, but have they given it any thought that it might not be the best feature from print design to mix with new media? I’m not saying that it isn’t, but consider such things as baseline grids etc.

Uncials is just an example of what I won’t touch when web designing - the computers should help us making designing easier, so why compromise when it will just end up looking uglier?

Another thing many people try to achieve with CSS is paragraph first line indents - but where most people go wrong is indenting the first line after a header, after a sub-header, after an image etc. or they simple both have space between paragraphs and a first line indent. Besides this, the indent is often to big as well.

This is my first article in the series, “From print to web”. I haven’t written further articles for the series yet, but I plan to do - so if you find the topic interesting, be sure to check back, or subscribe to the feed.