1. Introduction: The Language of Measurement in Design

In the disciplines of design and development, measurement units are the foundational grammar that dictates the relationship between creative intent and the final user experience. They are not merely technical values but strategic decisions that determine a system's scalability, accessibility, and consistency across an increasingly fragmented and unpredictable digital landscape.1 The choice of a unit is a declaration of priority, whether that be for pixel-perfect precision, fluid responsiveness, or universal accessibility.


At the heart of this grammar lies a fundamental dichotomy between two philosophies of measurement: absolute and relative units.


Absolute units

Such as pixels px and points pt, are defined by fixed, unchanging values. They provide a stable and predictable measure, independent of their surrounding environment, making them tools of precision.2

Relative units

Such as the root em rem, em, percentage%, and viewport units (vh, vw), are dynamic. Their value is calculated in relation to another property, be it the size of a parent element, the root font size, or the dimensions of the browser window itself. They are the essential building blocks of modern responsive and adaptive design.3


This report moves beyond surface-level definitions to provide a deep, contextual analysis of these units. It aims to equip designers, developers, and system architects with the nuanced understanding required to make deliberate, context-aware decisions about measurement, ultimately fostering the creation of more robust, maintainable, and user-centric digital products.


Characteristic Absolute Units Relative Units
Reference Point Fixed physical or logical measure Contextual (parent, root, viewport)
Behavior Static and predictable Dynamic and scalable
Primary Use Case Precision-critical elements (borders, icons), print layouts Responsive layouts, scalable typography, fluid containers
Key Strength Pixel-perfect control Flexibility and accessibility
Key Weakness Poor scalability, accessibility issues Potential for complexity (e.g., em compounding)

2. The Absolute Standard: The World of Fixed Units

Absolute units provide a fixed, predictable standard of measurement. They are the bedrock of design systems where precision is non-negotiable, originating from the tangible worlds of print and early screen media. However, in the fluid context of modern digital interfaces, their "absolute" nature is more complex than it first appears.


2.1. Pixels (px): The Deceptive Dot

The pixel ($px$) is arguably the most ubiquitous and misunderstood unit in digital design. It is commonly thought of as a single, indivisible dot on a screen, and for a long time, this was a functional, if not entirely accurate, mental model.5 The reality, however, is a crucial abstraction that underpins the entirety of cross-device design.


The most critical concept to grasp is the distinction between a hardware pixel and a CSS pixel.


A hardware pixel

A hardware pixel (or physical pixel) is the smallest physical point of light on a display. The actual size of these pixels varies enormously from a standard desktop monitor to a high-resolution smartphone screen.

CSS pixel

A CSS pixel, in contrast, is a device-independent unit of measurement. The World Wide Web Consortium (W3C) defines it as a "reference pixel," an angular measurement that should appear roughly the same size to a user regardless of the viewing distance or the screen's density.9 For standardization, it is defined as 1/96th of a CSS inch.10


The bridge between these two concepts is the Device Pixel Ratio (DPR). The DPR is the ratio of hardware pixels to CSS pixels for a given display, calculated as DPR = Physical Pixels / CSS Pixels.12 A standard-resolution display has a DPR of 1, meaning one CSS pixel maps to one hardware pixel. A high-resolution "Retina" display might have a DPR of 2, meaning a single CSS pixel is rendered by a 2 X 2 grid of four hardware pixels.8 This higher ratio allows for the rendering of significantly sharper text and vector graphics.8

This abstraction layer is not a minor technical detail; it is the invisible foundation that prevents websites from appearing physically tiny on modern high-density screens. When a browser reports the width of the viewport, it does so in CSS pixels, not hardware pixels, creating a consistent canvas for developers.14 The CSS pixel is therefore not a physical absolute, but an absolute logical unit.

Despite this abstraction, the CSS pixel's fixed nature presents significant limitations. Its primary drawback is that it does not scale in response to a user's preferred font size settings in their browser, creating a major accessibility barrier for individuals with visual impairments.1 For this reason, using pixels for typography and primary layout spacing is strongly discouraged in modern web development.2

However, the pixel retains its value for elements that demand absolute precision and should not scale with font size. Its appropriate modern use cases include:


Defining the width of fine details like borders (e.g., border: 1px solid black;).1

Specifying precise offsets for properties like box-shadow.1

Sizing raster images or icons that have fixed dimensions and need to align perfectly with a pixel grid.2

2.2. Points (pt): A Legacy from Print to Screen

The point (pt) has its roots in traditional typography, where it is a physical unit of measurement standardized as 1/72 of an inch.4 This direct link to a physical dimension makes it the ideal unit for print stylesheets, where the output medium (e.g., a sheet of paper) has a fixed, known size and high resolution.19

