Cover-002 / Text
V16 - [TEXT - font size: 19.74px, line height: 1.5, tracking: 0.25px, columns: 1/4, expand: right, position: bottom center ]

Cover-002 / Text
V15 - [TEXT - font size: 15.8px, line height: 1.5, tracking: 0.15px, columns: 1/4, expand: left ]

Cover-002 / Text
V14 - [TEXT - font size: 15.8px, line height: 1.5, tracking: 0.15px, columns: 1/3 ]

Cover-002 / Text
V13 - [TEXT - font size: 23.69px, line height: 1.5, tracking: 0, columns: 1/2, add divider: ON ]

Relying on systems fonts greatly improves page performance and can also help your web application/site blend in with the user’s operating system.

Readability is strongly linked to familiarity, so this helps create a more fluid reading experience, allowing your users to focus on your content. Varying the font-weight of different pieces of text can help create contrast between pieces of information.

It can help call attention to a piece of content, or help to make a smaller font-size a bit more readable. In Elements of Typographic Style, Robert Bringhurst suggests we keep two things in mind when playing with font-weight. Use bold weights sparingly. Font-weight should decrease as font-size increases.

Cover-002 / Text
V12 - [TEXT - font size: 11.85px, line height: 1.5, tracking: 2px, measure: line lengths ~80 characters, columns: 1/2, position: center right, drop cap: ON ]

Shuffle features a spacing scale based on powers of two that starts at .25rem (for most devices this will be the equivalent of 4px). Since Shuffle uses rem units with px as a fallback, if a user has declared a different base font-size for their device, your spacing will scale based on a defined ratio that has stood the test of time.

As powers of two will always produce integers, there will be no problems with sub pixel rendering across browsers. Computers aren’t that great at math and so decimals lead to inconsistencies across platforms. Inconsistencies should be avoided where possible. You’ll find that when using a well thought out scale - things just line up. It works, with little effort, regardless of your design knowledge or sensibilities.

Cover-002 / Text
V11 - [TEXT - font size: 11.85px, line height: 2, tracking: 2px, container: small, uppercase: ON, columns: 1/2, position: center ]

Spacing comes in two flavors. Depending on borders and background colors, the difference between padding and margin can be invisible to the naked eye of the user. But to a developer, they serve different roles. Most codebases lack a ratio based scale and instead are littered with values that are just magic numbers. This is bad.

Good design is based on math. Certain patterns and ratios are so prevelant in nature and music that they can't be denied as elegant design solutions. Even in the 18th century, pages in books were designed with ratios.

Cover-002 / Text
V10 - [ TEXT - font size: 23.69px, line height: 1.5, tracking: 0px, measure: line lengths ~66 characters, position: center ]

Often times, websites devote a non-trivial amount of css to setting font-size. They declare an unnecessary amount of different font-sizes that upon inspection, don’t come close to resembling a sane type scale.

Cover-002 / Text
V9 - [ TEXT - font size: 19.74px, line height: 1.5, tracking: 0.25px, measure: line lengths ~80 characters, align: right, position: center right ]

Line-height affects how easy it is to read a piece of text, so having a well constructed set of values can help make your text easier to read, increasing the chances that people will read it. Shuffle recommend to set text at three common line-height values. 1.5 for body copy, 1.25 for titles, and 1 for text that doesn’t wrap.

Cover-002 / Text
V8 - [ TEXT - font size: 33.57px, line height: 1.5, tracking: 0.25px, measure: line lengths ~45 characters, position: center ]

Measure refers to the length of a line of text. It is one of the most important aspects of readability. Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page… the 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple-column work, a better average is 40-50 characters.

Cover-002 / Text
V7 - [ TEXT - font size: 15.8px, line height: 1.5, tracking: 0.15px, measure: line lengths ~45 characters, drop cap: ON, position: bottom Left ]

To create and design an easily readable interface, you don’t need more than 40 font-sizes. A simple ratio-based scale with 8 options should suffice. Using the class extension namespaces you can set the font-size for any particular breakpoint that you desire.

Don’t spend time constantly overriding font-sizes in your css. If you don’t like a default font-size for an element, use the utilities to quickly make the text larger or smaller until it looks just right.

Cover-002 / Text
V6 - [ TEXT - font size: 47.39px, line height: 1.25, tracking: 0px, measure: line lengths ~66 characters, align: center, positions: center ]

