Typeface, Typography, Theme... Design matters.
Post on 13-Apr-2017
283 Views
Preview:
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.
3WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
WEB DESIGN IS
95% TYPOGRAPHYOliver Reichenstein
what is it about ?
4WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
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
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 ?
10WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
To avoid this...
And present this...
13WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
14WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
15WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
16WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
17WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
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
We loveWordPress
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
21WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
Typography matters
to make content readable
Readability is the delivery of a clear and understandable message.
It refers to the recipient of the content.
22WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
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é.
24WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
How can we enhance our design ?
25WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
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.
27WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
Harmonious grid...
28WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
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 :)
29WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
Be simple and Be clear
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 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
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.
Which kind of Font ?Same size, but for a long reading, one is more confortable than the other...
ARIMO 12px AVENIR 12px
Be simple and Be clear
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 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
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 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.
Open Sans + Baskerville (LH 1.35) Oswald + Quattrocento
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 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.
Fredericka + Quattrocento (14px/1.15) Imprima + Avenir (12px)
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 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
35WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
36WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
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.
Prefer left alignment
37WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
in your choice of fonts...
Choosing Typeface(s)according to:
BrandingValuesStyle
ContentPurpose
38WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
photos via VisualHint
Quick test witha Wedding Planner Website
39WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
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
44WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
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
46WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
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
USE
p {font-family:’font’; font-size:1rem;}
Methods...
47WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
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)
48WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
49WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
Links, touchscreenmini
40 x 40 px
http://caniuse.comCheck out proprieties
http://w3.org
50WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
Little checklist…
Be careful with a set of common rules&
Design Globally and Specifically
Font Size / Line heightParagraph width
WhitespaceRythm
HierarchyLetter spacing
ContrastCombination
51WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
Design for the others ...
For ease of reading,their research, their navigation.
Let’s do Quality
Enjoy :)
52WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
Thank you !
53WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
top related