Handling Small Blocks of Text in Typography

Labels represent short text commands (2-4 words) that users usually encounter on button labels, menus, tags, text inputs, and other action-oriented UI elements. Their main goal is to clarify the task and encourage action. That's why labels should be concise but informative and straightforward. Undeniably, consistency is key when it comes to labels that appear in different locations to indicate the same action.

Ultimately, they tell users what to do and should be as visible as possible. Make sure to comply with WCAG's color contrast requirements for labels — 4.5:1 for normal-sized text, which is less than 18 pt or 14 pt if bold.

Image captions often represent the smallest font size on a page and include brief explanations accompanying visual content. They can also include acknowledgments to the author or the copyright holder of a photograph, an image, illustration, graph, etc.

When designing captions, stick to simplicity — black or gray text positioned either to the side or below an image. From an accessibility viewpoint, italics aren't the best choice for users with visual or cognitive impairments. Instead, you can experiment with text color and background to add more visual interest.

Microcopy includes error and success messages, CTAs, onboarding copy, placeholders, empty states, loading messages, notifications, tooltips, and other small tidbits of copy users meet in digital interfaces.

Its main goal is to guide, engage, and provide cues so users can complete their tasks quickly and effectively. Microcopy is also a fantastic tool for introducing the brand's personality. Depending on what emotions you want your users to experience when they interact with your product, you can adjust the voice and tone to make the brand appear friendly and casual or poised and calm.

When it comes to formatting, microcopy should be visible and contain enough visual weight. After all, this tiny piece of copy can empower users to take action. Color, font weight, and size are your go-to tools to reach the right visual hierarchy for microcopy.

When an error happens, users should know about it. More importantly, error messages should be concise and straightforward, explaining why an error has occurred and what users should do to fix it as fast and effortlessly as possible. It's recommended to avoid a blaming tone or technical jargon and use plain language instead.^[1]

In error messages, form is as important as content. Error messages should be visible, but that doesn't mean the color red is the only tool you should rely on. Utilize typography tools such as sizing or font-weight to create hierarchy and draw attention to text elements that explain the error and provide a visible way out (primary button).

Call to Action (CTA) is a marketing term for a design element that aims to catch user attention and encourage them to take the desired action (sign up, buy a product or a service, subscribe to newsletters, book a demo, etc.). Designers and marketers often use the term to describe CTA buttons, but it can refer to any text that triggers an action.

As one of the most important elements on a page, the CTA should have enough visual weight. Use headlines and play around with font-weight and colors to make a stir among users and get their immediate response.

You may think that a good design doesn't need an explanation. However, what seems obvious to designers may not be that obvious to users. To avoid user frustration and abandonment, you should always provide help and documentation. Or better, prevent errors before users encounter a problem by offering tutorials, instructional overlays, templates, contextual help, and tooltips.

Tooltips are tiny messages that appear on mouse or keyboard hovers to provide some extra information about any active element (icons, text links, buttons, or other components) on a page. They are highly contextual and specific and should never contain information that is vital to completing a task (that should be displayed more prominently elsewhere).^[2]

Since tooltips are the smallest text in a type system, they should be 2-3 px smaller than the body text. Make sure they are placed on a contrasting background and avoid unnecessary styling (like italics) that can hurt legibility.

A byline is a piece of information providing the author's name, publication date, and sometimes, editors or their biographical information. It usually sits between the headline and the body text or below the story. You can often encounter bylines in newspapers and magazines.

A byline can be easily confused with the term "metadata" which refers to information about a document. It could contain the author's name, the creation date, as well as file size and keywords used to describe the document. In contrast to bylines, this information is invisible, embedded into the HTML page, and helps search engines understand the content and context of your website.^[3]

The byline is considered secondary text and should be smaller than the body text. Make sure to distinguish the byline from the content by using bold or italics judiciously.