UX/UI Design Engineering Skill

The browser default subpixel-antialiased uses RGB channel hinting, making text appear heavier and less crisp — most visible on dark backgrounds. -webkit-font-smoothing: antialiased switches to grayscale antialiasing on macOS, producing thinner, sharper strokes. Add text-rendering: optimizeLegibility to enable kerning pairs and ligatures. These properties have no effect on Windows where ClearType handles rendering at the OS level.

Font size creates scale. line-height, letter-spacing, and font-weight create hierarchy. A heading and a body paragraph set to the same weight and line-height will read as the same importance regardless of their size difference.

Each context has different optical needs. Labels are read in a glance — they need tighter line-height and slightly open tracking. Body text needs breathing room. Display headings need compressed tracking to hold together visually at large sizes.

The optimal range for comfortable reading is 45–90 characters per line. Below 45, the eye changes direction so frequently reading becomes choppy. Above 90, the reader struggles to find the start of the next line — the eye drifts and loses its place.

For a single-column layout, target 65–90 characters. The ch unit is relative to the width of the 0 glyph in the current font, so the constraint scales correctly when users change their browser font size — unlike px values.

When text elements of different sizes share a row, aligning them to their vertical center creates a visible float. The smaller element appears to hover above the line. Align to the shared baseline instead — the eye reads the row as a single visual unit.

Media query breakpoints produce abrupt size jumps between fixed values. clamp() interpolates smoothly across the full viewport range — no jumps, no breakpoints. Always include a rem-based component alongside vw; vw alone breaks when users increase their browser font size, failing accessibility requirements.

Controls advanced typographic features in OpenType fonts. Whenever possible, prefer the higher-level font-variant shorthand or its longhands — font-variant-caps, font-variant-numeric, font-variant-ligatures — which produce more predictable results. Reach for font-feature-settings only when no other way exists to enable a specific OpenType feature. Each tag is a four-character string, optionally followed by a positive integer or on/off.

Reach for "tnum" (or the equivalent font-variant-numeric: tabular-nums) and "ss02" — Inter's disambiguation stylistic set that produces the slashed zero — wherever digits need to line up vertically or change in place without reflowing the layout: tables and data grids, dates and timestamps, prices and currency, counters and timers, diff views, code and log line numbers, numeric form inputs (phone, card, OTP, quantity), and chart axes or metric tiles. Skip it for body prose with the occasional number — proportional figures read more naturally there.

Browser default underlines sit on the baseline and clip through descenders. Three properties fix this: text-decoration-thickness controls weight, text-underline-offset lifts it clear of the descender zone, and text-decoration-skip-ink breaks the line where it would intersect a glyph. All three are font-relative — they scale at any size.

Variable fonts with an optical size axis (opsz) automatically adjust stroke contrast, x-height, and spacing based on the rendered size. A 12px label and a 64px display heading from the same typeface will each use the most legible version of themselves — not the same design scaled differently. Demo uses Roboto Flex, which exposes the axis between 8 and 144.

Pure mathematical grays share no hue with any other color in the palette. Next to a saturated brand color they read as foreign — a different material placed inside the design. Infusing grays with a slight tilt toward the dominant hue (under 5% chroma in OKLCH) creates cohesion without visible color.

HSL lightness is not perceptually uniform. A yellow at L 60% appears far brighter than a blue at L 60% — equal numbers, unequal perception. OKLCH is perceptually uniform: equal numerical steps in lightness produce equal visual steps across all hues. It also natively accesses the P3 gamut on modern displays.

The scale below shows 6 equidistant lightness steps in HSL vs OKLCH. Notice how the HSL steps feel uneven — the midtones cluster together.

Refined gradients are not single linear blends. Color space defines the path between two stops; sRGB drags you through muddy mid-greys at the midpoint, OKLAB stays in pastel territory, and OKLCH longer hue walks the hue wheel itself.

Beyond color space, a small set of techniques does the real work: color-stop hints bias the perceptual midpoint without adding a third color, extra stops or grain overlays kill banding in subtle dark gradients, stacked radial gradients turn a flat backdrop into mesh-like ambient light, hard stops paint clean splits without extra elements, and conic gradients deliver progress rings and dial UI without SVG.

In dark UIs, surfaces create depth through brightness. But too much brightness difference makes containers compete with content. Too little and the separation disappears. The ceiling for dark UIs is 12% brightness difference; for light UIs, 7%.

When elements are nested inside rounded containers, their border radii must be concentric — not equal. Equal radii on parent and child create a gap where the corner curves diverge. The formula is simple: outer radius equals inner radius plus the padding between them.

A card with border-radius: 20px and 8px padding needs an inner button at border-radius: 12px. Mismatched radii on nested elements is the single most common detail that makes interfaces feel unfinished.

When geometric centering looks visually off, trust your eye over the coordinates. A button with text plus a heavy trailing icon is the classic case: equal padding on both sides makes the content drift right, because the icon carries more visual weight than the empty space on the left. Compensate by giving the side with the lighter element a few extra pixels of padding — the content then reads as truly centered.