On digital screens, however, the point's utility is far more ambiguous. Because screen resolutions and pixel densities (Dots Per Inch, or DPI) vary widely, a CSS pt does not reliably translate to a consistent physical size, making it an unsuitable choice for web design.19


The notable exception to this rule is its use within Apple's ecosystem. Apple's Human Interface Guidelines (HIG) have adopted the point as the standard unit for all layout and typographic specifications.22 In this context, the "point" is not a physical unit but an abstract one, conceptually identical to the CSS pixel. It provides a resolution-independent coordinate system that allows designers to create interfaces that scale consistently across Apple's range of devices, from iPhones to iPads and Macs.

For example, an iPhone 15 Pro Max has a physical resolution of 1290 X 2796 pixels, but its screen is described in design documentation as 430 X 932.23 This device has a scale factor of @3x, meaning each point is rendered by a 3 X 3 grid of nine physical pixels. This abstraction allows a designer to specify a 44pt tappable target that maintains a consistent physical size and usability across all devices, regardless of their underlying pixel density.24 The "point" in Apple's HIG is a platform-specific synonym for a device-independent pixel; it shares a name with its print ancestor but not its fundamental behavior in a digital context.

3. The Relative Revolution: Building Scalable and Accessible Systems

The limitations of absolute units in a multi-device world gave rise to relative units—a revolutionary approach where size is defined not by a fixed value but by its relationship to its context. This paradigm shift is the engine of modern responsive design, enabling interfaces to become fluid, adaptable, and, most importantly, accessible to all users.

3.1. The Font-Relative Duo: rem vs. em

Among the most powerful relative units are rem and em, both of which are tied to font size. While similar in name, their distinct reference points have profound implications for scalability and maintainability.

The em unit is re;atove to the font-size of its nearest parent element that has a defined font size. When used for properties other than font-size such as padding or margin, it is relative to the element's own computed font-size.4 This localized contextuality can be a powerful tool for creating self-contained, scalable components.

However, this parent-relative nature is also the source of em's most significant drawback: the compounding problem. When elements sized with em units are nested, their sizes can multiply in unexpected ways. For instance, if a parent <div> has a font-size of 1.2em and a child </div> within it also has a font-size of 1.2em, the child's effective font size becomes 1.44 times the grandparent's font size (1.2 X 1.2). This cascading effect can quickly become difficult to predict and manage in complex layouts, leading to inconsistent typography.16

The rem font-size of the root <html> element.2 Most browsers default to a root font size of 16px, making rem equivalent to 16px throughout an entire document, regardless of nesting or parent font sizes. This creates a single, predictable, and global source of truth for sizing, making rem the modern standard for building scalable and maintainable design systems.30

The most compelling reason to adopt a rem-based system is accessibility Many users with visual impairments configure their browsers to use a larger default font size. Because rem is tied directly to this root setting, an entire interface—including typography, padding, margins, and component dimensions—built with rem will scale up proportionally, preserving the layout's integrity and ensuring the content remains readable and usable.16 In contrast, layouts built with px ignore this crucial user preference entirely.17

While rem is the go-to for global consistency, em retains strategic value for local, component-level scaling. A common best practice is to define a component's padding in em units. This ensures that if a specific instance of that component requires a different font-size, its internal spacing will scale proportionally with its text, maintaining its design integrity without affecting the rest of the UI.18


Feature rem (Root EM) em (Parent EM)
Reference Point font-size of the <html> element font-size of the parent element (or self)
Behavior in Nesting Predictable and consistent Compounding and potentially unpredictable/th>
Primary Use Case Global typography, spacing, and component sizing for overall UI consistency Sizing within self-contained components where proportions should scale with local font size
Accessibility Excellent; directly respects user's root font size preference Good, but can be complex to manage in deep hierarchies
Maintainability High; change one root value to scale the entire UI Moderate; requires careful management of parent contexts

3.2. The Container-Relative Unit: The Versatile Percentage (%)

The percentage ($\%$) unit is a cornerstone of fluid web design, defining an element's size as a fraction of its parent container's dimensions.2 An element with width: 50% will occupy half the width of its immediate parent, allowing it to dynamically adapt as the parent element resizes.5

This parent-relative behavior is what distinguishes it from viewport units. While an element with width: 50vw will always be half the width of the browser window, an element with width: 50% is constrained by its local context.4 This makes percentages ideal for creating flexible internal layouts, such as multi-column structures within a content area, where elements need to maintain proportional relationships with each other rather than with the entire screen.

A notable quirk of the percentage unit is that when used for vertical padding or margin, its value is calculated based on the parent's width, not its height.38 This behavior, while counterintuitive, can be leveraged to create elements that maintain a consistent aspect ratio as they resize.

