Typography is the art of arranging letters and text in a way that makes the copy legible, clear, and visually appealing to the reader. It involves font style, appearance, and structure, which aims to elicit certain emotions and convey specific messages.
![notion image](https://cdn.popsy.co/images/https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F9357974c-b864-482e-abfa-b3e190822aa8%252FUntitled.png%3Ftable%3Dblock%26id%3D1780782d-df4e-463c-9fa5-0f6e94b3b3cc%26cache%3Dv2?width=1500&optimizer=image)
Typefaces
A typeface (or font family) is the design of lettering that can include variations in size, weight (e.g. bold), slope (e.g. italic), width (e.g. condensed), and so on. Each of these variations of the typeface is a font.
![notion image](https://cdn.popsy.co/images/https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252Feec60213-b558-4ca6-a58d-2919a70597f4%252FTypefaces.png%3Ftable%3Dblock%26id%3D8bdd5103-7f8a-41c5-823f-37aecf8a5c7e%26cache%3Dv2?width=1500&optimizer=image)
Colour
Colour us what we all know, and see. It is the visual perception based on the electromagnetic spectrum.
Comprises of
- Hue - The colour of the colour, such as red, orange, yellow, green, red, blue, indigo, violet.
- Saturation - Intensity of colour, desaturated colour tend to look grey.
- Value - The lightness(tint) and the darkness(shade) of the colour.
![notion image](https://cdn.popsy.co/images/https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F0c42932d-6d76-4c9d-934f-1652ac33b57a%252FColour.png%3Ftable%3Dblock%26id%3D0f5b35da-67d3-403e-9318-e9901475e8b7%26cache%3Dv2?width=1500&optimizer=image)
Hierarchy
Hierarchy is organising of various texts using size with addition to typeface and colour. It helps in conveying the importance of the text.
![notion image](https://cdn.popsy.co/images/https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F10b2d7d4-9c08-4611-9a76-2fd2d3ec74cd%252FHierarchy.png%3Ftable%3Dblock%26id%3D24407704-b7f0-469f-a9e0-8d6195e1aafd%26cache%3Dv2?width=1500&optimizer=image)
Alignment
Alignment is in context with the page, as to of which part it is anchored to.
![notion image](https://cdn.popsy.co/images/https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252Fa862fc52-a644-4107-b8b1-6949872f258c%252FAligment.png%3Ftable%3Dblock%26id%3D1b1e640b-7d12-4768-ac22-a481fd028597%26cache%3Dv2?width=1500&optimizer=image)
Space
- Leading (Line spacing)
- Tracking (Letter Spacing)
- Kerning (space between pairs of letters)
![notion image](https://cdn.popsy.co/images/https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252Fb622a168-7479-4fd9-8270-5e6c6331d4c0%252FSpace.png%3Ftable%3Dblock%26id%3D6d49de0c-3117-4ab5-9dad-6027695c7dd3%26cache%3Dv2?width=1500&optimizer=image)
Colours Schemes
![notion image](https://cdn.popsy.co/images/https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F7bf59d64-1c8d-46e3-948e-10ea676f40e6%252FUntitled.png%3Ftable%3Dblock%26id%3D30f04155-2298-47c8-bed9-b8c1ef025e63%26cache%3Dv2?width=1500&optimizer=image)