Font Size Cheat Sheet

A font size cheat sheet can be handy for web development and design. Here are some common font size units and their equivalent values in pixels:

Absolute Units

  • Pixels (px):
    • 1px = 1 pixel on the screen
  • Points (pt):
    • 1pt = 1/72 inch on the screen
  • Inches (in):
    • 1in = 2.54cm = 96px (standard screen resolution)
  • Millimeters (mm):
    • 1mm = 1/25.4 inch ≈ 3.78px

Relative Units

  • Em (em):
    • Relative to the font-size of the nearest parent element.
    • 1em = current font size of the element
  • Rem (rem):
    • Relative to the font-size of the root element (usually <html>).
    • 1rem = root font size
  • Percentage (%):
    • Relative to the font-size of the parent element.
    • 100% = current font size of the element

Viewport Units

  • Viewport Width (vw):
    • 1vw = 1% of the viewport width
  • Viewport Height (vh):
    • 1vh = 1% of the viewport height
  • Viewport Minimum (vmin):
    • 1vmin = 1% of the smaller of the viewport’s width or height
  • Viewport Maximum (vmax):
    • 1vmax = 1% of the larger of the viewport’s width or height

Common Font Size Recommendations

  • Body Text (Paragraphs):
    • 16px – 18px
  • Headings (h1, h2, etc.):
    • 24px – 32px (can vary based on design)
  • Navigation (nav):
    • 14px – 18px
  • Buttons:
    • 14px – 16px
  • Form Inputs:
    • 16px – 18px

Mobile and Responsive Font Sizes

Media Queries:

  • Adjust font sizes based on device width using CSS media queries.
/* Example Media Query for Mobile */
@media screen and (max-width: 480px) {
    body {
        font-size: 14px;
    }
}

Remember, the appropriate font size depends on the design, readability, and user experience considerations. It’s often beneficial to use a combination of absolute and relative units for flexibility and responsiveness. Always test your font sizes on various devices to ensure a good user experience.