Web Style Guide

Relative Units

Use relative units whenever possible.

• font-size: 100% listens to the browser’s font size settings instead of overwriting it. By default in most browsers, this would place 1em at 16px.
• Changing the value of the font-size of the html will also affect every em and rem element. This can be useful for implementing responsive web design.
• User preference is important, so do not stray too far from font-size: 100% and 1em.
• Use rem and em for font-size.
• Use rem, em, or % for element positioning (margin, padding, etc).
• Use em for media query dimensions.
• For large headings or when text is grouped with an image, use FitText to achieve scalable headlines. Stray away from vw and vh due to incomplete support, difficulty in precise configuration, and that it does not listen to browser font or zoom settings.

Containers

The container, also known as the wrapper, is an HTML element that encloses one or more other elements. It allows for grouping elements semantically, cosmetically, or in layout.

• It is strongly recommended to use box-sizing: border-box. Click here for more information about it.
• Using max-width with left and right padding is an easy way to create a mobile-friendly container.
• Choose a suitable width that isn't too long (causes visitor's eye to have a hard time focusing) or short (causes visitor's eye to travel back too often). In web typography, there is no line length rule that works for every font, size, leading, and resolution. Use your own best judgment.

Font Sizing

Use a modular scale to help you decide on the font-size of your elements. Modular scale refers to a series of harmonious numbers that relate to one another in a meaningful way.

• The modular scale is only a guideline and can be thought of as just a starting point.
• Keep in mind that different fonts have different cap heights and x-heights, and that most modular scale tools do not account for that.
• In your stylesheets, provide a reference back to what modular scale you used in comments.

Responsive Modular Scale

A single modular scale will rarely look good on all resolutions. To remedy this, different scales can be used depending on the resolution of the viewer's device.