Three design principles for your CSS layout

Industry experts agree that typography, spacing and colour form the key basic principles for designing things like layouts for the web. They are the three ingredients or building blocks to work with to create a cohesive composition.

In this article, we explore how to create a simple single column layout with these design principles in detail. HTML and CSS will be the technologies that we will use as tools to create this layout. Doing this practice will help you learn key concepts and build your web development skills.

1. Typography

To set the type, CSS provides the following properties, font-family, font-size, line-height and font-weight.

In this example, we are setting the font-family to Helvetica. It is web-safe, well-supported by browsers and very popular. We will set the font weight explicitly. The Helvetica font provides two standard font weights. We will set those explicitly to what the standard typically is 400 for <p> and 700 for <h1>.

Typography systems also set a ratio to the font-size and line-height. This is helpful as it helps you build visual hierarchy in your design. A good rule of thumb is to set the line-height to approximately 150% of the font size.

body {
font-family: Helvetica;
}
h1 {
font-weight: 700;
font-size: 2em;
line-height: 3em;
}
p {
font-weight: 400;
font-size: 1em;
line-height: 1.5em;
}

2. Spacing

A lot of CSS frameworks and libraries use rows and columns to build layouts. In this example, we will are creating a simple layout so we will only work with rows. To implement design specifications like fixed or fluid width and manage the inner and outer spacing around your html elements, it is helpful to understand how the CSS box model works. You can find more information about it here on w3schools.

For this example, we are only specifying the padding property for spacing around the row element. I have added a simple border property to use as a guideline when working with the spacing.

.row {
 padding: 0 1em;
 border: solid 1px black;
}

3. Colour

We will use a simple monochromatic greyscale colour palette with two combinations: black and white. They also have a sharp contrast and are polar opposites in colour theory. These CSS properties will help us create and apply a dark theme to the html element: colour and background.

.dark {
 background: #000;
 colour: #fff;
}

Here is the complete code on Code Pen with the resulting layout

References:

https://likeable.com/blog/2016/3-basic-principles-of-design/

https://www.smashingmagazine.com/2014/09/balancing-line-length-font-size-responsive-web-design

https://www.schemecolor.com/grayscale.php

https://levelup.gitconnected.com/the-complete-css-style-guide-for-your-next-project-bb5a5d8f7bc9