pba front-end

PBA Front-End

Week 4

Using Fonts

• Why do we need to consider fonts…?– Make it as easy as possible

for the user to read the textual content of a page

– To convey feelings…

Using Fonts

• Formal definitions:– A typeface: an artistic represen-

tation of the characters, etc in the alphabet

– A font: A typeface in a given size• However, terms are used

interchangeably in digital publishing

Using Fonts

• Size of fonts is traditionally measured in points

• Not quite a standard measure – most common definition is– 1 point = 1/72 inch ≈ 0.35 mm

• More rarely used is pica = 12 points• 1:1 match with ”older” screen resolutions

(72dpi)

Using Fonts

• Another important component is the space between subsequent lines

• Often calling leading

12 pt. font

18 pt. leading

Using Fonts

• Two main families of fonts• Serif (with ”feet”), aka Antikva• Sans Serif (without ”feet”), aka Grotesque

Using Fonts

• Serif font are considered traditional fonts• Times (new) Roman• Purpose of Serifs (feet) to ”lead the eye” by

creating an imaginary line• Debated…

Hello there

Using Fonts

• Sans Serif fonts (like this) have traditionally been used for short text, e.g. headlines

• Are now generally accepted as the best choice for text on screen

• Argument: Serifs tend to ”smear” on screens with traditional resolution (72 dpi)

• Argument may outdate as screen resolutions improve…

Using Fonts

• Choosing the right font for the job…– Make sure the content

is readable– Choose fonts that

match the general theme of the wesbite

Using Fonts

• Make sure the content of a page is readable– The longer the text, the more

”neutral” the choice of font– For large bodies of text, stick

with a variant of the main-stream Sans Serif fonts

– For short texts like headlines, more freedom

Ski ’n Fun

Come with us to the famous resort of Val D’isere, where we will enjoy miles and miles of crystal white alpine slopes, while the vibrant after-ski party life awaits us when darkness falls.

Book your ticket at Ski ’n Fun today!

Ski ’n FunCome with us to the famous resort of Val D’isere, where we will enjoy miles and miles of crystal white alpine slopes, while the vibrant after-ski party life awaits us when darkness falls.

Book your ticket at Ski ’n Fun today!

Using Fonts

• The big question – how do we pick a font, that matches a certain theme or feeling…?– When is a font ”elegant”– When is a font ”funny”– When is a font ”scary”

• No firm rules, use your common sense, and observe what others have done…

• …and test your choice (usability)!

Using Fonts

www.fontco.com

http://www.fontco.com/

Using Fonts

• What about font size…?• Books keep lines of text short (10 cm), to avoid

reading fatigue• Modern screens are 30-40 cm wide…• Should we ”mimic” book layout by using larger

fonts?• Screen geometry fundamentally different…

Using Fonts

Using Fonts

• General tips on font size– Users like larger fonts than designers do– Use leading to increase readability – good choices

are 10/12 and 12/14– Ideally; design to allow the user to change the font

size, screen geometry, etc (responsive design)– However, the far majority of users cannot be

bothered to change default settings

Using Fonts

Textual Composition

• Even with proper choice of font, the physical organisation of text still matters– Avoid ”walls of text”– Avoid monotony…– …but also avoid too many

surprises!

Textual Composition

BORING!!

Textual Composition

• Various types of ”space” are useful• Margins - separates text blocks from other

page elements• Alignment – helps the use to navigate – Can help the user to navigate between lines– Left-justified text is usually considered the best

choice for text on the screen

Textual Composition

Textual Composition

• Text can also be emphasised in various ways

• Classic effects for emphasis– Bold– Italic– Underline– Coloring– CAPITALS

Textual Composition

• When could emphasis of text be appropriate?– Introducing a new term– Using an adjective in ”strong form”– Indicating text which also has a

function (link)– Draw attention to an important piece

of data– …?

Textual Composition

