Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

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