Global Preset Styles for Each and Every Web App/Page/Site

global-preset.css

* {
  /* de-pixelates light text on dark backgrounds */
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: subpixel-antialiased;

  text-rendering: geometricPrecision;
  /* optimizeSpeed turns kerning & ligatures off, optimizeLegibility turns them on */
  /* geometricPrecision prevents browsers from rounding partial font sizes */
}

*,
*::before,
*::after {
  box-sizing: border-box; /* a more intuitive box model, padding pushes in and doesn't add to width or height */
}

html {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  -webkit-text-size-adjust: 100%; /* stops iOS Safari from normalizing small fonts */
}

body {
  margin: 0; /* full bleed!!! */
}

/* if you want a sub-element of the body to scroll with similar inertia on all touchscreens */
.scroll-smooth {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}