• ”…the emergence of quantum physics”• ”…that room was scary, John”• ”…also check out www.cnn.com”• ”…more than 2,000 families are affected”

http://www.cnn.com/

Textual Composition

• Tips on text emphasis– Use sparingly, otherwise

effect is lost!– Emphasis is for very short

text passages, not e.g. an entire paragraph

– Emphasis and e.g. choosing a font for a heading is two different things…

Textual Composition

Editorial Style• What does reading on

the Web resemble most closely…?– Reading a book– Reading a newspaper– Reading a printed

advertisment– Watching TV– Watching a movie

Editorial Style

• Reading on the Web of often more goal-oriented than traditional reading

• User seek specific information• User will ”scan” pages rather than read pages

word-for-word• Delicate balance between web-enabling

material and cutting it to pieces…

Editorial Style

• What if we have more infor-mation than what ”fits” a single page?

• A job for the Information Architect!

• How do we split information over several pages in a proper manner?

Editorial Style

• Avoid just splitting after size, split after content (chunking)!

• One page (not a screenful) should be a logical, fairly self-contained, unit

• Having a consistent page structure also helps the user

• www.webstyleguide.com

http://www.webstyleguide.com/

Editorial Style

• How should individual pages be structured?• Keep in mind that Web users ”scan” pages

rather than read them word-for-word• Text segmentation– Break text into subsections– Use descriptive (and plenty of) headings– The inverted pyramid

Editorial Style

Editorial Style

The Inverted Pyramid works!

It brings the users attention to the section, and enables the user to quickly decide if the section is relevant

Historians disagree about when the form was created. Many say the invention of the telegraph sparked its development by encouraging reporters to condense material, to reduce costs. Studies of 19th-century news stories in American newspapers, however, suggest that the form spread several decades later than the telegraph, possibly because the reform era's social and educational forces encouraged factual reporting rather than more interpretive narrative styles

Editorial Style

• How should we actually write on the Web?• First consideration: Target Audience!• How would you write when addressing– Urban males, age 18-29– Girls, age 6-9– Seniors, age 65+– Users with high education– …

Editorial Style

• Second consideration: User profile• Is the typical user– Recurring – visits this site regularly– Casual/Random – not interested in this particular

site, but in a topic (via Google)– Skilled – has extensive background knowledge on

the web site topics– Novice – little or no background knowledge

Editorial Style

• Tacit style– Assumes the user has a solid

background knowledge about the topic at hand

– Stick to the point – avoid ”trivial” information

– Uses relevant terminology without further explanation

– Few external links

Editorial Style

• ”Wiki style”– Assumes the user has little or

no background knowledge about the topic at hand

– Uses relevant terminology only after introducing it

– Redundant information is more acceptable

– Many external links

Editorial StyleRecurring/

SkilledCasual / Novice

Tacit Style OK Too hard to understand

Wiki Style Too elementary, too much information

OK

Editorial Style

• General advice for (Web) writing:– Never use a long word where a short one will do– If it is possible to cut a word out, always cut it out– Never use the passive where you can use the active– Never use a foreign phrase, a scientific word, or a jargon

word if you can think of an everyday English equivalent– Break any of these rules sooner than say anything outright

barbarous– Source: George Orwell

Editorial Style

• General advice (continued):– Front-load your content– Stick to the point– Cultivate a distinct voice– Think globally– Use numerals for specific numbers

Editorial Style

• Rhetoric: the art and technique of persuasion, through oral, written, or visual media

• Elements of Rhetorics– Ethos– Pathos– Logos

Editorial Style

• Ethos: the credibility and authority of a source of information

• Will I believe what you tell me…?• Will my website convey a sense of credibility

that is fitting for the source?• Bad ethos: broken links, ”cheap” graphics,

outdated content, spelling mistakes, etc..

Editorial Style

• Pathos: developing a positive emotional response in the user

• Will I feel what you want me to feel…?• Does my website make the user “feel” the

