Colour Science Typography Frontend Dev

Colour Science Typography Frontend Dev

Name Kevin Eger Who am I? Why should you listen to anything I say? Summary

What the next hour of your life looks like Colour Science Typography Frontend Dev 1. 2. 3. 4. 5. 6. 1. 2. 1. 2. Human Vision What is colour? Emotion Perception Conservation How colour relates to more than design Brief history Digital type 3. 4. Core components Modern technologies Where/how easy it is to start You guys try and make me look like an idiot

Vision Rods Responsible for detecting overall brightness Cons Three types (RGB) that are sensitive to different frequencies of light Human Vision Optimized for detecting contrast or edges, not absolute brightness Crashiest of crash courses in vision

Peripheral Vision Cone cells are packed tightly in the center of our visual field and sparsely in the periphery of the retinal The distribution not only affects spatial resolution, but also color resolution. Easier to discriminate colours at the center of our visual fields ~120*10^6 rods ~6*10^6 cones Peripheral vision has two main functions: cues to where to look next and detecting motion.

What is Colour?

Describing Colour Hue: another word for colour Saturation (chroma): intensity or purity of a hue Lightness (value): relative degree of black or white in a hue

The Spectrum 3 cones for colours Red, green and blue

Colour blindness There is no actual blindness but there is a deficiency of color vision

Colour blindness Monochromacy Having only one type of cone cell Dichromacy One of the three colour mechanisms is absent Therefore they can match any color but are mixing two primary colours instead of the standard 3

Colour blindness facts Color blindness is more prevalent among males than females, because the most common form of color vision deficiency is encoded on the X sex chromosome. About 8% of all men are suffering from color blindness About 0.5% of all women are suffering from color blindness Dogs are not colourblind

Browser Statistics: http://www.w3schools.com/browsers/browsers_stats.asp

If we continue to develop for the 7% of losers on, we should develop for the 8% of males with colour blindness

separation

distance

Colour Schemes Monochromatic Varying saturation of one hue Complementary Hues on opposing sides of the colour wheel http://paletton.com/ Analogous Adjacent hues on the colour wheel Triadic Three colours selected from equidistant location on the colour wheel

The importance of contrast

Conserving colour

Importance of colour themes...beyond design

Don t be a spaghetti coder And don t be a disgusting designer Takeaway from this lecture how to not pick absolutely terrible colour combinations You don t have to be a designer to make easy and reasonable colour choices Even if you don t care about design, the benefits of putting the extra 30 seconds into basic colour choices will be well worth it

Colour theming your IDE for programming Most studies show dark characters on a light background are superior to light characters on a dark background (when the refresh rate is high) Participants were 26% more accurate in reading text when they read it with dark characters on a light background Reference: Bauer, D., & Cavonius, C., R. (1980). Improving the legibility of visual display units through contrast reversal. In E. Grandjean, E. Vigliani (Eds.), Ergonomic Aspects of Visual Display Terminals (pp. 137142). London: Taylor & Francis

Colour theming your IDE for programming Why does the colour theme matter? Focus White stimulates all three types of cones in nearly equal amounts causing the eye to focus by tightening the iris. Since the eye is focused, dark letter forms on light background are easier to read When using dark backgrounds with strong light letter forms, the iris opens to allow more light in but causes blur.

Typing express words and ideas visually

Johannes Gutenberg The father of typography Books needed to be writed by hand which was very time consuming and expensive Enters Blackletter Thick vertical lines and thin connecting horizontal lines Looked nice in writing, but dense and compressed with printing

Roman Type Created by Nicolas Jenson 15th century Based on straight lines with regular curves Much easier to read than Blackletter

Instant Success

italics next major innovation in typography

italics Slanted and stylized versions of Roman Type Created in the late 15th century to fit more letters on to a page and save money Italics are now used for emphasis Typing stayed the same until the 18th century

Sans Serif Caslon s son (Caslon IV) got sick of all the nibs on letters, chopped them off and coined the term Sans Serif Despite it being crazy popular (and almost standard) today, it didn t catch on immediately.

Arial Arial Helvetica

Digital Type

Steve Jobs Putting human beauty into the formerly cold, pixelized world of computing

Jobs and calligraphy Jobs took a calligraphy class which is largely responsible for his inspiration that shifted computing typefaces as we know them today Jobs wanted Palladino s (his calligraphy professor s) insight on Greek letters, telling his former instructor he was working on computers in his parents garage. He introduced me to the mouse. I had never seen one before, Palladion says

What Jobs actually did for typography First to give a choice of fonts Ability to express ourselves digitally Emotion Clarity Variety Before the Macintosh of 1984, most primitive word processors offered up one dull face Competitors copies and printers marketed on not only speed but their font variety

Frontend Development

Thank you! Kevin Eger http://kevineger.xyz egerkevinjames@gmail.com qscu.cosc@gmail.com