Colors, Typography & Imagery

Colors

• CSS colors can be applied in multiple ways. The first one is by using predefined color names (there are around 147 of them)

• We can create any color by combining Red, Green & Blue values together

• This can be achieved using either rgb() or #hex

• RGB goes from 0 to 255 and HEX is hexadecimal which goes from 0 to F (16 values in total)

• We can also define transparency by giving optional alpha value RGBA or HEXA

body {
	background-color: crimson; /* color name */
	color: rgba(0, 0, 0, .5); /* rgba */
	border: 1px solid #00f; /* hex */
}

Color Wheel

• Designers use color theory. Color theory is a practical combination of art and science that’s used to determine what colors look good together.

• The color wheel was invented in 1666 by Isaac Newton, who mapped the color spectrum onto a circle.

• The color wheel is the basis of color theory, because it shows the relationship between colors.

Picking Colors

1. For image heavy websites, colors should be inspired from the main image by using a tool like Image Picker

2. A pallet should be picked from an artistic site like Colorhunt

3. For more formal defined colors, use a set of colors from Tailwind Colors or Material Design Colors

Typography

• A typeface is a custom category of font.

• There are mainly three types of typeface: serif (Newspaper), sans-serif (Clean) and monospace (Coding)

• We can apply fonts using these methods:
• Using @font-face{} with a custom font file format: otf, ttf, woff2
• The woff2 font format is recommended as it’s more compressed and optimized
• Google Fonts, Adobe Fonts or DaFont website to get custom fonts

/* Font Properties */
p {
	color
	font-size
	font-weight
	font-family
	line-height: 1.2 to 1.5 (recommended)
	letter-spacing
	word-spacing
	text-align: left/center/right
}

/* While applying fonts */
body {
	font-family: Inter, Helvetica, sans-serif; /* fallback */
}

Picking Fonts

1. Limit the number of fonts to at max 3 for performance and consistency reasons

2. Always read the about of a font before integrating it. It’s like the intent the designer has put while creating the font

3. Also limit the number of font weights, also experiment by combining different font weights

Images

• The images of our website should match the general color pallet

• Use of webp or avif is recommended for performance reasons

img {
	object-fit: cover; /* Covers the container*/
	filter: grayscale(); 
	transform: rotate(45deg);
	aspect-ratio: 16 / 9;
	image-rendering: pixelated; 
	clip-path: circle(50%);
}

Picking Images

1. Making use of sites like Unsplash or Pexels

2. Try to use same styles of images all across the website. It could belong to a same photographer or single source. For example, Surface on Unsplash. The images from a single shoot makes it more relatable

3. Image editing tools: Pixlr

4. Vector editing tool: Figma