desired way?• Graphics, metaphors, storytelling,…• Bad pathos: Conflicting signals, e.g. sad text,

happy graphics, etc.

Editorial Style

• Logos: Appealing to the rationality and logic sense of the user

• Does what you tell me seem rational, logical and plausible…?

• Statistics, facts, examples, etc..• Bad logos: Biased material, inconsistencies

Editorial StyleEthos Credibility

AuthorityMoral

Pathos FeelingsImaginationIdentification

Logos RationalityLogicConsistency

Editorial Style

Search Engine Optimisation

• Search Engine Optimisation (SEO)– Making your website visible

to search engines (Google)– Get your website to the top

of the result list!


• SEO is an obvious way to make users aware of your website– Technical aspect: Making sure the proper words

can be found on your website by search robots– Marketing aspect: Making sure your website

contains the words a typical user will use when searching for a website in your category. Getting other sites to link to your site.


• How is a page found by a Search Engine?

• Web Crawlers follow links – so make sure there are links to all your pages

• How is a page ranked by a Search Engine?

• Secret…!


• Page rankings– Internal factors – title, headings, body text, alter-

native text, keyword distribution, domain name– External factors – links from other pages. The

higher ranked the linking page is, the more the link will count. How often users click on the page in a search result list


• How can I know which keywords a typical user will use when searching for a similar website?

• Ask them!• A job for the Usability Lead• Google Adwords – suggestions

for keywords


• A Search Engine cannot see text in– Graphics (logos, banners, etc.)– Flash animations– Video– Audio (oh, really…)– Graphic links– Links depending on dynamic code


• A Search Engine may bypass a page if it– Has a very complex structure– Is heavily dynamic (CSS, JavaScript)– Contains many broken links– Contains complex/auto-generated links– Is flooded with keyword repetitions– Is created server-side– Loads very slowly


• So, I’m about to write material for my website…

• …what should I actually do…?


• Avoid writing consciously for SEO• Write for the readers, not for the engines• External factors are given more importance

than internal by modern search engines (Google)…

• …so the material must be interesting and relevant for actual human readers!


• Still, you can often hit two birds with one stone

• Review titles, headers, page bodies, etc – do they actually contain relevant words

• Take the user’s point-of-view – what would the typical user be looking for?


The Global Catastrophe

Bla bla bla bla bla…


World War II : The Global Catastrophe

Bla bla bla bla bla…


• Where to put keyword/phrases:– Page titles– Major headings– First content paragraphs– Text for links to other pages– Alternative text for images– HTML file names and directory names


• Grammatical form matters (Tiger <> Tigers)• Case does not matter (Tiger == tiger)• Context does not come automatically!• A Tiger is also a– Carnivore– Large cat– Panthera– Threatened species


• Enough is enough!• Delicate balance between

plentiful mentioning of keywords and ”keyword spamming”

• Exact limit unknown…• Rule of thumb, at most 5-8

% of total word count


• We can also ”optimise” the use of keywords with regards to humans

• Users do not divide their attention uniformly over a web page (eye-tracking studies)– Golden triangle– F pattern

Cat


• Most important in page rankings – other pages that link to your page!

• How to achieve that…?


• If the site is part of a large company– Request that main (often visited) company

pages link to your pages– Get included in site maps, etc.– Get featured in a ”what’s new” section on the

company home page


• If the site is a stand-alone site– Find link partners: You link to the partner, the

partner links to you (link building)– Potential link partner could be a ”complemen-

tary” company, not a competitor– Example: you sell swimsuits, the partner sells

sunglasses– Should be worthwhile for both sides


• Create links from other websites yourself– Find popular (and preferably

relevant…) blogs, forums, etc, and leave comments including links to your own website

– Sign up your website to link catalogs

• A delicate balance…

pba front-end

Documents

font sizeusers

right font

larger fonts

font funnywhen

alphabeta font

font elegantwhen

differentusing fonts

readablechoose fonts