Skip to main content
U.S. flag

An official website of the United States government

Dot gov

Official websites use .gov
A .gov website belongs to an official government organization in the United States.

Https

Secure .gov websites use HTTPS
A lock ( ) or https:// means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.

Units

Measurements

  • Use rem units for font sizes with a px fallback. This can be done with the following mixin:

    @mixin font-size($sizeValue: 1.6) {
      font-size: ($sizeValue * 10) + px;
      font-size: $sizeValue + rem;
    }
    
  • Set the HTML font size to 10px to ensure that 0.1rem equals 1px.

    html {
      font-size: 10px;
    }
    
  • Use em units for positioning.
  • Use percentages when layout components stay relational to each other (e.g. a main content area that takes up 75% of the screen and a sidebar that takes up 25%).

    // Good
    .panel-a {
      width: 25%;
    }
    
    .panel-b {
      width: 75%;
    }
    
  • Use px units for when a measurement shouldn’t change based on user set font size or browser zooming or for when requiring pixel values below 5.

    // Bad
    selector {
      border-width: 55px;
    }
    
    // Good
    selector {
      border-width: 2px;
    }
    
  • Use unitless values for line-height as this will inherit values from the font-size.
  • Use up to 10 decimal places in em units to ensure accuracy.

    // Good
    .body_copy {
      @include rem-font-size(1.4);
      // Line height will now be 1.8 of 1.4rem, or 2.5rem.
      line-height: 1.8;
    }
    
    // Good
    .container {
      height: 12em;
      margin-left: 10.6666666667em;
      width: 82.5%;
    }
    
  • Do not use a unit with 0.

    // Bad
    width: 0px;
    
    // Good
    width: 0;
    
  • Always use a unit for dimensions, margins, borders, padding, and typography.

    // Bad
    border-width: 12;
    
    // Good
    border-width: 12px;
    

Colors

  • Use hex notation first, or then rgb(a), or hsl(a).
  • Both three-digit and six-digit hexadecimal notation are acceptable.
  • When denoting color using hexadecimal notation, use all lowercase letters.
  • When using HSL or RGB notation, always add a single space after a comma and no space between parentheses and content.
// Bad
color: #FFF;
color: rgb( 255, 0, 0 );

// Good
$light: #fff;
color: $light;

// Good
$primary: #fe9848;
color: $primary;

// Good
$secondary: rgba(255, 100, 255, 0.5);
color: $secondary;
  • If you use an rgba rule, include a fallback value in hexadecimal.

    // Good
    .illustration {
      background-color: #eee; // fallback
      background-color: rgba(221, 221, 221, 0.75);
    }
    
Looking for U.S. government information and services?

Visit USA.gov