Spacing
Similarly to use of colours and typography, spacing must be consistent throughout to visually but unconsciously reassure the user they're browsing Fairfax & Favor, an identifiable brand with an identifiable style.
For desktop and tablet, we have greater room to breathe. For mobile, space is more of a premium and we reduce things accordingly, but consistently.
Margin, padding, letter spacing, grids, columns... they all contribute to the big picture. We'll cover the best practice below.
VERTICAL RHYTHM
By injecting consistent space (or margin/padding) between content, we create a harmonious and consistent layout. The fixed spacing separating the sections makes the content distinct.
We ensure layout consistency by using the Tailwind framework for spacing classes and using grid systems with uniform widths.
TYPOGRAPHY
This is largely covered in the dedicated typography page, in the sections line height (the spacing between lines of copy) and letter spacing (or tracking). However, the space or padding between copy must be uniform, and this differs based on headings, paragraphs or less common types like breadcrumbs.
A heading or title will typically have a padding at the bottom of 2rem using the following class pb-8, while a section title or paragraph will have half that size, at 1rem using pb-4. This is illustrated throughout this style guide with page titles, section titles and paragraph copy.
GRID
Grids keep things uniform and consistent. For features mostly use an even two column grid, we'll use best judgement to change this to one column for mobile only if content doesn't display well, usually where a lot of text is included. For products or content with less height, we'll move to an even three column grid, this jumps to two columns for mobile. For carousels we'll commonly use an even four column grid, occasionally three column. Carousels are particularly well suited to adapt how many columns we display dependent on screen size.
Similarly to headings in typography, we space grid content with the same 2rem height or width. For a parent element this can be with margin m-8 or padding p-8, however this is the total space, so each child element might have half that padding or margin at 1rem surround p-4 to achieve the same separation.
BALANCE
The use of grids with alignment is important for balance and consistency. A harmonious layout requires attention to detail and a bit of extra work. A key and common example of uniform height in grids is shown below.
