@ou-imdt/css/docs/OLDextra/units.md

The IMDT CSS library styles native elements with light, extendable CSS. It is developed for Interactive Media Developers at the Open University.

# CSS Units

There are different types of CSS units, each with their own caveats and use-cases. This document will detail information and resources on CSS units and recommended approaches. 

## Unit usage recommendations

| Property      | Often  | Sometimes   | Rarely |
| ----------- | ----------- | ----------- | ----------- |
| border, margin, padding | px  | rem | - |
| border-radius | px, % | - | - |
| font-size  | rem | em | px |
| width, height | % | - | px |

> This table does not take into account using 'fr' in grid or flex. It also does not detail the usage of vw or vh units.

W3C recommend the following in general.

|             | Recommended | Occasional  | Not recommended |
| ----------- | ----------- | ----------- | --------------- |
| **Screen**  | em, px, %   | ex          | pt, cm, mm, in, pc |
| **Print**   | em, cm, mm, in, pt, pc, % | px, ex | - |

(_Sourced from [W3.org EM, PX, PT, CM, IN…](https://www.w3.org/Style/Examples/007/units.en.html)_)

## The Pixel Problem

It's commonly assumed pixel units are equal to a single dot on the screen. However, modern displays are no longer made up of a R/G/B rectangles.

<div style="display: grid; grid-template-columns: 1fr 1fr">
    <figure>
        <img src="./pixel-closeup-apple-watch.jpg" alt="close up of apple watch screen" />
        <figcaption>Close up of apple watch screen</figcaption>
    </figure>
    <figure>
        <img src="./pixel-closeup-iphone.jpg" alt="Close up of iphone screen." />
        <figcaption>Close up of iphone screen.</figcaption>
    </figure>
</div>

(_Sourced from [Surprising truth about pixels](https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/)_)

Even without the changes in modern displays there was a difference between a 'physical pixel in a screen' and a 'software pixel'; when a users zooms in they are re-writing how the software pixel maps to the physical pixel.


## Absolute Units

| Unit | Name                | Equivalent                |
| ---- | ------------------- | ------------------------- |
| cm   | Centimeters         | 1cm = 37.8px = 25.2/64in  |
| mm   | Millimeters         | 1mm = 1/10th of 1cm       |
| Q    | Quarter-millimeters | 1Q = 1/40th of 1cm        |
| in   | Inches              | 1in = 2.54cm = 96px       |
| pc   | Picas               | 1pc = 1/6th of 1in        |
| pt   | Points              | 1pt = 1/72nd of 1in       |
| px   | Pixels              | 1px = 1/96th of 1in       |

(_Sourced from: [MDN values and units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)_)

## Relative Units

| Unit | Equivalent                                      |
| ---- | ----------------------------------------------- |
| em   | Font size of the parent, in the case of typographical properties like font-size, and font size of the element itself, in the case of other properties like width. |
| ex   | x-height of the element's font. |
| ch   | The advance measure (width) of the glyph "0" of the element's font. |
| rem  | Font size of the root element. |
| lh   | Line height of the element. |
| rlh  | Line height of the root element. When used on the font-size or line-height properties of the root element, it refers to the properties' initial value. |
| vw   | 1% of the viewport's width. |
| vh   | 1% of the viewport's height. |
| vmin | 1% of the viewport's smaller dimension. |
| vmax | 1% of the viewport's larger dimension. |
| vb   | 1% of the size of the initial containing block in the direction of the root element's block axis. |
| vi   | 1% of the size of the initial containing block in the direction of the root element's inline axis. |
| svw, svh | 1% of the small viewport's width and height, respectively. |
| lvw, lvh | 1% of the large viewport's width and height, respectively. |
| dvw, dvh | 1% of the dynamic viewport's width and height, respectively. |

(_Sourced from: [MDN values and units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)_)



## Approaches

### Font size

Font size should be set using rem (can compound if nested and cause confusion. 'em' can be useful when having elements scale to immediate parent font size though, for example setting an icon to 1em will size it to 1 unit of font size for the parent element).

It used to be common practice to set the global font size on html (html is the root element) using px (e.g. 16px) and then all  sizes inside that element using rem (that way if 1rem = 16px then 2rem = 2*16px).

With changes to accessibility standards it's better not to set font size using px at all. Doing so can prevent dynamically scaling text ('WCAG 1.4.4 Resize Text' requires text be resizable to 200%). Not setting font size will make browsers defer to system font size (2rem = 2*system font size) which is better for consistency and accessibility.


```css

html {
    font-size: 1rem; /* it's less confusing to set this at the root, but you could just not set it at all. This could be px (the VLE still uses px) */
}


h1 {
    font-size: 2rem; /* rem referenced the root element html */
}

.large-text {
    font-size: 1.3rem;
}

.small-text {
    font-size: 0.8rem;
}

.icon {
    font-size: 1em; /* This will set the icon to the font-size of it's immediate parent */
}

```



### Inline elements

Inline elements like checkboxes can have their size set using 'em' so that the checkbox side will match the fontside of the parent element.

```css

:where(h1, h2, h3, h4, h5, h6, span, label) > input[type="checkbox"] {
    aspect-ratio: 1;
    width: 1em; /* This will be the size of the parent element text -size */
}

```

### Should it scale? (margin, padding, borders)

This is the question that should be asked before deciding what type of unit should be used. 

For example, margin on a div should probably not scale with screen size or text so should probably be an absolute unit like px otherwise it could be disruptive to layout reflow.


```css
html {
    font-size: 1rem;
}

h1 {
    font-size: 2rem;
}

.large-text {
    font-size: 1.3rem;
}


:where(h1, h2, h3, h4, h5, h6, span, label) > input[type="checkbox"] {
    aspect-ratio: 1;
    width: 1em; /* This will be the size of the parent element text -size */
}

div.card {
    padding: 10px;
    margin: 10px;
    font-size: 1.1rem;
    border: 1px solid grey;
}

```

# Further reading

- [MDN values and units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)
- [W3.org EM, PX, PT, CM, IN…](https://www.w3.org/Style/Examples/007/units.en.html)
- [Surprising truth about pixels](https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/)