Overview and review Flashcards
Who wrote an article in 2006, suggesting World Wide Web, is composed mostly of letters, therefore web designers had to start paying attention to text?
Oliver Reichenstein developed a hypertext luminary, “Web Design is 95% Type”, in 2006 which crashed into scene writing.
What does Ellen Lupton rank her font in “Design For Web” in 2014?
Ranked it as: readability, showmanship and classiness which in the end HOW IT RENDERS
Why do you have to look at visual anatomy and cultural geography of letters esp. digital typography?
Ellen Lupton said that digital typography teams up with diversity of tropical rainforest littered with trash
When did TYPOGRAPHIC DIVERSITY develop? Why?
Typographic diversity happened when CSS2 was drafted in 1998 because it included @ font-face rule, which enabled browsers to download font info. Thus giving permission to any font being used. IE4 implemented in and still used today.
What happened when @font-face was developed in 1998?
Typographic diversity happened - use any font you want and it contained no piracy protections. Users downloaded unlicensed fonts and linked them. It threatened type business.
What allowed designers to spend more time perfecting their craft in 2000?
Implementation of web standards had made developing site a quicker process. Spend less time WRITING different versions of same page.
Name 3 technologies that popped up to fill a void left by CSS 2.1. What was the purpose?
SIFR=Scalable Inman Flash Replacement
SVG=Scalable Vector Graphics
CANVAS=Typeface.js
These techniques worked well to allow any print font to be used on the web without need to purchase additional licenses.
Why did designers start to worry less about piracy toward end of 2000?
They worried more about design market which was rapidly moving without them.
Who was the early internet designed for in 1992?
It was designed to connect scientist working on different platforms
Which font format is favored by Windows? And MAC?
TRUE TYPE: Favored by Windows
POSTSCRIPT: Favored by MAC
What is TYPE ON SCREEN?
Survey new design principles born on screen-based communications while drawing on traditions of form and function
What are 5 basic parameters of type on screen? Why is this necessary?
Weight, size, style, alignment, spacing - help users find info they are seeking
What should be concerns for designers in order to create pleasing and engaging experiences for all readers?
Interconnected choices from typeface and page structure to modes of LINEARITY, INTERACTIVITY and NAVIGATION
Can you explain the difference between following measurements of type on screen: ems, px, pt or %
EMS: Scalable, no fixed units determined in relationship to browsers current point size
PX: Absolute elements set by browsers
PT: Employing units can override user’s browsers settings
%: Scalable, no fixed units determined in relationship to browsers current point size
How does the designer use a combination on method to enable pleasant reading across devices?
Responsive websites uses flexible foundations, otherwise large images typically forces users to zoom in when same content appears on smaller screens.
Why have/do designers use grids? How would you make a grid for a website?
- Subdivide into 16 equal parts
- Work with 960px of screen width
- Since 1950’s we have used grids to organize empty void into columns and rows of white space.
- Digital screens consist of thousands of square pixels.
- Designers define robust and flex grids for arranging content
- Establish flex, adaptive grid systems
Why has Google amassed a library of free fonts that’s designed well? List 5 Google Fonts.
Google pays current market rates to commission type designers in hope to give people access free web fonts and not use graphic GIFs. The end result is to create a searchable and translatable text (SEO).
David Crossland designed PT Sans & Serifs, Alegreya, Andika, Montserrat and Copriola
What is a mutable typeface?
Mutable typeface gives designer multiple options to typeset the same message. The typeface comes with one STANDARD and ALTERNATIVE ways to typeset same words. This concept lends itself to animation, not exclusive to type design and address nature of fonts as software.
Name 3 examples of mutable typeface?
JULIEN: 1000 alternate glyphs - Bil’ak
WALKER: Designed by Matthew Carter for Walker Art Center in 1995. It employs 5 different styles and weight on ‘snap on’ serifs, yielding numerous variant styles, unifying look includes horizontal rules
ED INTERLOCK: Designed by Ken Barber and Ed Benguitit. 1400 discretionary ligatures or typefaces in 1960-1970.
What is monospace? Give an example.
Monospace is when EVERY GLYPH would have SAME WIDTH = UNICASE (mixing upper and lowercase) and GEOMETRIC SANS SERIF.
EXAMPLE: ALCANTARA designed AlphaBeta to create many legible glyps of each character.
What achieve universal web typography?
HINTING
A TRUETYPE, favored by Windows, carries around its own instructions for making the leap from OUTLINE to RASTER
99% of fonts lack _________ which makes them display poorly and inconsistent
HINTING
1% hinted font is _______ and _______
Georgia and Verdana
What does hinting tell operating systems to do?
- Hinting transforms shapes of letters based on size displayed.
- It tells the browser to adjust features such as: HEIGHT, STEM WIDTH, WHITE SPACE, SLANT of ITALICS, relationship between UPPER AND LOWER case
- Hinting creates sharper looks by increasing contrast along edges of letterforms, at expense of screen preserving character, shape and space
How was the original outline of type transformed to fit to screen?
True Type Hinting
What does it mean when a FONT TAKES A HINT?
- Conforms to pixel grid of screen
- Any digital font that goes from vector essence to raster through interpretation
- Hinting is set of instructions that tells raster of browser (operating system) how to reposition a typeface outline for better display at different size
Name the 3 type of design faces and where they come from
SERIF FACE: Introduced in 15th century, imitated older media, handwriting and stone carving
SANS SERIF FACE: Meet needs of commercial advertising devised in 19th century for printers
SLAB SERIF: 19th century have chunky, geometric end strokes with much heft and presence in main stroke of letters (WEB).
What is the Cap Height and X-height?
CAP HEIGHT: Distance from baseline to top of letters
X-HEIGHT: (Size of x-height of font) Vertical main body and lowercase
What is the Ascender or Descender?
ASCENDER: Extend above height of letters
DESCENDER: Hang below baseline, long descender
What is an Overhang?
OVERHANG: Curve of letter hangs over baseline
(Bottom strong characters) like s, t, or u
What is Ligatures?
Combination of 2 characters such as fi, ff, or fl that prevents awkward bumps or grinds
