OUGD504 - SB02 - Type on Screen by Ellen Lupton

OUGD504 

SB02

Type on Screen by Ellen Lupton

Fonts on screen
The pioneering printers of the Italian Renaissance piled their craft with just a few type styles: so could web designers create beautifully structured pages with minimal range of typefaces.

Slab serifs have chunky, geometric end strokes with as much heft and presence as the main strokes of the letters. They are popular on the web because they combine aspects of both sans serif and serif letter forms and they function well in light and heavy weights, enduring the rigours of rasterization.
Examples: Tisa, Chaparral, Kulturista.

Body Copy - principle reading matter
Heads - shorter pieces of text, call out sections and subsections.

Web font features:
Legibility - How distinct 
Readability - How comfortable is it to read in body copy. Does it invite long form reading?
Flexibility - Does it work well in different sizes and weights? Would it function for both headlines and text?
Classiness
Amphibiousness - has it been optimised for screen?

Examples:
Serif - Fedra Serif, Georgia, Mefo Serif, Minion, Skolar
Sans - Dagny, DIN, Helvetica, Proxima Nova
Slab - Adelle, Chaparral, Kulturista, Musco Slab, Tisa

Designers manipulate size, contrast, weight, colour, rhythm, texture and hierarchy in order to craft pleasing and compelling reading experience.

Considerations
How will content be delivered
How much space will it occupy

screen size 1024x768px
at this resolution smart phones can keep up while the project is scalable enough for larger displays.

Account for:
Space occupied by system menus
Space needed for tools, bookmarks, status bars.
Roughly 80% of this space is left for page content

The Grid
Designers can define robust and flexible grids for arranging content.
Modular grids, made from vertical columns and horizontal fields, was pioneered by Swiss graphic designers in the 1950's.
Designers can mitigate the problem of differing screen sizes and resolutions by building websites that respond to these differences.
Responsive design displays content differently depending on how the user is viewing the site instead of creating separate stand alone versions of sites for different uses.

Liquid layout design will continually adjust and re flow to the users browser width.

Adaptive layouts respond in fixed steps based on size or orientation of browser or devise.

Type size
People tend to hold books closer to their face and sit further away from a computer screen. Comfortable reading on desktop or screen thus demands larger sizes than print. Standard point for Georgia is 17pt.

Hierarchy
Shifts in scale, weight and colour, or use of complementary font or icon, are ways to express a text's hierarchy. The ranked structure of parts within the whole. Each level should be signalled by one or more cues that are applied consistently throughout the site.

Linear Reading
ePub - works well for long format reading (fiction, in-depth journalism) Designed to re-flow in response to users screen format and font size preference, Gives designers little control over format.

Selective reading - Google Books
Retains typographical texture and page layout, fully search able.

Flow of content
Spine
scroll
grid
slides

Wire frames
Represents the skeletal structure of a website or application. Also referred to as a page schematic  or a screen blueprint, a wire frame uses simplified elements to represent basic content areas and the elements of page navigation.
Designers keep the design simple and abstract in order to avoid getting involved too early on conversations about colours, fonts and image choices. Bars, blocks and fields of grey.

Low fidelity wire frames
Shows where basic blocks of information will fall. Can be used in site maps, user flows, and other UX documents as simple depictions of page layouts.

High Fidelity wire frames
As a project develops designers create wire frames with greater degrees of accuracy, including flowing in real content.