Typeface, Typography, Theme... Design matters.

transcript

Typeface, Typography, Theme…

@frederiquegame

Frédérique Game

Design matters

Frédérique Game

Designer & Consultant in editorial strategy and branding

My passions :

Typography - Design - Art - Innovation - User Experience

WordPress and the Web!

My aspiration :

Contribute to make the web pleasant, simple and efficient.

2WORDPRESS CAMP GENÈVE 2016@frederiquegame

www.frederiquegame.fr

95% of the content on the webis written language.

An good excellent web designer shouldget involved in the main discipline of shaping

written information: TYPOGRAPHY.

WEB DESIGN IS

95% TYPOGRAPHYOliver Reichenstein

what is it about ?

Typeface

In typography, a typeface (also known as FONT FAMILY) is a set of one or more FONTS

each composed of glyphs (which represents an individual letter, number, punctuation mark, or other

symbol) that share common design features.

Each font of a typeface has a specific weight, style, condensation, width, slant, italicization,

ornamentation, and designer or foundry.

Quick definitions

Graphic Art

Quick definitions

Classification

SerifSans Serif

The word “sans” is derived from the Old French word“sanz” meaning “without.”

Quick definitions

Main Sans Serif Fonts

Main Serif Fonts

+ subcategories as :monospace / cursive / roman

gothic / fantaisy...

Quick definitions

why does-it matter ?

To avoid this...

And present this...

Type choice, colors, proprieties matter.Type choice, colors, proprieties matter.Type choice, colors, proprieties matter.Type choice, colors, proprieties matter.Type choice, colors, proprieties matter.Type choice, colors, proprieties matter.Type choice, colors, proprieties matter.Type choice, colors, proprieties matter.Type choice, colors, proprieties matter.

Typography matters

to delever relevent messages

We love WordPress

& websites

We loveWordPress

& websites

We loveWordPress

& websites

We loveWordPress

& websites

Main question is : what is the tone of the message we want to deliver… Is it something serious, corporate, a little bit fantaisist,

classical, original, for men, for women, for the young…

Purpose consolidated by color choice and other rules, line-height etc...

We loveWordPress

& websites

Typography mattersto delever relevent messages

We love WordPress

We loveWordPress

Perception=

Strong /PowerfulSweet /FriendlyTrendy /Modern

TrustworthyBeautiful...

We loveWordPress

Typography matters

UnreadableUnreadable

Unreadablehumm...readable

readable

readableconfortable& accessible

Type choice, colors, proprietiesreally matter.

Typography matters

to allow access to anyone

Typography matters

to make content readable

Readability is the delivery of a clear and understandable message.

It refers to the recipient of the content.

Typography matters

to make content readableThe picture of Dorian Gray by Oscar Wilde

CHAPTER 1

The studio was filled with the rich odour of roses, and when the light summer wind stirred amidst the trees of the garden, there came through the open door the heavy scent of the lilac, or the more delicate perfume of the pink-flowering thorn.From the corner of the divan of Persian saddle-bags on which he was lying, smoking, as was his custom, innumerable cigarettes, Lord Henry Wotton could just catch the gleam of the honey-sweet and honey-coloured blossoms of a laburnum, whose tremulous branches seemed hardly able to bear the burden of a beauty so flamelike as theirs; and now and then the fantastic shadows of birds in flight flitted across the long tussore-silk curtains that were stretched in front of the huge window, producing a kind of momentary Japanese effect, and making him think of those pallid, jade-faced painters of Tokyo who, through the medium of an art that is necessarily immobile, seek to convey the sense of swiftness and motion.

The picture of Dorian Gray by Oscar Wilde

CHAPTER 1

The studio was filled with the rich odour of roses, and when the light summer wind stirred amidst the trees of the garden, there came through the open door the heavy scent of the lilac, or the more delicate perfume of the pink-flowering thorn.From the corner of the divan of Persian saddle-bags on which he was lying, smoking, as was his custom, innumerable cigarettes, mobile, seek to convey the sense of swiftness and motion.

Readability is not a measurable commodity.But it’s when it is scarcethat one realizes its necessity.

La lisibilité n’est pas une denrée mesurable.C’est pourtant quand elle se fait rare

que l’on se rend compte de sa nécessité.

How can we enhance our design ?

Be Global and Be Specific

My titleby Frédérique - 12th of November

Fonts, colors, rythme, alignments too. Typography is an art.And space areas allow the all layout to be strong.Line-height, contrast...

Other mentions, metas and so on...

Hierarchy of content.

Avoid NOISY pages :)

Typography is a question of LAYOUT, GLOBAL SETTINGS.And many little rules inside… Many particular propriety.

Harmonious grid...

Blank spaces

What's missing from your site is as important as what's in it.

The blank space of a page represents the parts that do not include neither text nor illustrations.

IT WOULD FACILITATE:

The processing of informationThe identification of important pointsThe concentration of visitors

Visual comfort

Be simple and Be clear

Hy Geneva :)

Which kind of Font ?Same size, but for a long reading, one is more confortable than the other...

ARIMO 12px AVENIR 12px

THE PICTURE OF DORIAN GRAY by Oscar Wilde

