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

Typography

Font metrics Credit: Ivo Vynckier, http://www.how-ocr-works.com/images/resolution.html

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

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

Gestalt Principles of Grouping

20 Examples of Beautiful CSS Typography Design https://wdexplorer.com/20-examples-beautiful-css-typography-design/ 20 Examples of Beautiful CSS Typography Design

Gestalt: Similarity http://changingminds.org/explanations/perception/gestalt/similarity.htm “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 https://en.wikipedia.org/wiki/Principles_of_grouping

Gestalt: Proximity http://changingminds.org/explanations/perception/gestalt/similarity.htm “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 https://en.wikipedia.org/wiki/Principles_of_grouping

Gestalt: Reification http://changingminds.org/explanations/perception/gestalt/reification.htm “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 https://en.wikipedia.org/wiki/Principles_of_grouping

Gestalt: Multistability http://changingminds.org/explanations/perception/gestalt/figure_ground.htm “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 https://en.wikipedia.org/wiki/Gestalt_psychology

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.” http://changingminds.org/explanations/perception/gestalt/invariance.htm image: public domain; See https://en.wikipedia.org/wiki/Gestalt_psychology

Gestalt: Closure http://changingminds.org/explanations/perception/gestalt/closure.htm “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.”