The specific blue and yellow chosen contribute to the attractiveness of the design - the yellow isn't too bright and the blue is dark enough to read on a white background. The color palette is limited to two basic colors: blue and yellow, classic complementary colors.

This type of palette allows for a clear contrast between content (which is blue) and calls to action (which are yellow). The color palette is limited - made of primary blue and yellow. Each product’s title, image, description, and button are centered around one of the lines. This design centers content on 3 anchor lines. This design uses hierarchy, color, and imagery to create an attractive visual experience. Our second example is from, a vitamin company. While most font families automatically adjust kerning (it is built into the type style), consider manually adjusting kerning for large headlines or logos where the space between letters is noticeable.Ĭollectively, these design details make the design beautiful, while accomplishing the primary purpose of the webpage - to be easily read. For example, in the title What Exercise Looks Like in Japan, the spacing between the letters W and h in the word What has been slightly compressed. Gaps typically occur around letters that form an angle, like W, Y, V, or T. Kerning and tracking are usually applied to bigger type, like headlines, where the spaces are more apparent. The designer has also considered the awkward spacings created between letterforms as a result of their particular shapes.

Consider increasing the default +2px leading if you have several paragraphs of text, which may otherwise feel visually dense and heavy.

Reducing the standard line spacing would have resulted in uncomfortable collisions between ascenders and descenders, and a dense read. In this case the leading is 4–6px greater than the font size, helping to create an airy and open text block. The leading, which is the distance between the baseline of each line of paragraph type, is slightly increased from the default spacing (which is typically 2px greater than the font size). As a rule of thumb, identify a typographic system and limit your design to 1-2 fonts always use the same type variant (italic, bold, small caps) for the same purpose (even across webpages or areas of your interface).Įxtra space between lines of text. This variance keeps the design from feeling flat, but still feels cohesive with the rest of the text. For example, the small caps in WRITTEN BY indicate that it is a section heading. While too much variety can disrupt consistency and make a design look haphazard, Medium’s variants are applied consistently and with purpose. Medium uses different type styles from within the same font family (small caps, bold, italic, underlined) and slight changes in color (black versus gray) to differentiate between different types of content. Any alignment inconsistencies should be purposeful - define clear rules to guide you (and remember that left alignment supports scannability). In your design, set up a column grid and keep alignment consistent across your different pages and elements. The article text is also left aligned to a column grid line. Because the sidebar content is left aligned to the leftmost grid line, the design looks crisp and the sidebar content is easy to scan. A column grid provides vertical anchoring lines to which objects are aligned. To start, there is a column grid (the pink lines in the image above). Small caps differentiate the WRITTEN BY headline, and extra-roomy leading makes the design feel airy and easy to consume.Īlignment to a grid. A consistent unit of padding (the vertical white space separating elements) is used between the icons in the left sidebar, while double the same unit is used to separate groupings.

Design infographic color palette