Back to all topic

Dictionary

AV and To letter pairs illustrating pair-specific spacing

What Is Kerning? Practical Typography Checks for UI Text

Learn how kerning differs from tracking and side bearings. Review metrics, optical and manual spacing, then check real UI headings at the sizes readers see.

Four serif letterforms showing different finishing strokes and stroke contrast

What Is a Serif Font? Definition, Types and Examples

A serif is a small stroke at a letter’s end. Explore four serif font types, familiar examples, and how serif and sans-serif fonts work together.

What is Bitmap and How to Use Bitmap Effectively into Your Design

What is a bitmap? This article introduces the meaning and usage of bitmap and you can learn how to use it into your design effectively.

A cafe photograph and layered source become separate photo and transparent-badge assets for a menu card.

Raster Graphics: Image Formats and Practical Design Uses

Choose raster image formats, distinguish editable sources and Exif metadata, and prepare photos and transparent assets for real interface layouts.

Scalable vector compass beside a pixel-based landscape image

Vector Graphics: When to Use Them and When Raster Works Better

Learn what vector graphics are, where they work best, when raster is better, and how to choose source files and exports for UI and print.

A landscape scene fitted into wide and tall frames without distorting its subject

Aspect Ratio in Web Design: Resize Images Without Distortion

Calculate image aspect ratios, choose crop or contain behavior, and test desktop and mobile layouts without stretching photos or screenshots.

Small source image expanded into visible blocks beside a suitably detailed source

How to Avoid Pixelation: Match Image Detail to Display Size

Diagnose pixelation, distinguish it from blur, and fix undersized UI images through source dimensions, display size and careful resampling.

Lowercase letters with ascender, x-height and baseline markers

Ascender Definition: Meaning and Typography Examples

An ascender rises above a lowercase letter’s x-height. See examples in b, d, h and l, compare font specimens, and understand spacing in UI text.

A large price and smaller period label aligned on one typographic baseline

What Is a Text Baseline? Typography Definition and Examples

A text baseline is the line most letters sit on. Learn how it differs from x-height and a baseline grid, with examples for aligning mixed-size text.

Linear radial and conic gradient swatches with a readable headline panel

What Is a Gradient? Types and Readable UI Examples

Understand linear, radial and conic gradients, correct common gradient myths, and check text readability with a practical UI example.

What Is a Pixel? Image Size, CSS Pixels and Display Density

Understand image pixels, CSS pixels, device density and pixel count, with a practical 160px avatar example for sharper UI assets.

Lowercase letter tails extend clearly below a baseline beside a compact type-spacing comparison.

Descender Definition: Letter Examples and Typography Tips

A descender extends below the baseline, as in g, j, p, q and y. See font examples and learn how to keep lower strokes from colliding or being clipped.

A course-page hero pairing a clear message and action with a focused outdoor illustration

What Is a Hero Image? Choose, Crop, and Test Website Banners

Choose a website hero image that supports the message and CTA. Review historic examples, mobile crops, accessible text alternatives and loading behavior.