Learn 36 Content & Typography concepts for Frontend development, with definitions, aliases, and ready-to-use AI prompts.
The visual design shared by a family of fonts, shaping the voice of written content.
Choose a highly legible typeface for a developer documentation interface. Match its personality to the product, verify distinct letterforms at small sizes, keep the type palette restrained, and provide dependable system fallbacks.An ordered list of preferred and fallback fonts used when text is rendered.
Create a resilient CSS font-family stack for a web app, starting with the chosen interface font, then compatible local fallbacks and a generic family. Minimize layout shift and test accented characters, symbols and numerals.The rendered scale of characters, chosen for readability and hierarchy.
Define readable font sizes for a responsive interface. Start body copy at a comfortable size, make hierarchy obvious without extreme jumps, use relative units, and confirm text remains usable when users zoom to 200 percent.The stroke thickness of text used to create emphasis and hierarchy.
Use font weight to distinguish headings, labels and body copy without relying on weight alone. Choose available weights that remain legible, avoid faux bolding, and preserve contrast in light and dark themes.A normal, italic or oblique treatment that changes the posture and emphasis of text.
Add semantic italic emphasis to a short phrase using an actual italic font style. Keep long passages upright, do not use italics as the only status cue, and preserve readability for dyslexic and low-vision readers.The vertical distance between baselines that controls rhythm and reading comfort.
Set a comfortable unitless line-height for body text and a tighter value for headings. Ensure user text-spacing overrides do not clip, overlap or hide content, including at narrow widths and 200 percent zoom.The added or reduced space between characters, also known as tracking.
Tune letter spacing for an uppercase eyebrow label and normal body copy. Avoid tight tracking that harms recognition, use relative units, and let browser and user spacing overrides work without clipping.The luminance difference between text and its background that keeps content perceivable.
Choose text and background colors that meet WCAG contrast requirements in light and dark themes. Target at least 4.5 to 1 for normal text and 3 to 1 for large text, and never communicate meaning through color alone.A font file with adjustable axes such as weight, width or optical size.
Implement a variable font with a useful weight axis, a safe fallback stack and font-display behavior that limits layout shift. Animate variation only when it adds meaning and respect reduced-motion preferences.A coordinated set of text sizes that creates predictable visual hierarchy.
Create a compact type scale for a responsive product interface, covering display, heading, body, label and caption roles. Use tokens and relative units, keep adjacent steps distinct, and reduce oversized headings on small screens.Large, expressive text used for a page hero or major editorial statement.
Create responsive display text for a product hero. Keep it brief, use balanced wrapping, scale it fluidly without becoming oversized, preserve strong contrast, and keep the HTML heading level semantically correct.A prominent heading treatment that labels a section and exposes its structure.
Style section headings with clear hierarchy, concise wording and semantic heading order. Use size, weight and spacing together, avoid skipping levels for appearance, and let long localized headings wrap naturally.An introductory paragraph with extra emphasis that summarizes what follows.
Create a lead paragraph below a page heading that summarizes the page in one or two readable sentences. Give it modest size or weight emphasis, constrain its measure, and keep sufficient contrast in every theme.The primary long-form text style optimized for sustained reading.
Style body copy for comfortable long-form reading with a legible font, relative size, generous line-height, strong contrast and a line length near 45 to 75 characters. Preserve paragraphs and user text-spacing overrides.A short label above a heading that supplies category or context.
Add a short eyebrow label above a heading to identify its category. Keep it optional, concise and high contrast; use moderate uppercase tracking only when the typeface supports it and do not replace semantic heading structure.Compact supporting text that explains an image, chart or media item.
Create a concise figure caption that identifies what the media shows and provides useful context. Associate it semantically with the figure, keep the text readable rather than tiny, and include source or credit when needed.Short text that names a field, control, value or content region.
Write and style a persistent form label that clearly names its control. Connect it programmatically, use sentence case, avoid placeholder-only labels, mark optional or required status in text, and let long translations wrap.Secondary details such as author, date, status or file size shown near primary content.
Present author, date and reading-time metadata in a compact but readable style. Use separators that work with screen readers, preserve contrast, use semantic time elements, and avoid making essential information visually faint.A controlled line length that keeps paragraphs comfortable to scan and read.
Constrain long-form copy to a readable measure of roughly 45 to 75 characters per line while allowing the layout to shrink naturally. Use ch units as a guide and avoid fixed widths that break reflow or localization.Vertical space between paragraphs that separates ideas without disrupting reading rhythm.
Create a consistent vertical rhythm for paragraphs using margins rather than empty lines. Keep related text grouped, allow user text-spacing overrides, and prevent margin collapse from producing surprising gaps.How lines of text align to the start, center, end or both edges of a container.
Align paragraphs to the logical start edge for comfortable reading and automatic right-to-left support. Reserve centered text for short content, avoid fully justified body copy unless hyphenation is excellent, and test narrow screens.Semantic stress applied to words or phrases using weight, style or other cues.
Use strong and emphasis semantics to highlight only the most important words in a paragraph. Avoid excessive bold or italic text, keep emphasis visible at all contrast modes, and do not use styling alone to communicate status.A recognizable text treatment that communicates navigation and interaction.
Style inline links so they are distinguishable without color alone, with an underline or equivalent non-color cue, strong contrast, visible hover and focus states, and clear visited styling when it benefits navigation.Text, marker and spacing rules that make ordered and unordered lists easy to scan.
Style semantic ordered and unordered lists with clear indentation, aligned markers and comfortable item spacing. Keep markers visible in high contrast modes, support nested levels, and avoid using decorative characters as fake bullets.A distinct treatment for quoted language and its attribution.
Create an accessible block quotation with semantic blockquote and cite elements, readable quotation marks, restrained visual emphasis and a clear attribution. Do not use quotation styling for ordinary callouts.A monospace treatment for code, commands, variables and keyboard input.
Style inline code and short code samples with a legible monospace stack, sufficient contrast and preserved whitespace. Keep the font size readable, allow horizontal scrolling only for code blocks, and expose copy controls clearly.Proportional, tabular and oldstyle figure choices suited to different numeric content.
Use tabular numerals for changing financial or tabular values so columns stay aligned, and proportional numerals for ordinary prose. Verify the chosen font supports the feature and preserve locale-aware separators.Text styles that adapt across viewport sizes without losing hierarchy or readability.
Create responsive typography that preserves roles and readable measure from small phones to large desktops. Use relative units, reduce display sizes thoughtfully, avoid fixed-height containers, and test zoom, reflow and localization.Text sizing that scales smoothly between chosen minimum and maximum values.
Implement fluid heading size with CSS clamp using a readable minimum, a modest viewport-based preferred value and a controlled maximum. Keep body text stable, preserve browser zoom and avoid viewport units as the only sizing input.The ability to enlarge text without losing content, controls or functionality.
Build the interface so text can be resized to 200 percent without clipping, overlap, missing controls or loss of information. Prefer relative units, flexible containers and content-driven height, then test real browser zoom.Content wrapping into one readable dimension as the viewport or zoom level changes.
Make article text reflow at a 320 CSS-pixel viewport without horizontal page scrolling or two-dimensional navigation. Allow words and controls to wrap, preserve reading order and exempt only genuinely two-dimensional content.How lines break around spaces and long tokens when horizontal room runs out.
Configure text wrapping for long labels, URLs and identifiers. Prefer natural line breaks, use overflow-wrap for unbroken tokens, avoid breaking every word, and keep controls tall enough for two-line labels.Language-aware insertion of hyphens where words break across lines.
Enable automatic hyphenation only for supported long-form languages, set the correct lang attribute, and balance it with readable measure. Avoid hyphenating short labels, names, URLs, code and user-entered identifiers.Deliberately shortening overflowed text while providing access to the full value.
Truncate non-essential repeated text only when space is constrained. Preserve the full accessible value, provide a discoverable way to reveal it, avoid truncating unique identifiers or error messages, and support keyboard and touch users.Mixed left-to-right and right-to-left content displayed in its correct reading order.
Support Arabic or Hebrew content beside Latin text using logical CSS properties, correct dir and lang attributes, and bidirectional isolation for dynamic values. Mirror directional layout cues without mirroring universal symbols.A type system that supports different scripts, glyph coverage and language conventions.
Create a multilingual typography stack for Latin, Malay, Simplified Chinese and Arabic content. Choose compatible fallbacks with full glyph coverage, let line height adapt per script, set language and direction correctly, and test real translations.