Typography

Typesetting controls the readability of a text with the size, style, and spacing of its type. It’s a function of microtypography (how text is styled within a text block) and macrotypography (how content elements are arranged on the page). The more readable a text is the more easily users can understand its content. Text with poor readability turns off readers and can make it challenging for them to stay focused.

Font size

• Use a comfortable reading size for body text. For most text, including body copy, use at least an effective size of 17px (if using Franklin Gothic, 16pt for other fonts). Smaller and larger text can be used sparingly for special purposes (like headings, captions, photo credits, footnotes, data tables, or specialized UI elements).

• Set type flush left. Type set flush left provides the eye a constant starting point for each line, making text easier to read.

• Most lines of text should be 45–90 characters. The current standard range for readable line length is 45 to 90 characters per line. A good target for long texts is 66 characters.
• Text with greater line height can have a longer measure. Since one of the functions of measure is to help readers move from one line of text to another more naturally, the effects of a long measure can be lessened by increasing the space between lines. Thus, text with more space between lines can have somewhat longer line length.
• Short passages can have measure outside the ideal range. In contexts when users will be reading short passages of text (such as footnotes or alerts), you can safely set somewhat longer or shorter lines than usual.
• Large text can have a shorter measure. Since larger text takes up more screen real estate, it may make sense to assign it a relatively small measure.

• Longer texts require more line height. Headings and other content elements no longer than a line or two can have a line height between 1 and 1.35 . Longer texts should have a line height of at least 1.5.
• Longer lines usually require more line height. Distinguishing between lines of text can be difficult when the eye has to travel from the end of one long line to the beginning of the next. Using more line height makes it easier for readers to distinguish individual lines. Though, somewhat counterintuitively, long lines of text can benefit from slightly less line height than usual, as too much line height can make each individual line appear too prominent.
• Readable text has a medium density. Strive for text that appears neither very dense nor loose. The reader typically shouldn’t notice the space between lines of text.

Whitespace

The space around your content elements affects the relationship between these elements. Use less whitespace to group elements and more whitespace to distinguish them from each other.

• Don’t indent paragraphs, use whitespace before. While most longform print design uses indented lines to distinguish paragraphs, it’s more conventional on the web to use unindented paragraphs separated by whitespace.
• Use at least 1em of whitespace between paragraphs. To properly separate paragraphs from one another, use the equivalent of one blank line of whitespace between them. Using more than 1.5em disturbs the flow of the text, and using less than 0.5em doesn’t provide enough separation.
• Use at least 0.5em of whitespace between list items. List items should also be separated by whitespace, but they need less space than paragraphs because the list item indicator also helps distinguish adjacent items.
• Headings should be closer to the text they introduce than the text that preceeds them. It’s important that headings are more visually connected to the text for which they’re the heading than the text of the previous section to reduce ambiguity and cognitive dissonance. Use at least 1.5 times the amount of whitespace above the heading as below it.
• Text should have sufficient margin on the left and right. Running text requires right and left margin proportional to the width of the viewport. Use at least 1 unit of margin between the text and the edge of the viewport at mobile widths and at least 2 units on a tablet. Desktop widths can require as much as 4-5 units of minimum horizontal margin between the body of the text and any adjacent elements. [***need to define units***]

Font style

The style of a typeface affects its readability. In general, serif typefaces are more appropriate for long blocks of text and sans serif typefaces are more appropriate for UIs — but this norm is not a hard-and-fast rule. The conventions of the web are more forgiving of longer, sans serifed texts and serif UIs are not out of the question for sites of a certain tone.

Letterspacing

Letterspacing is the spacing between individual letterforms in a block of text. Typically, letterspacing is defined by the type designer and shouldn’t be modified. Certain situations, however, can call for letterspacing adjustments.

• Very small text can use looser letterspacing. At very small type sizes, extra letterspacing improves readability.
• Very large text can use tighter letterspacing. Tighter letterspacing can improve large headings.
• Text set in uppercase or small caps should use looser letterspacing. Uppercase text and small caps can appear too tight with normal letterspacing.

Font Families

Franklin Gothic Regular (Book) is the preferred typeface as instructed by UVA Brand.

Bodoni (Poster) is also an approved typeface and is to be used very sparingly if at all. (Currently not used on the site.)

Sizes

Proper semantics should always be followed. Content is properly structured and headings are appropriately ordered. This is imperative for accessibility.

The base font size is set at 17pt. The minimum size for the majority of body text should not be less than 17pt. This is defined for the root, so often you can use "rem" to designate font size (this method is preferred).

Using the heading classes "as is" will include the default padding and margin. Alternatively, you can use class=".h1 .h2 .h3 .h4 .h5 .h6" to use that style. (e.g. if you wanted to style an h3 to look that of another header, you could give it that class: <h3 class="h6">Header</h3> In this example, the h3 would visually look like an h6 header, but a screen reader will recognize it as an h3).

.h1: 2.488rem

.h2: 2.074rem

.h3: 1.728rem

.h4: 1.44rem

.h5: 1.2rem

.h6: 1rem

• Heading 1: See top of page.

• Heading 2

• Heading 3

• Heading 4

• Heading 5

• Heading 6

Sample paragraph formatting

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent maximus faucibus mattis. Sed non malesuada velit, quis porta lorem. Sed eu commodo metus. Aenean ullamcorper lacinia lectus, eultricies elit maximus at.

Donec efficitur metus est, in tempus neque malesuada ullamcorper. Donec imperdiet pharetra nulla sit amet venenatis. Aliquam vitae nisl ac elit bibendum ornare. Integer ligula libero, euismod vel finibus id, imperdiet vitae ligula.