Every interactive element needs at least 40×40px of tappable area. Small icon buttons — close icons, nav toggles, inline actions — are almost always under this threshold. Extend with a pseudo-element so the visible design and the interaction boundary are independent.

A natural elevation shadow follows two rules. Blur is 2× the offset distance — 0 4px 8px reads as natural lift, 0 4px 4px reads as flat, 0 4px 24px reads as a glow. And stack a sharp directional layer with a soft diffuse layer — a single box-shadow looks digital, two layers mimic the way light actually behaves on a raised surface. Both layers should respect the 2× rule, and both should scale up proportionally on hover so the surface feels like it's rising further from the page.

Third-party components, embedded SVGs, and icon fonts sometimes make direct color manipulation impossible. CSS filter combinations can tint any element to a target color when color and fill are inaccessible. Use a filter generator tool to calculate the exact sequence — this is precise, not approximate.

An inset shadow communicates physical depression — the element appears to push into the surface when activated. Combined with a subtle scale, it gives button presses genuine tactile feedback. Press the button below to feel the difference.

Hardcoded z-index values create stacking conflicts that compound as a codebase grows. A named token scale with stepped increments solves this: gaps allow future layers to be inserted without rewriting the entire stack. An element inside a stacking context can never visually exceed its parent — use isolation: isolate on component roots to contain their internal stacking without polluting the global space.

Creating visual hierarchy is more about reducing the prominence of secondary elements than increasing the prominence of primary ones. Lower the contrast, weight, and size of supporting content — the primary content reads as more important because the differential increased, not because it got louder.

The cursor is a free affordance signal. It communicates intent before the user commits to an interaction. Mismatching cursor to element behavior creates a moment of uncertainty that erodes trust. Hover each element below — the cursor tells you exactly what it does before you click.

Icons rendered at the same opacity as adjacent text appear optically heavier. Text is composed of thin strokes with generous negative space. Icons — even outline-style — have more filled area. At full opacity next to a label, the icon dominates. Reducing to 80–90% opacity balances the pair without making the icon invisible.

Enter animations are triggered by user interaction — opening a panel, navigating to a view, adding an item. Running them on the initial page render makes the interface feel unstable. The two side-by-side dashboards below let you compare: Reload page simulates a fresh navigation, and Open dialog simulates a user-driven interaction. The bad page replays its enter animation on every reload; the good page only animates the dialog when the user explicitly opens it.

Duration should match complexity. Simple state changes need to feel instant. Complex enter sequences need room to breathe. Anything over 400ms makes the interface feel sluggish — the user has stopped and is waiting for the UI to catch up with them.

Easing communicates physics. ease-out — fast start, slow deceleration — mimics an object responding immediately to input and settling gradually. This gives the impression of instant response. ease (slow start) feels like the interface is warming up before it moves.

Elements can animate as they enter the viewport using the native CSS scroll timeline API — no JavaScript, no IntersectionObserver, no library. Scroll the container below to see it in action. Chrome 115+, Firefox 110+.

prefers-reduced-motion: reduce is set by users with vestibular disorders, motion sensitivity, or epilepsy. Vestibular disorders affect approximately 35% of adults over 40. Swap translate and scale animations for opacity-only fades — they convey transition without spatial movement.

Animating width, height, top, or left triggers full layout recalculation on every frame. The FLIP technique converts these into compositor-only transform animations: record the First position, apply the Last state, Invert with a transform to the start position, Play to identity. Pin or shuffle the items below — every reorder runs a manual FLIP using the Web Animations API.

CSS linear() generates custom easing functions that simulate spring and bounce physics without a motion library. Use a spring generator tool to produce the values from spring parameters. If the project already includes motion or framer-motion, use their spring API instead — the result is identical with cleaner syntax. bounce should always be 0 or near 0 for UI transitions. Pick a preset below and tap Open to feel each spring against the same popover.

transition: all registers a watcher on every animatable CSS property. Any change — including unintentional ones — triggers a transition. Hover both buttons below to see the difference. The left button animates its size and padding unexpectedly because all watches everything.

Defers layout and paint for off-screen elements until they approach the viewport. The browser still reserves space but skips the rendering work — measurably effective on feed layouts, dashboards, and long lists. Always pair with contain-intrinsic-size to prevent the scrollbar from jumping as elements render. Toggle the chips below to see which cards are paying the rendering cost as you scroll.

contain: content tells the browser that an element's internal layout, paint, and style are sealed inside its box. Changes within the component cannot affect anything outside it — and paint is clipped at the boundary. Below, the same animated blob is rendered inside both cards. Without containment, the blob bleeds out and forces the browser to repaint the whole region around the card; with contain: paint, the paint is clipped to the card and nothing outside is touched.

The browser renders in three phases: layout → paint → composite. Only transform and opacity skip the first two phases and run on the GPU. Every other animated property forces recalculation on every frame. Never animate layout properties for motion effects — use FLIP to convert them to transforms.