The studio was filled with the rich odour of roses, and

when the light summer wind stirred amidst the trees of

the garden, there came through the open door the

heavy scent of the lilac, or the more delicate perfume of

the pink-flowering thorn.

From the corner of the divan of Persian saddle-bags on

which he was lying, smoking, as was his custom,

innumerable cigarettes, Lord Henry Wotton could just

catch the gleam of the honey-sweet and

honey-coloured blossoms of a laburnum, whose

tremulous branches seemed hardly able to bear the

burden of a beauty so flamelike as theirs; and now and

then the fantastic shadows of birds in flight flitted

across the long tussore-silk...

AVENIR 12px AVENIR 12px + LINE-HEIGHT : 1.35

Combine Serif / Sans Serif

THE PICTURE OF DORIAN GRAYby Oscar Wilde

The studio was filled with the rich odour of roses,

and when the light summer wind stirred amidst

the trees of the garden, there came through the

open door the heavy scent of the lilac, or the more

delicate perfume of the pink-flowering thorn.

THE PICTURE OFDORIAN GRAYby Oscar Wilde

the garden, there came through the open door the heavy

scent of the lilac, or the more delicate perfume of the

pink-flowering thorn.

Open Sans + Baskerville (LH 1.35) Oswald + Quattrocento

The studio was filled with the rich odour of

roses, and when the light summer wind stirred

amidst the trees of the garden, there came

through the open door the heavy scent of the

lilac, or the more delicate perfume of the

pink-flowering thorn.

the garden, there came through the open door the

heavy scent of the lilac, or the more delicate perfume of

the pink-flowering thorn.

Fredericka + Quattrocento (14px/1.15) Imprima + Avenir (12px)

The studio was filled with the rich odour of roses, and when the light summer wind stirred amidst the trees of the garden, there came through the open door the heavy scent of the lilac, or the more delicate perfume of the pink-flowering thorn.

The studio was filled with the rich odour of roses, and when

the light summer wind stirred amidst the trees of the garden,

there came through the open door the heavy scent of the

lilac, or the more delicate perfume of the pink-flowering

thorn.

Antique Didone + Source SansPro (LH 1.3) PTSerif + Avenir

The studio was filled with the rich odour of roses, and when the light summer wind stirred amidst the trees of the garden, there came through the open door the heavy scent of the lilac, or the more delicate perfume of the pink-flowering thorn.

Prefer left alignment

in your choice of fonts...

Choosing Typeface(s)according to:

BrandingValuesStyle

ContentPurpose

photos via VisualHint

Quick test witha Wedding Planner Website

in your choice of fonts...E.g : Searching Typesor Glyphs for a wedding

planner webiste

Cochin / Lust Didone (same family)Traditional, Litterature, Classic...

Quick exercice, needs deeper research in colors, types, layout.

Fonts combined with images…Wahou !

Could be... amazing :)

Wedding Plannerservices

Wedding Planner

Typography matters

”Typography exists to honor content”

Robert Bringhurst / The elements of typographical style

L’objectif de tout projet web=

la satisfaction et le confort de l’utilisateur final

CSS for the WEBSome good pratices

font-family (named | serif | arial)

font-size (1.2em)

font-style (normal | italic | oblique)

font-variant (normal | small-caps)

font-weight (bold | bolder | 500)

text-align (left | right | center | justify)

text-decoration (none | underline | overline | line-through)

text-indent (5px)

text-transform (capitalize | uppercase | lowercase | none)

line-heigth (normal, 2, 50%)

letter-spacing (-2px)

word-spacing (3px)

CSS2 CSS3

word-wrap (normal | break-word)

text-overflow (clip |ellipsis |chaîne)

text-shadow (2px 2px 4px #999)

font-smoothing (none |

subpixel-antaliased | antaliased)white-space (nowrap | pre-line…)

font-stretch (wider | condensed…)

text-stroke (text-fill-color |

text-stroke-color | text-stroke-width)

text-wrap (normal | suppress…)

::first-letter selector

::first-line selector

Some CSS properties

CSS properties

FONT-FACEFONT SQUIRREL

GOOGLE FONTSor CDN (fontawesome)

TYPEKITFONTS.comTYPECAST.com

Upload your fonts to /theme/yourtheme/fonts

Add to functions.php Add to functions.php

@font-face

in stylesheet

Enqueue

wp_enqueue_style

Enqueue

wp_enqueue_script

p {font-family:’font’; font-size:1rem;}

Methods...

SOMES RULES (guides)

FONT SIZE : 16px, 1em, 1rem (100% on

<html>)

BOLD : better for headlines and links

LINKS : highlight

LINE HEIGHT : relative to main font size

TITLES : 30 to 40 characters per line

(MOBILE)

45 to 75 characters per line (DESKTOP)

Links, touchscreenmini

40 x 40 px

http://caniuse.comCheck out proprieties

http://w3.org

Little checklist…

Be careful with a set of common rules&

Design Globally and Specifically

Font Size / Line heightParagraph width

WhitespaceRythm

HierarchyLetter spacing

ContrastCombination

Design for the others ...

For ease of reading,their research, their navigation.

Let’s do Quality

Enjoy :)

Thank you !