JSTAcademy
0 XP
Dashboard
Crash Courses
Typography, Transitions & Production CSS
12 min
PhD+200 XP
Crash Courses · PhD

Typography, Transitions & Production CSS

Apply web fonts, transitions, and professional CSS patterns used in production.
12 min read+200 XP on completionCert: HTML & CSS Crash Course
Tap any word in the text below to start reading from there.

Typography, Transitions & Production CSS

Production CSS patterns that separate polished interfaces from rough ones.

Web Fonts

:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

Transitions — Apply to Base State

/* BASE STATE — transition goes in both directions */
.button {
  background: var(--color-primary);
  transition: background 200ms ease, transform 150ms ease;
}

.button:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
}

If you put transition only on :hover, the return animation is instant.

Transform (GPU Layer)

transform: translateX(100px);
transform: translate(-50%, -50%);  /* center absolute element */
transform: scale(1.05);
transform: rotate(45deg);

Transforms are GPU-composited — fastest properties to animate. They do not affect layout.

Position

/* Fixed header */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; }

/* Tooltip below parent */
.parent { position: relative; }
.tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

/* Sticky sidebar */
.sidebar { position: sticky; top: 80px; }

Centering Absolute Elements

.parent { position: relative; }
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Most reliable way to center when you don't know the element's dimensions.

CSS Reset Foundation

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img { max-width: 100%; height: auto; }
:root { font-size: 16px; }
0%