Design & Typography

Question 1

How can you put emphasis on text when preparing a design?

Answer 1

1. Group info, based on importance and separate them to blocks of text. (Use big spaces, and then reduce if necessary).
2. Decide which block is more important and put text-transform: uppercase, font-weight: 700, increase the font-size.
3. Create contrast between those elements.

Question 2

How to create a contrast between text elements?

Answer 2

Play with shades of the color (eg. black). This way, the user’s eye will more quickly see the hierarchy of the information that is thrown at them.

Question 3

What to do with lineheights and letterspacing of big titles and paragraphs to improve visibility?

Answer 3

• For Small text increase the lineheights (usually around 150, 160% is good) - reduce if you need to.
• For big text - do the opposite.

Uppercase text - increase the letterspacing

Lineheight in graphics term is refereneced to as leading.

Question 4

How can one set the max characters per line?

Answer 4

It is important to stick the information if blocks, which do not grow when we resize the page.

Optimal characer number per line is between 50-60.

In order to set that in CSS, you ned to
p {
max-width: 60ch;
}

Question 5

Where to start, when picking colors?

Answer 5

1. Start with black and white design.
   Black and white work well together, because they are complementary. They work well with images, because in the color wheel they are the lightest and darkest shades of every color.
2. add one main color.
   This color should be taken from a photo, or color that is complementary to the main theme of the photo.

Question 6

Choosing fonts

Answer 6

Sans-serif fonts, usually work the best for websites. Pick fonts, that have many variations & styles.
Always pick font that works well with the body first.

When mixing fonts, go for fonts that are visually different. - Serif, sans-serif mix is a classic.