4. The Viewport Canvas: Mastering Fluid and Full-Screen Layouts

Viewport-relative units provide a direct and powerful connection to the dimensions of the browser window, or "viewport." This allows for the creation of large-scale, fluid layouts that would be difficult or impossible to achieve with other units, making them an indispensable tool for modern responsive design.


4.1. Viewport Width (vw) and Height (vh)

The viewport unit system is straightforward: 1vw is equal to 1% of the viewport's width, and 1vh is equal to 1% of the viewport's height.39 This provides a stable reference to the overall screen real estate, independent of any parent containers.

Their primary and most popular application is in creating full-screen elements. By setting height: 100vh, a developer can ensure a "hero" section or a web application's main container will always fill the exact height of the user's screen, creating an immersive experience.5

Viewport units are also used for creating fluid typography, where font sizes scale smoothly with the width of the browser window (e.g., font-size: 5vw.) This can create visually dynamic headings that are large on desktops and smaller on mobile devices. However, this technique must be used with caution, as it can lead to excessively large or illegibly small text on extreme screen sizes. To mitigate this, vw is often combined with CSS functions like clamp() to set minimum and maximum font sizes, providing both fluidity and control.42

Other, less common viewport units include vmin (1% of the viewport's smaller dimension, width or height) and vmax (1% of the larger dimension). These are useful for creating elements that need to scale proportionally while adapting to changes in screen orientation.37

4.2. The Mobile Viewport Problem and Its Modern Solution

Despite their utility, viewport units have long been plagued by a significant and frustrating issue on mobile devices. Mobile browsers feature dynamic user interface (UI) elements, such as address bars and tab bars, that appear and disappear as the user scrolls. The initial implementation of vh units was ambiguous in this context, and most mobile browsers chose to calculate 100vh as the height of the viewport without these toolbars visible.45

The result is that on initial page load, when the address bar is visible, an element styled with height: 100vh is actually taller than the visible portion of the screen. This causes a "jump" in the layout as the user scrolls and the toolbars retract, and it often pushes important content below the fold.47 For years, developers relied on complex JavaScript workarounds to solve this, calculating the window.innerHeight and applying it via a CSS custom property.48

This long-standing problem illustrates a common pattern in the evolution of web standards: an initial, ambiguous specification meets the complex reality of diverse devices, leading to inconsistent implementations and developer frustration. Eventually, the standards body addresses the ambiguity by creating more explicit and powerful tools.


In this case, the CSS Working Group has introduced a new set of viewport units to provide developers with the explicit control they need:45

  • 1vh (Large Viewport Height): Represents the viewport height when the dynamic UI elements are retracted. This behaves like the classic, problematic vh
  • svh (Small Viewport Height): Represents the viewport height when the dynamic UI elements are expanded. An element with height: 100svh will fit perfectly on the screen at initial load.
  • dvh (Dynamic Viewport Height): The value of this unit changes in real-time as the browser's UI expands and retracts. Using height: 100dvh ensures an element will always precisely match the visible area of the viewport.

These new units, now widely supported, represent the definitive solution to the mobile viewport problem, eliminating the need for JavaScript hacks and providing a more robust and performant way to build full-screen experiences on mobile devices.47

5. The Typographer's Toolkit: Precision Units for Readability and Rhythm

Beyond the general-purpose units for layout and spacing, CSS provides specialized units derived directly from the metrics of the font itself. These tools allow digital typographers and UX-focused developers to exert fine-grained control over the reading experience, ensuring optimal readability and establishing a consistent visual rhythm.


5.1. Character (ch) and X-Height (ex)

ch unit is defined as the width of the "0" (zero) glyph in the current font and font size.38 While this means it corresponds to the width of any character in a monospace font, in a proportional font it serves as a reliable and consistent approximation of an average character width.50

Its primary and most powerful use case is to control the line length (or "measure") of text for enhanced readability. Typographic research has consistently shown that for comfortable reading of long-form text, lines should contain between 45 and 75 characters.51 Lines that are too long cause eye strain as the reader struggles to track from the end of one line to the beginning of the next; lines that are too short disrupt the reading rhythm. The ch unit provides the perfect semantic tool to enforce this principle. By applying max-width: 65ch to a paragraph or text container, a developer can ensure an optimal reading experience that adapts to changes in both font size and viewport width.38

The exunit is a more specialized typographic unit, representing the x-height of the current font—that is, the height of its lowercase letters like 'x', 'a', and 'c'.38 Its value is often approximated by browsers as 0.5em but can be derived from the font file itself.54 Because it is tied to the height of the main body of lowercase letters, the ex unit is particularly useful for achieving precise vertical alignment within a line of text. While rarely used for general layout, it is the ideal tool for positioning superscript and subscript elements or for vertically aligning an inline icon with the optical center of adjacent text.38

6. Bridging Worlds: Platform-Specific Abstractions and Blurred Lines

One of the most significant sources of confusion for designers and developers working across multiple platforms is the proliferation of units that seem similar but have different names, such as the CSS px Apple's pt amd Android's dp Understanding these units reveals a fascinating case of convergent evolution in user interface engineering, where different ecosystems independently arrived at the same fundamental solution to a shared problem: the chaos of variable screen densities.

The common goal of all these units is to abstract away the physical hardware pixels and provide a stable, resolution-independent coordinate system. This allows designers to create a single layout that appears at a consistent physical size across a wide range of devices with different pixel densities.

In the world of Android development, this abstraction is the density-independent pixel ( dp or dip) The Android platform is notoriously fragmented, with thousands of devices featuring a vast array of screen sizes and resolutions. To manage this, Android establishes a baseline density of 160 dots per inch (dpi), where 1dp is equal to 1 physical pixel.56 On a high-density screen (e.g., 320 dpi), the operating system automatically scales this unit, so 1dp is rendered using 2 physical pixels.58 By defining all layout dimensions in dp developers can ensure that a button specified as 48dp tall will be a comfortable touch target on any Android device, from a low-end phone to a high-end tablet.59

For typography, Android provides a parallel unit: the scale-independent pixel ( sp). The sp unit behaves identically to the dp unit but has one crucial addition: it also scales according to the user's system-wide preference for font size.57 This makes sp the mandatory choice for all text elements to ensure accessibility.58

Ultimately, the CSS px, Apple's pt and Android's dp are philosophical equivalents. They are all logical units designed to free designers and developers from worrying about the physical characteristics of a device's screen. Recognizing this shared purpose is essential for teams aiming to build cohesive user experiences across native and web platforms.

7. Units in Practice: A Comparative Analysis of Major Design Systems

The theoretical advantages and disadvantages of each unit are best understood by examining how they are implemented in major, real-world design systems. The choices made by these influential systems reveal a set of underlying philosophies tailored to their specific goals, whether that be managing platform fragmentation, ensuring web accessibility, or enforcing enterprise-level consistency.


Design System Core Philosophy Primary Unit(s) Rationale
Google Material Design Consistency across a fragmented device ecosystem. dp, sp dp provides a density-independent unit for layout, while sp allows typography to scale with user accessibility settings.
Apple HIG Seamless integration within a controlled hardware/software ecosystem. pt A single, abstract unit simplifies design and development, with the OS handling resolution scaling automatically.
Bootstrap & Tailwind CSS Web-first responsiveness, accessibility, and scalability. rem, % rem as the primary unit ensures the entire UI scales with the user's root font size, maximizing accessibility and maintainability.
IBM Carbon> Enterprise-level consistency and governance through abstraction. rem (via tokens) Spacing and type tokens are defined inrem, enforcing a consistent, scalable system across complex products and large teams.

8. A Multi-Disciplinary Perspective: How Professionals Choose Their Units

The choice of a measurement unit is not a purely technical decision; it is deeply influenced by the priorities and goals of different roles within a product team. Understanding these diverse perspectives is key to developing a holistic and effective measurement strategy.

UX Desingers

The UX Designer:

The primary concerns for a UX designer are accessibility, readability, and usability. They advocate for an experience that is inclusive and comfortable for all users.

Go-To Units

They champion the use of rem for all scalable elements, including font sizes, margins, and padding, because it directly respects a user's custom browser font size settings.17 They also value the ch unit as the most effective tool for constraining line lengths to improve the readability of long-form content, thereby reducing cognitive load.76


UI Desingers

The UI Designer:

The UI designer is focused on visual precision, brand consistency, and aesthetic harmony. Their goal is to translate static design mockups into a "pixel-perfect" final product that looks consistent across all target platforms.

Go-To Units

They often think and design in px because it provides a direct 1:1 mapping to their design tools like Figma or Sketch.77 For non-scaling elements like fine borders or exact shadow offsets, px offers the necessary crispness and control. When designing for native platforms, they will use the system's standard abstract unit—pt for iOS and dp for Android—to ensure visual consistency within that ecosystem.23


Front-End Developers

The Front-End Developer:

The developer's main priorities are scalability, maintainability, and responsiveness. They are responsible for building a robust and efficient codebase that adapts gracefully to any device and can be easily updated over time.

Go-To Units

They establish rem as the default unit for the entire system, translating the UI designer's pixel-based mockups into a scalable implementation.2 They use % for creating fluid layouts within containers and leverage vw and dvh for viewport-level structuring. They use px sparingly, treating it as a specialized tool for elements that must explicitly resist scaling.


Digital Typographers

The Digital Typographer:

The typographer is concerned with typographic hierarchy, rhythm, and legibility. Their craft lies in creating a harmonious and effortless reading experience through the careful manipulation of type.

Go-To Units

They employ a sophisticated combination of units. rem is used to set the base font size and establish a modular typographic scale. em is used for local adjustments where spacing should be relative to an element's own font size (e.g., the top margin of a heading). The ch unit is essential for setting the measure of text blocks. Finally, they prefer a unitless value for line-height (e.g., line-height: 1,5;) to ensure that vertical spacing always scales proportionally with the font-size of the text itself.38


Professional Role Primary Goal Go-To Units Rationale / Example
UX Designer> Accessibility & Readability rem, ch Ensure the UI scales with user font settings (rem): control line length for comfortable reading (max-width: 65ch).
UI Designer Visual Precision & Consistency px, pt, dp Match design mockups exactly (px) maintain consistency across native platforms (pt for iOS, dp for Android).
Front-End Developer Scalability & Maintainability rem, %, vw / dvh Build a globally scalable system (rem): create fluid internal layouts (%) ; manage full-screen elements (dvh).
Digital Typographer Rhythm & Legibility rem, em, ch, unitless line-height Establish a modular scale (rem) ; create locally proportional spacing (em) ; ensure optimal line length (ch).

9. Conclusion: A Unified Strategy for Measurement

The landscape of design and development units is complex, but it is not arbitrary. Each unit represents a specific philosophy and is a tool designed for a particular job. The mastery of these units lies not in dogmatically adhering to one over all others, but in developing a strategic, context-aware approach that balances the competing needs of precision, flexibility, consistency, and user empowerment. A mature and robust design system employs a hybrid strategy, leveraging the unique strengths of each unit to build resilient and user-centric interfaces.


Based on this comprehensive analysis, a unified strategy for modern design systems should be guided by the following principles:

  1. Establish a rem-based Foundation. The rem unit should be the default for the vast majority of measurements, including font-size, margin, padding, and component dimensions. This establishes a baseline of accessibility and global scalability, allowing the entire user interface to adapt to user preferences and making system-wide size adjustments trivial. The root font-size on the <html> element should not be set in px as this would override user settings; if it must be altered, a percentage value should be used.
  2. Use px for Deliberate Precision. The px unit should be reserved for elements where fixed, crisp sizing is a conscious design decision and scaling is undesirable. This is appropriate for border-width, box-shadow offsets, and the dimensions of small, pixel-critical icons. Treat px as a specialist's tool, not a general-purpose hammer.
  3. Leverage Viewport Units for Global Layout. For layout concerns that relate directly to the browser window, viewport units are the correct tool. Use vw for fluid typography (with clamp()) and dvh (Dynamic Viewport Height) to create reliable full-screen sections on mobile devices, avoiding the pitfalls of the classic vh unit.
  4. employ% for Fluidity Within Containers. When building internal layouts, such as grid columns or flexible components, the % unit is ideal. It allows elements to scale in proportion to their immediate parent, creating self-contained, responsive structures.
  5. Refine Typography with Specialized Units. To elevate the quality of the reading experience, use the typographer's toolkit. Enforce optimal line length with ch (max-width: 65ch). Use em for component-internal spacing that should scale with the component's local font size. Always use unitless values for line-height to ensure vertical spacing remains proportional.

By adopting this multi-unit strategy, teams can create design systems that are both beautiful and robust, precise and adaptable. They can honor the UI designer's need for visual perfection while respecting the UX designer's mandate for accessibility, ultimately delivering products that serve the brand and the user with equal success.

Works Cited

  1. The Difference Between Absolute & Relative CSS Units - Elegant Themes, accessed October 23, 2025, https://www.elegantthemes.com/blog/design/the-difference-between-absolute-relative-css-units >>
  2. CSS Units – When to Use rem, em, px, and More - freeCodeCamp, accessed October 23, 2025, https://www.freecodecamp.org/news/css-units-when-to-use-each-one/ >>
  3. CSS Units - GeeksforGeeks, accessed October 23, 2025, https://www.geeksforgeeks.org/css/css-units/ >>
  4. CSS units - %, em, rem, px, vh, vw - GeeksforGeeks, accessed October 23, 2025, https://www.geeksforgeeks.org/css/css-units-em-rem-px-vh-vw/ >>
  5. CSS units rem, em, px, vh, vw, percentage - Saeloun Blog, accessed October 23, 2025, https://blog.saeloun.com/2024/07/22/css-units/ >>
  6. CSS Units (With Examples) - Programiz, accessed October 23, 2025, https://www.programiz.com/css/units >>
  7. Device pixel - Glossary | MDN, accessed October 23, 2025, https://developer.mozilla.org/en-US/docs/Glossary/Device_pixel >>
  8. A pixel is not a pixel: designing for a new generation of mobile devices - Juicebox Interactive, accessed October 23, 2025, https://juiceboxinteractive.com/blog/a-pixel-is-not-a-pixel-designing-for-a-new-generation-of-mobile-devices/ >>
  9. Can someone clearly explain screen resolution vs css pixels vs pixels vs retina display vs other high resolution displays? How is this stuff freakin normalized? - Reddit, accessed October 23, 2025, https://www.reddit.com/r/web_design/comments/24c1hj/can_someone_clearly_explain_screen_resolution_vs/ >>
  10. CSS Unit Guide: CSS em, rem, vh, vw, and more, Explained - freeCodeCamp, accessed October 23, 2025, https://www.freecodecamp.org/news/css-unit-guide/ >>
  11. What is a pixel (px) in CSS (in times of retina displays)? - Stack Overflow, accessed October 23, 2025, https://stackoverflow.com/questions/54044563/what-is-a-pixel-px-in-css-in-times-of-retina-displays >>
  12. What is Device Pixel Ratio | Cloudinary Glossary, accessed October 23, 2025, https://cloudinary.com/glossary/device-pixel-ratio >>
  13. What is device pixel ratio? | ImageKit.io, accessed October 23, 2025, https://imagekit.io/glossary/what-is-device-pixel-ratio/ >>
  14. Hardware Pixel and CSS Pixel. Definitely, high-density displays… | by GID Master - Medium, accessed October 23, 2025, https://gidmaster.medium.com/hardware-pixel-and-css-pixel-617c8934d828 >>
  15. Physical Pixels vs CSS Pixels vs Device Independent Pixels vs Density Independent Pixels vs PPI - Stack Overflow, accessed October 23, 2025, https://stackoverflow.com/questions/41863545/physical-pixels-vs-css-pixels-vs-device-independent-pixels-vs-density-independen >>
  16. How to Use Rem Units in CSS for Accessible Design - The A11Y ..., accessed October 23, 2025, https://www.a11y-collective.com/blog/what-is-rem-in-css/ >>
  17. Font Sizing For Web Accessibility Using CSS EM And REM Units - Advancedbytez, accessed October 23, 2025, https://advancedbytez.com/font-sizing-for-web-accessibility-using-css-em-and-rem-units/ >>
  18. When to use Rem, Em, VW/VH, %, PX? : r/Frontend - Reddit, accessed October 23, 2025, https://www.reddit.com/r/Frontend/comments/sn2yns/when_to_use_rem_em_vwvh_px/ >>
  19. CSS: em, px, pt, cm, in… - W3C, accessed October 23, 2025, https://www.w3.org/Style/Examples/007/units.en.html >>
  20. CSS font size: relative vs. absolute values. Which to use? [closed] - Stack Overflow, accessed October 23, 2025, https://stackoverflow.com/questions/520939/css-font-size-relative-vs-absolute-values-which-to-use >>
  21. The Differences Between CSS Units in Web Design - Stackable, accessed October 23, 2025, https://wpstackable.com/blog/the-differences-between-css-units-in-web-design/ >>
  22. Typography | Apple Developer Documentation, accessed October 23, 2025, https://developer.apple.com/design/human-interface-guidelines/typography >>
  23. Layout | Apple Developer Documentation, accessed October 23, 2025, https://developer.apple.com/design/human-interface-guidelines/layout >>
  24. Images | Apple Developer Documentation, accessed October 23, 2025, https://developer.apple.com/design/human-interface-guidelines/images >>
  25. What are Absolute and Relative Units in CSS? Explained with Examples - freeCodeCamp, accessed October 23, 2025, https://www.freecodecamp.org/news/absolute-and-relative-css-units/ >>
  26. px, em, rem and percentage in Responsive Design - DEV Community, accessed October 23, 2025, https://dev.to/anderutan/px-em-rem-and-percentage-in-responsive-design-3fbn >>
  27. Is 'em' better than 'rem' in responsive web design? - HTML & CSS - SitePoint Forums, accessed October 23, 2025, https://www.sitepoint.com/community/t/is-em-better-than-rem-in-responsive-web-design/354309 >>
  28. CSS values and units https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units >>
  29. font-size - CSS - MDN Web Docs, accessed October 23, 2025, https://developer.mozilla.org/en-US/docs/Web/CSS/font-size >>
  30. REM vs. EM: How To Choose the Right CSS Unit - DreamHost, accessed October 23, 2025, https://www.dreamhost.com/blog/rem-vs-em/ >>
  31. How does rem differ from em in CSS? - Stack Overflow, accessed October 23, 2025, https://stackoverflow.com/questions/13941275/how-does-rem-differ-from-em-in-css >>
  32. Confused about REM unit - need help to understand the basic principle. : r/Frontend - Reddit, accessed October 23, 2025, https://www.reddit.com/r/Frontend/comments/k5vvij/confused_about_rem_unit_need_help_to_understand/ >>
  33. The Surprising Truth About Pixels and Accessibility: should I use pixels or rems?, accessed October 23, 2025, https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/ >>
  34. Do you really get the benefit of using the "rem" unit? : r/Frontend - Reddit, accessed October 23, 2025, https://www.reddit.com/r/Frontend/comments/1l63w3e/do_you_really_get_the_benefit_of_using_the_rem/ >>
  35. rem vs. em: The differences between CSS units - Site24x7, accessed October 23, 2025, https://www.site24x7.com/learn/rem-vs-em.html >>
  36. Units of measurement | Elementor, accessed October 23, 2025, https://elementor.com/help/whats-the-difference-between-px-em-rem-vw-and-vh/ >>
  37. CSS Viewport Units: vh, vw, vmin, and vmax — SitePoint, accessed October 23, 2025, https://www.sitepoint.com/css-viewport-units-quick-start/ >>
  38. Sizing Units - web.dev, accessed October 23, 2025, https://web.dev/learn/css/sizing >>
  39. Explain the concept of the 'vh' and 'vw' units in CSS - GeeksforGeeks, accessed October 23, 2025, https://www.geeksforgeeks.org/css/explain-the-concept-of-the-vh-and-vw-units-in-css/ >>
  40. All 24 CSS Viewport Units Explained - Web Dev Simplified Blog, accessed October 23, 2025, https://blog.webdevsimplified.com/2022-08/css-viewport-units/ >>
  41. Fun with Viewport Units - CSS-Tricks, accessed October 23, 2025, https://css-tricks.com/fun-viewport-units/ >>
  42. CSS Viewport Units, accessed October 23, 2025, https://css-tricks.com/css-viewport-units/ >>
  43. Viewport Units Pitfalls: When VW and VH Cause Trouble - PixelFreeStudio Blog, accessed October 23, 2025, https://blog.pixelfreestudio.com/viewport-units-pitfalls-when-vw-and-vh-cause-trouble/ >>
  44. The difference between CSS units (px, pt, rem, em, vh, vw, ch, ex and the rest) - Medium, accessed October 23, 2025, https://medium.com/level-up-web/the-difference-between-css-units-px-pt-rem-em-vh-vw-ch-ex-and-the-rest-b2cfdf069230 >>
  45. The large, small, and dynamic viewport units | Blog | web.dev, accessed October 23, 2025, https://web.dev/blog/viewport-units >>
  46. CSS3 100vh not constant in mobile browser - Stack Overflow, accessed October 23, 2025, https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser >>
  47. Finally a fix for 100vh on mobile devices - Frontend.fyi, accessed October 23, 2025, https://www.frontend.fyi/tutorials/finally-a-fix-for-100vh-on-mobile >>
  48. The trick to viewport units on mobile - CSS-Tricks, accessed October 23, 2025, https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ >>
  49. Fix mobile viewport 100vh bug in one line of CSS: Dynamic viewport units in action | by Oleksandr Shevchuk | Medium, accessed October 23, 2025, https://medium.com/@alekswebnet/fix-mobile-100vh-bug-in-one-line-of-css-dynamic-viewport-units-in-action-102231e2ed56 >>
  50. What is the CSS 'ch' Unit?. I keep seeing authors and speakers… | by Eric A. Meyer, accessed October 23, 2025, https://medium.com/@meyerweb/what-is-the-css-ch-unit-20b999426ac0 >>
  51. CSS talk: you should really know about the ch unit - Mike Bifulco, accessed October 23, 2025, https://mikebifulco.com/posts/all-about-ch >>
  52. Optimal Line Length for Readability - UXPin, accessed October 23, 2025, https://www.uxpin.com/studio/blog/optimal-line-length-for-readability/ >>
  53. How to Choose the Best CSS Unit to Create Better Site Layouts - WP Engine, accessed October 23, 2025, https://wpengine.com/resources/choose-css-unit-create-better-site-layouts-how-to/ >>
  54. What is the value of the css 'ex' unit? - Stack Overflow, accessed October 23, 2025, https://stackoverflow.com/questions/918612/what-is-the-value-of-the-css-ex-unit >>
  55. Going beyond pixels and (r)ems in CSS - Relative length units based on font - iO tech_hub, accessed October 23, 2025, https://techhub.iodigital.com/articles/going-beyond-pixels-and-rems-in-css/relative-length-units-based-on-font >>
  56. Support different pixel densities - developer.android.com, accessed October 23, 2025, https://developer.android.com/training/multiscreen/screendensities#:~:text=One%20dp%20is%20a%20virtual,pixels%20for%20each%20other%20density >>
  57. What is the difference between “px”, “dip”, “dp” and “sp”? | by Steven Hough - Medium, accessed October 23, 2025, https://medium.com/analytics-vidhya/what-is-the-difference-between-px-dip-dp-and-sp-e4351fefa685 >>
  58. What is the difference between px, dip, dp, and sp? - Codemia, accessed October 23, 2025, https://codemia.io/knowledge-hub/path/what-is-the-difference-between-px-dip-dp-and-sp >>
  59. Support different pixel densities | Compatibility | Android Developers, accessed October 23, 2025, https://developer.android.com/training/multiscreen/screendensities >>
  60. Grids and units | Mobile - Android Developers, accessed October 23, 2025, https://developer.android.com/design/ui/mobile/guides/layout-and-content/grids-and-units >>
  61. Pixel density - Material Design 2, accessed October 23, 2025, https://m2.material.io/design/layout/pixel-density.html >>
  62. Units & measurements - Layout - Material Design, accessed October 23, 2025, https://m1.material.io/layout/units-measurements.html >>
  63. Understanding layout - Material Design 2, accessed October 23, 2025, https://m2.material.io/design/layout/understanding-layout.html >>
  64. Rem vs Px: When and How to Use Each Unit in Modern CSS - OpenReplay Blog, accessed October 23, 2025, https://blog.openreplay.com/rem-vs-px-use-css/ >>
  65. Reboot · Bootstrap v5.0, accessed October 23, 2025, https://getbootstrap.com/docs/5.0/content/reboot/ >>
  66. Spacing · Bootstrap v5.0, accessed October 23, 2025, https://getbootstrap.com/docs/5.0/utilities/spacing/ >>
  67. Reboot - Bootstrap, accessed October 23, 2025, https://getbootstrap.com/docs/4.4/content/reboot/ >>
  68. Tailwind CSS Spacing - Free Examples & Tutorial - TW Elements, accessed October 23, 2025, https://tw-elements.com/docs/standard/extended/spacing/ >>
  69. Tailwind REM Converter, accessed October 23, 2025, https://tailwindremconverter.netlify.app/ >>
  70. Responsive design - Core concepts - Tailwind CSS, accessed October 23, 2025, https://tailwindcss.com/docs/responsive-design >>
  71. Cards - Carbon Design System, accessed October 23, 2025, https://carbon-website-git-fork-theiliad-add-horizontal-bar-charts.carbon-design-system.vercel.app/experimental/cards/style >>
  72. Typography - Carbon Design System, accessed October 23, 2025, https://carbondesignsystem.com/elements/typography/type-sets/ >>
  73. Spacing - Carbon Design System, accessed October 23, 2025, https://carbondesignsystem.com/elements/spacing/overview/ >>
  74. 2. Building pages - Carbon Design System, accessed October 23, 2025, https://carbondesignsystem.com/developing/react-tutorial/step-2/ >>
  75. The Impact of CSS and HTML Best Practices on UX: Enhancing User Experience Through Efficient Web Design - Page One Formula, accessed October 23, 2025, https://pageoneformula.com/the-impact-of-css-and-html-best-practices-on-ux/ >>
  76. Writing CSS with Accessibility in Mind | by Manuel Matuzovic - Medium, accessed October 23, 2025, https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939 >>
  77. CSS Units: Guide to px, em, rem & More - devChallenges, accessed October 23, 2025, https://devchallenges.io/learn/2-responsive-web/css-units >>
  78. What is px, dp, dpi in Android ? -Decoding for Designers | by Agilan KS | Bootcamp | Medium, accessed October 23, 2025, https://medium.com/design-bootcamp/what-is-px-dp-dpi-in-android-decoding-for-designers-8007e7aec4a9 >>
  79. Mastering Responsive Design: Best Practices for Size Units in CSS | by jjcx | Medium, accessed October 23, 2025, https://medium.com/@jjcx/mastering-responsive-design-best-practices-for-size-units-in-css-973f532ebbdf >>


Notes

Author’s Background >>

Recommendations

These are recommendations for writings outside of this blog and website.

The Personalized Education Investment Prospectus: A Quantitative Framework for Determining College Worth

A framework to help you determine if college is your path considering factors such as finances, emotional state and other factors

Explore Framework >>

Let's Break Our Brains!!!

Questions to question your existence…

Question your reality >>

Ads as security threats and safest browsers for vulnerable users

The USA government has classified (some) online advertising methods as a cybersecurity threat - Here, you'll see some tips and recommendations on what to do next to protect yourself.

See more on cybersecurity >>