Shuffle isn’t just a monolithic template. It’s a big collection of sections that can be mixed and matched or used independently. Use what you need. Leave the rest.

Cover-002 / Text
V5 - [ TEXT - font size: 13.82px, line height: 1.75, tracking: 1.25px, measure: line lengths ~66 characters, uppercase: ON, positions: center ]

The simplest scale is a single note, and sticking with a single note draws more attention to other parameters, such as rhythm and inflection… In the sixteenth century, a series of common sizes developed among European typographers, and the series survived with little change and few additions for 400 years… This is the typographic equivalent of the diatonic scale.

Cover-002 / Text
V4 - [ TEXT - font size: 59.23px, line height: 1.25, tracking: -0.5px, measure: line lengths ~45 characters, positions: center left ]

The simplest scale is a single note, and sticking with a single note draws more attention to other parameters, such as rhythm and inflection.

Cover-002 / Text
V3 - [ TEXT - font size: 11.85px, line height: 1.5, tracking: 0.4px, measure: line lengths ~45 characters, positions: bottom right ]

Shuffle isn’t just a monolithic template. It’s a big collection of sections that can be mixed and matched or used independently. Use what you need. Leave the rest.

Cover-002 / Text
V2 - [ TEXT - font size: 94.77px, line height: 1.25, tracking: -1.5px, measure: line lengths ~80 characters, positions: center left ]

Cover-002 / Text
V1 - [ TEXT - font size: 11.85px, line height: 2, tracking: 2px, measure: line lengths ~66 characters, uppercase: ON, positions: center left ]

Cover-001 / Title
V12 - [ TITLE - font size: 14.5vw, line height: 1.25, tracking: -0.6vw, font weight: 700 ]

say say say say

Cover-001 / Title
V11 - [ TITLE - font size: 22.7vw, line height: 1.25, tracking: -1.5vw, font weight: 700 ]

gorgo

Cover-001 / Title
V10 - [ TITLE - font size: 59.23px, line height: 1.25, tracking: -0.5px, font weight: 700, align: center, styles: line ]

small studio

Cover-001 / Title
V9 - [ TITLE - font size: 23.69px, line height: 1.25, tracking: 0px, font weight: 700, styles: line ]

Simplicity in design ⌇

Cover-001 / Title
V8 - [ TITLE - font size: 94.77px, line height: 1, tracking: -1.5px, font weight: 700, positons: top, styles: bullet ]

Don't Think

Cover-001 / Title
V7 - [ TITLE - font size: 19.74px, line height: 1.25, tracking: 0.25px, font weight: 700, uppercase: ON, align: right, styles: divider ]

simplify to clarify

Cover-001 / Title
V6 - [ TITLE - font size: 33.57px, line height: 1.25, tracking: 0.25px, font weight: 200, measure: line lengths ~66 characters, positions: middle, align: center, centered: ON ]

A digital product studio transforming businesses in a mobile first world

Cover-001 / Title
V5 - [ TITLE - font size: 47.39px, line height: 1.25, tracking: 0px, font weight: 400, measure: line lengths ~45 characters, positions: middle, container: xsmall, align: center, centered: ON ]

Contemporary Visual Communication & Brand Identity Development for Commercial, Cultural & Art Projects

Cover-001 / Title
V4 - [ TITLE - font size: 23.69px, line height: 1.25, tracking: 0px, font weight: 400, measure: line lengths ~45 characters, positions: bottom, align: left, uppercase: ON | COVER - bend mode: difference ]

We’re pioneers in the use of analytics and technology to create valuable, relevant, and trustworthy advertising.

Cover-001 / Title
V3 - [ TITLE - font size: 59.23px, line height: 1.25, tracking: -0.5px, font weight: 200, measure: line lengths ~45 characters, positions: middle, align: center, centered: ON ]

how we think and work

Cover-001 / Title
V2 - [ TITLE - font size: 19.74px, line height: 1.5, tracking: 0.25px, font weight: 400, positions: middle, uppercase: ON | COVER - overlay: rgba (0,0,0,0.4) ]

A digital product studio transforming businesses in a mobile first world. ♥

Cover-001 / Title
V1 - [ TITLE - font size: 94.77px, tracking: -1.5px, font weight: 400, positions: top, align: center | COVER - overlay: rgba (0,0,0,0.4) ]

The Minimalist Mindset Strategy Guide