Initials - CSS Typography | CSS: Presentation Layer

Decorative intial caps that sit at the start of a paragraph outside of the left margin.

An enlarged letter at the beginning of a paragraph or section of text, which contains a picture. A inhabited initial contains figures (human or animal) that are decorative only, without forming a subject, whereas in a historiated initial there is no identifiable figure or a specific scene.

Decorative initial caps (capital letters) at the start of a paragraph that sit on a baseline of the first line of text but are noticeably larger, raised above the accompanying text. Like all initial caps, the text and placement of the letter is designed to draw readers into the narrative.

Raised caps are a specific style or placement of intial caps, similar to adjacent caps.

Note: do not change the leading of the character or it could result in gaps between the first and second lines.

Dropped caps are a specific style or placement of decorative initial caps (capital letters) at the start of a paragraph that drop into a space created within the first new lines of the text.

Like all initial caps, size and placement of the letter is designed to draw readers into the narrative.

Also known as drop caps.

Oversized letters at the start of some text; oftentimes these letters are set in a different, sometimes highly ornate, decorative letter. Initial caps are used to draw attention to the text and draw the reader into the narrative.

Styles of initial caps:

• Adjacent Caps drop to the side.
• Dropped Caps are the most familiar style dropped into indented lines.
• Raised Caps are simply larger letters at the start of the paragraph.

Also known as drop cap, or dropped cap.

An initial cap that contains a picture element. Historiated caps help mark the start of a new idea in text, as well as act as place markers in text.

The initials are morphologically classified: the rubricated letter (red); the epigraphic letter, imitating ancient Roman majuscules; the figurated initial (usually in miniatures); the historiated initial, that gives spatial support to scenes of a narrative character; etc.

The initial may sit on the same baseline as the first line of text, at the same margin, as it does here. This is the easiest to typeset on a computer, including in HTML. An example follows:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Alternatively, the initial may be in the left margin, with the text indented, as shown here. In word processors and HTML, this may be implemented using a table with two cells, one for the initial and one for the rest of the text. The difference between this and a true drop cap may be seen when the text extends below the initial. For example:

L

orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

With a drop cap, the initial sits within the margins and runs several lines deep into the paragraph, indenting some normal-sized text in these lines. This keeps the left and top margins of the paragraph flush.

In modern computer browsers, this may be achieved with a combination of HTML and CSS by using the float: left; setting. A CSS-only solution alternatively can use the :first-letter pseudo-element. An example of this format is the following paragraph:

L

orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

In some older manuscripts, the first letter of normal sized text after a drop cap also would be capitalized, as may be seen in the Mainz Psalter above, and in the original 1609 printing of Shakespeare's sonnets. This evokes the handwritten "diminuendo" style of gradually reducing the text size over the course of the first line. This style now is rare, except in newspapers.