Small-Caps CSS Lib | CSS: Presentation Layer
Standards Based Development
Forms of Small Caps
- Petite Caps
- Mid-Capitals
Mid-Capitals: are a larger form of small capitals, whereas small capitals come to the top of the x-height of their roman counterparts, mid-capitals are slightly larger so that the overall difference between the small caps and roman is more subtle, and therefore more unified. Mid-capitals simply refers to striking a balance between the x-height and the cap height.
Roman or roman?
Roman is a proper noun and is thus capitalized, but we identify roman letterforms, like italic ones, in lowercase. The name of the Latin alphabet is capitalized.
Enlarged Capitals
Enlarged capitals, also called versals, commonly mark the entrance to a chapter in a book or an article in a magazine, inviting the reader to come inside.
Using Small Caps for Abbreviations
FOR ABBREVIATIONS AND ACRONYMS IN THE MIDST OF NORMAL TEXT, USE SPACED SMALL CAPS
Many typographers prefer to use small caps for postal abbreviations (San Francisco, ca, 94119, and for geographical acronyms longer than two letters. Thus, the usa, or in Spanish, los eeuu, and Sydney, nsw.
THE ELEMENTS OF TYPOGRAPHIC STYLE – ROBERT BRINGHURST PAGE 48
Small caps are typically the size of normal lowercase letters in a typeface; they're used for acronyms/abbreviations because they're less obtrusive than normal size capitals.
The American States are abbreviated as a standard + already using microformats practically everytime you markup an address.
Small caps allow acronyms to blend in with adjoining text by reducing the text height to the level of the lowercase letters.
Setting font-variant:small-caps; alone will not accomplish our goal; declaring font-variant:small-caps; actually tells the user agent to:
- Make lowercase letters uppercase
- Set the font size to match lowercase letters
The standard approach to this pattern is to first set the content to lowercase and then setting small caps.
State va.
/** html **/
<abbr class="region">
va</abbr>
/** css **/
.region{
text-transform:uppercase;
font-variant:small-caps;
letter-spacing:.1em;
}
In typography, small capitals (usually abbreviated small caps) are uppercase (capital) characters set at the same height and weight as surrounding lowercase (small) letters or text figures. They are used in running text to prevent capitalized words from appearing too large on the page, and as a method of emphasis or distinctiveness for text alongside or instead of italics, or when boldface is inappropriate. For example, TEXT IN CAPS appears as text in caps. They can be used to draw attention to the opening phrase or line of a new section of text, or to provide an additional style in a dictionary entry where many parts must be typographically differentiated. SMALL CAPS - WIKIPEDIA
font-variant:small-caps is a type variation within a font-family; in a small-caps font the lower case letters look similar to the uppercase ones, but in a smaller size with slightly different proportions. font-variant property select that font.
font-variant:normal selects a font that is not a small-caps font, font-variant:small-caps selects a small-caps font. In css2.1 it is acceptable (but not required) that if the small-caps font is created by taking a normal font and replacing the lower case letters by scaled uppercase characters. As a last resort, uppercase letters will be used as a replacement for a small-caps font.
In the example below, the h3 element in small-caps, with emphasized words in oblique, and any emphasized worths within an h3 will display as oblique small-caps:
Small-Caps Set
Oblique SetSmall-Caps Parent Oblique Small-Caps Child
/** html **/
<h3 class="smallcaps">
Small-Caps Set</h3<
<em class="oblique">
Oblique Set</h3<
<h3 class="smallcaps">
Small-Caps Parent
<em class="oblique">
Oblique Small-Caps Child
</em>
</h3>
/** css **/
h3.smallcaps{font-variant:small-caps}
em.oblique{font-style:oblique}
Note: the font-family may have other variants, such as old-style numerals, small-caps numerals, condensed, or expanded letters, etc. css2.1 does not support these open type font features, but css3 does/will!
Note: insofar as this property causes text to be transformed to uppercase, the same considerations as for text-transform: apply.
Small Caps in Headings
small caps is used commonly in headings.
First-Line-Run-In with Small Caps
The first-line-run-in effect typically utilizes small caps to put stress or emphasis on the first line or first few words of an opening paragraph.
True Small Caps with OpenType Fonts
True Small Caps can be accomplished by using an OpenType font that has small caps characters (smcp=1), like so:
.contrast-small-caps{
-moz-font-feature-settings:"smcp=1";
-moz-font-feature-settings:"smcp";
-ms-font-feature-settings:"smcp";
-o-font-feature-settings:"smcp";
-webkit-font-feature-settings:"smcp";
font-feature-settings:"smcp"
}
Capitalization and Case as Design Elements
Title Case
Capitalizing the first letter of each word in a short section of text. Typically used in headlines or page titles, also in graphical elements that you want to draw attention to all the words invididually.
One variant of title case is leaving short, unimportant words (usually prepositions) like "of", "to", "from", etc or articles like "the", "an", etc.
All Upper Case
All letters in text are composed of standard upper-case characters. Typically used in section/column headings or in graphical elements that aren't part of the main flow of text.
Note: if used inline, consider using small caps or petite caps instead.
All Lower Case
All letters in text are composed of standard lower-case characters. Standard text always has some capitalization; using all lower case violates user expectations and forces them to process the words differently. When used appropriately, this is a powerful tool for drawing attention.
Small Caps
A variation of a font in which lower case letters are represented with characters that look like upper case, but are sized to be near the height of normal lower case letters. Typically about 10% taller than lower case letters (for most Anglo-Saxon fonts).
When done property, small caps preserve the stroke weight of the other letters and are also slightly wider for enhanced readability.
Petite Caps
Similar to small caps except they are the same height as lower case letters, instead of being slightly taller.
Drop Caps
Drop caps, also known as initials, make the first letter of a paragraph or chapter stand out. Typically, initials are two-four times the height of normal letters and can come quite ornate.
Drop caps can be created with larger versions of the same font, a different font, or even with a graphic. There are three typical variations of how drop caps can be set with respect to the surrounding text:
- Same baseline and left margin as surrounding text, but extending into the space above the paragraph.
- Same left margin as the surrounding text, and sharing a baseline with one of the subsequent lines. Depending on the height of the initial, this could have it extending above the first line as well. The most commmon form of drop caps.
- In the left margin of the paragraph, offering several variations for vertical alignment, from extending above, to flush with the top, to somewhere in between.
Initials are morphologically classified: the rubricated letter, the epigraphic letter imitates ancient Roman majuscules, the figurated initial typically in miniatures, the historiated initial gives spatial support to scenes of a narrative character.
Initial sitting on the same baseline as the first line of text, at the same margin:
Initial on the left margin, with text indented; difference between this and a true drop cap is seen when the text extends below the initial:
In 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, keeping the left and top margins of the paragraph flush:
In some older manuscripts, the first letter of normal sized text after a drop cap also would be capitalized, which evokes the handwritten diminuendo style of gradually reducing the text size over the course of the first line.
Small Caps Usage
Abbreviations are one common use: BC and AD.
Time of Day
American usage: The earthquake struck at 6:40 AM. British usage: The earthquake struck at 6:40 a.m.
Emphasis
Common Titles
Mr., Dr., Ms., St., *note Mrs and MS are conventionally treated as abbreviations even though they cannot be written any other way. French and Spanish Equivalents: M. Mitterand, M. Mitterrand, Sr. González. (These are the usual French and Spanish abbreviations for Monsieur and Señor, equivalent to English Mister.)Full Stops Usage
British favours omitting full stops in abbreviations that include the first and last letters of a single word, like Mr, Mrs, Ms, Dr, and Sr. American usage includes full stops, Mr., Mrs., Ms., Dr., and St. a.m. Before Noon and p.m. After Noon - not capitalized in British usage. American usage prefers small caps and no full stops. b.c. and a.d. traditional and recommended to write a.d. before the date. b.c.e. "before the common era" and c.e. "of the common era" for those preferring not to use the Christian calendar. b.c., a.d., b.c.e., and c.e. typically in small capitals
Note: when an abbreviation comes at the end of a sentence, only use one full stop; never write two full stops in a row.
Company names, branding, etc., typically has company names written in capital letters with no full stops. Aside from already noted, generally try to avoid using abbreviations in formal writing, as overuse/misuse can make text irritating and hard to read.Note: the exception to the policy of avoiding abbreviations comes in the case of scientific writing; when names of units are always abbreviated and always written without full stops or a plural "s". If you are doing scientific writing, you should conform 5 kg and not 5 Kilograms, 5 kg., or 5 kgs. 800 Hz not 800 Hertz 17.3 cm3 and not 17.3 cubic centimeters. Typical Latin abbreviations used in English texts, with their English equivalents:
.
Typical rule of thumb for these Latin abbreviations is do not use them; they are only appropriate when brevity is at a premium, like in footnotes.
The abbreviation ca. is properly used only in citing a date that is not known exactly, and then usually only if the date is given in parentheses; outside of parenthesis, avoid using ca. and use something like "about" or "approximately".
etc. should never be used in careful writing; its considered vague and sloppy, and in regards to people, rather offensive. If you are going to use it, spell and punctuate it correctly.
Typical Latin abbreviations are written in italics.
et al. has only one full stop because et "and" is a complete word in Latin.
Do not use the Latin abbreviation for compare, cf., merely to refer to published work, as shown below:
The Australian language Dyirbal has a remarkable gender system; cf. Dixon (1972).The example above is wrong because the author is not inviting the reader to compare Dixon's work with anything, but only to consult that work for more information. The sentence written correctly:
The Australian language Dyribal has a remarkable gender system: see Dixon (1972).