Formatting

These advanced formatting guidelines bring greater precision to your typography. These techniques not only make copy easier to read, but they also elevate your typographic craft.

Punctuation and Symbols

Hanging Punctuation and Symbols

Extending some punctuation marks or symbols into the margin of flush text—that is, hanging (or hung) formatting—gives a more uniformly aligned appearance. Unhung punctuation can give the impression of an unnecessary indentation.

Punctuation marks (including quote marks, hyphens, en dashes, commas, and periods) and symbols (like asterisks and the plus symbol) should be manually hung when possible. Search for “hanging punctuation” or “optical margin alignment” in your settings to automatically activate this. While you can activate an automatic setting for hanging punctuation or optical margin alignment, further manual adjustments may still be necessary.

Correct use of punctuation marks and the left margin.
Incorrect use of punctuation marks and the left margin.
Correct use of punctuation marks and the left margin.
Incorrect use of punctuation marks and the left margin.
Correct use of punctuation marks and the left margin.
Incorrect use of punctuation marks and the left margin.
Correct use of punctuation marks and the left margin.
Incorrect use of punctuation marks and the left margin.

Ellipses

Correct use of ellipses at the end of a sentence.

Do use the ellipses glyph (…) rather than three consecutive periods; see Keyboard Shortcuts.

Optical Alignment

To give the appearance of a more uniform vertical alignment, manually kern stacked letters with angled, curved, or vertical strokes—like “A” or “W” or “S”—as well as optically align text with accompanying images.

Correct use of optical alignment.
Incorrect use of optical alignment.
Correct use of optical alignment.

Do optically align text and images.

Incorrect use of optical alignment.

Avoid using default bounding boxes to align text and images, as they may not align optimally due to variations in letterforms.

Rags, Widows, and Orphans

Rags

Morningstar prefers a deeper rag along the right margin. To create the Morningstar rag, make manual line breaks or, if possible, edit the copy rather than relying on default line breaks.

Correct use of rags, widows, and orphans.

Do manually adjust rags so there’s consistent irregularity, which helps with readability.

Incorrect use of rags, widows, and orphans.

Don’t allow distracting shapes to form in your rags, which draw attention to the text’s visual appearance rather than the copy.

Incorrect use of rags, widows, and orphans.

Avoid repeating words at the end or front of a line of text.

Widows and Orphans

When typesetting, single words may be accidentally left at the end of a paragraph (orphan) or at the start of a column (widow). You may rewrite the text or apply line breaks within the body of text.

Orphans, like “market,” and widows, like “products,” interrupt the flow of reading.
Orphans, like “market,” and widows, like “products,” interrupt the flow of reading.

Spacing

Hair Space

Hair space is the thinnest space and allows for the most subtle adjustments. It is typically used after intermediary periods in initials within names. If the hair space tool is not available, it’s advisable to use no space at all. Normal word spacing follows the last period in a string of initials.

Correct use of hair space.
Incorrect use of hair space.

Thin Space

Thin space, slightly wider than its hair space counterpart, allows for nuanced adjustments in spacing between characters. Thin spaces are commonly used between numerical values and units. If a thin space isn’t possible, opt for an en space instead. Don’t use no space.

Correct use of thin space.
Incorrect use of thin space.

Non-breaking Space

Non-breaking spaces keep a connected unit of measurement or an idea together on the same line to preserve formatting and improve readability. It’s commonly used between numbers and numerical expressions and between phrases and numbers that would appear awkward or out of context if separated.

Correct use of non-breaking space.
Incorrect use of non-breaking space.
Correct use of non-breaking space.
Incorrect use of non-breaking space.

Lists

Consistent spacing in lists shows that each item is distinct without being too far apart, improving readability. Note that spacing should be appropriate to the information density in your work and will vary; use your judgment.

For lists with a rule line, aim for a minimum of 200% leading space between each section. For example, a type size of 16 px would have 32 px leading.
For lists with a rule line, aim for a minimum of 200% leading space between each section. For example, a type size of 16 px would have 32 px leading.
For lists without a rule line, aim for a minimum of 150% leading space between each section. For example, a type size of 16 px would have 24 px leading.
For lists without a rule line, aim for a minimum of 150% leading space between each section. For example, a type size of 16 px would have 24 px leading.

Superscripts and Footnotes

Incorporate superscripts in the body copy for footnotes, while using full-size numbers within the footnotes.

Type on Imagery

When combining typography with imagery, we apply color and contrast techniques for better legibility.

Correct use of type on imagery.

Do apply a color overlay to the image or a subtle drop shadow to the text to improve contrast between the text and background.

Incorrect use of type on imagery.

Don’t overlay text on an image without applying any contrasting techniques, as the lack of contrast impacts legibility.

Incorrect use of type on imagery.

Don’t rasterize text within images, which makes it inaccessible.

Language

Correct language settings help your text adhere to a language’s spelling, hyphenation, and formatting conventions. Always verify and set the language accordingly in the program settings.