1. Visual design principles Type + Gestalt grouping
ECE 695
Alexander J. Quinn
4/23/2018

2. Typography

3. Font metrics
Credit: Ivo Vynckier,

4. Typography in CSS em ex ch rem Relative to viewport vh vw vmin vmax
Relative to text em ex ch
rem
Relative to viewport vh vw
vmin
vmax
Absolute px mm cm in pt pc
mozmm

5. Typography in CSS font-family font-size font-weight font-style
font-variant
font
letter-spacing
word-spacing
line-height
text-align
text-decoration
text-indent
text-transform
text-shadow
vertical-align
white-space
direction
unicode-bidi

6. Gestalt Principles of Grouping

7. 20 Examples of Beautiful CSS Typography Design
20 Examples of Beautiful CSS Typography Design

8. Gestalt: Similarity
“When grouping items, we will tend to put together those things which are similar.
In images, we group items based on visual attributes such as shape, size, color, saturation, texture and so on.
Grouped items are then assumed to be a single, larger whole.”
image: public domain; See

9. Gestalt: Proximity
“When grouping items, we will tend to put together those things which are similar.
In images, we group items based on visual attributes such as shape, size, color, saturation, texture and so on.
Grouped items are then assumed to be a single, larger whole.”
image: public domain; See

10. Gestalt: Reification
“Reification is the mental process involved in the 'bringing into being' of something. In Gestalt this includes the addition of things which are not in the original image. We may even 'see' the details that are not really there.”
image: public domain; See

11. Gestalt: Multistability
“When we look at something we separate out a foreground, or figure, and a background, or ground. The foreground is usually the main subject on which we will subsequently focus, whilst the background is generally ignored.
Areas which stand out are more likely to be seen as the foreground figure. This includes those where:
The eye is more sensitive to the color (Red, Orange)
There are saturated, bright colors
There is a high contrast between the foreground and background (eg. Black on White).
There is a lower contrast between sections of the foreground.
There is a contrasting outline around it, separating it from the background
The foreground is smaller than the background, which surrounds it.
Areas which recede are more likely to be background,
Colors where the eye is less sensitive (blue, purple)
Unsaturated, pale or pastel colors
A large area surrounding the likely foreground”
image: public domain; See

12. Gestalt: Invariance
“We can recognize items as being the same thing, even when they visually appear to be different. Things can be rotated, stretched, squeezed or otherwise distorted and yet they are still recognized.”
“We are particularly good at recognizing people, even when they stretch their faces in different expressions or are half-hidden or partially turned away.”
image: public domain; See

13. Gestalt: Closure
“Given incomplete information, we send to seek completion, filling in bits which do not actually exist.
In visual images, this particularly includes the extension of lines to form an unbroken outline of an object.”