Skip to content

General Topics: Working with Digital Files

Jump to bottom
leslie liu edited this page Jul 24, 2023 · 8 revisions

next up ### Analog <> Digital Units points, ems, ppi (dpi) ### Raster v. vector graphics (section that redirects to vector v. bitmap fonts) Resolution, Compression, and Sampling

Working in Pixels

Device-independent pixels. Because the physical size of an on-screen pixel differs depending on the display tech used, consider a "pixel" as referred to in digital design/Figma a virtual, proportional unit. This is similar to a device-independent pixel (AKA density-independent pixel, dip, or dp), wherein we can define the dp-to-inch ratio. For example, Apple refers to their virtual unit as point and Android's approach.

Resolution. AKA display resolution. The number of pixels shown on a screen, along the x (rows) and y (columns) axes. The fixed resolution (i.e. number of physical pixels; its pixel count) of a fixed pixel display (i.e. most digital TVs) is its native resolution. Media that is not at a display's native resolution will need to be up/downsampled (i.e. interpolation; rescaling/resizing). When used colloquially, resolution refers to the clarity/level of fidelity of visual media.

As a unit, resolution (R) is measured in ppi (pixels per inch) (AKA dpi, dots per inch) and is calculated like so:

R = P/U

where P is the pixel count of the physical display (px), U is the physical length (in).

Pixel-perfect graphics. When the pixel count in the content/digital media = the pixel count of the display. Whenever possible, use the native (physical) pixel count of the hardware to design at pixel-perfect scale.

Aspect ratios

The proportional relationship between media dimensions. Notated in X:Y where X is the width and Y the height.

  • Display aspect ratio, DAR: the physical width and height (in/cm) of a display
  • Storage aspect ratio, SAR: number of virtual pixels in width and height as stated in display resolution
  • (Pixel aspect ratio, PAR: the width and height of an individual pixel)

Standard computer monitor and HDTV resolutions use square pixels.

Sources (to do: place where relevant): 1, 2, 3, Also see: 1, 2

Misc./commit to discussing in type section?

Aliasing. Distortion artifacts that emerge when representing a high-resolution image at a lower resolution. Anti-aliasing is a technique to minimize the distorted effect.

Clone this wiki locally