When the viewport is resized and the content has reached the max-width, the container will continue to expand with even margins on either side. When displaying content in a fluid layout, set the max-width (680 in the example below). So it's good practice to design for an ideal line length range under normal circumstances, and use responsive design techniques to anticipate different contexts. Readers may also have control over the layout width, meaning that a line length can not always be specified. Setting an optimal line length will break up content into easily digestible information. While there is no right way to measure the perfect width for text, a good goal is to aim for between 60 and 100 characters per line including spacing. Wide lines of text are difficult to read and make it harder for people to focus.

Set the reading environment to suit the reader. Use for short quotations that will appear within larger bodies of text. It will be indented to set it apart from surrounding text. Use with a quotation that is typically longer than a few lines. Use unordered lists to group related items. Use ordered lists to group items in a pre-determined order. If the user can apply a color choice directly to a link, then the product should respect that new color choice. For user generated content, changing the color choice for a whole element, for example an h2 heading, will still display in the default hyperlink color. For lists of objects that are not mixed with paragraphs, such as a list of recent issues or commits in a side panel, use the default neutral color. Links use color B400 and are not underlined except on hover. Do not use for actions, instead use a button. Use when you are linking just a few words of text, or when a link is standalone. Use small primarily on help text under form fields, and as secondary supporting text in applications. Headings that identify key functionality.ĭeep headings and for highlighting important pieces of information. Use in moderation.Įmpty states and feature introductions.

Sf pro display bold