typeface, typography, theme... design matters
TRANSCRIPT
![Page 1: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/1.jpg)
Typeface, Typography, Theme…
@frederiquegame
Frédérique Game
Design matters
![Page 2: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/2.jpg)
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
![Page 3: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/3.jpg)
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
![Page 4: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/4.jpg)
what is it about ?
4WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
![Page 5: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/5.jpg)
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
![Page 6: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/6.jpg)
Quick definitions
![Page 7: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/7.jpg)
Graphic Art
Quick definitions
![Page 8: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/8.jpg)
Classification
SerifSans Serif
The word “sans” is derived from the Old French word“sanz” meaning “without.”
Quick definitions
![Page 9: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/9.jpg)
Main Sans Serif Fonts
Main Serif Fonts
+ subcategories as :monospace / cursive / roman
gothic / fantaisy...
Quick definitions
![Page 10: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/10.jpg)
why does-it matter ?
10WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
![Page 11: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/11.jpg)
To avoid this...
![Page 12: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/12.jpg)
![Page 13: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/13.jpg)
And present this...
13WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
![Page 14: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/14.jpg)
14WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
![Page 15: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/15.jpg)
15WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
![Page 16: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/16.jpg)
16WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
![Page 17: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/17.jpg)
17WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
![Page 18: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/18.jpg)
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
![Page 19: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/19.jpg)
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
![Page 20: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/20.jpg)
We love WordPress
We loveWordPress
We loveWordPress
We loveWordPress
Perception=
Strong /PowerfulSweet /FriendlyTrendy /Modern
TrustworthyBeautiful...
We loveWordPress
Typography matters
![Page 21: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/21.jpg)
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
![Page 22: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/22.jpg)
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
![Page 23: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/23.jpg)
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.
![Page 24: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/24.jpg)
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
![Page 25: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/25.jpg)
How can we enhance our design ?
25WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
![Page 26: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/26.jpg)
Be Global and Be Specific
![Page 27: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/27.jpg)
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
![Page 28: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/28.jpg)
Harmonious grid...
28WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
![Page 29: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/29.jpg)
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
![Page 30: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/30.jpg)
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
![Page 31: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/31.jpg)
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
![Page 32: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/32.jpg)
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
![Page 33: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/33.jpg)
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)
![Page 34: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/34.jpg)
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
![Page 35: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/35.jpg)
35WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
![Page 36: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/36.jpg)
36WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
![Page 37: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/37.jpg)
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
![Page 38: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/38.jpg)
in your choice of fonts...
Choosing Typeface(s)according to:
BrandingValuesStyle
ContentPurpose
38WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
![Page 39: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/39.jpg)
photos via VisualHint
Quick test witha Wedding Planner Website
39WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
![Page 40: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/40.jpg)
in your choice of fonts...E.g : Searching Typesor Glyphs for a wedding
planner webiste
![Page 41: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/41.jpg)
Cochin / Lust Didone (same family)Traditional, Litterature, Classic...
Quick exercice, needs deeper research in colors, types, layout.
![Page 42: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/42.jpg)
Fonts combined with images…Wahou !
Could be... amazing :)
Wedding Plannerservices
Wedding Planner
![Page 43: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/43.jpg)
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
![Page 44: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/44.jpg)
CSS for the WEBSome good pratices
44WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
![Page 45: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/45.jpg)
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
![Page 46: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/46.jpg)
CSS properties
46WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
![Page 47: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/47.jpg)
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
![Page 48: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/48.jpg)
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
![Page 49: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/49.jpg)
49WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
Links, touchscreenmini
40 x 40 px
![Page 50: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/50.jpg)
http://caniuse.comCheck out proprieties
http://w3.org
50WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr
![Page 51: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/51.jpg)
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
![Page 52: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/52.jpg)
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
![Page 53: Typeface, Typography, Theme... Design matters](https://reader033.vdocuments.net/reader033/viewer/2022051300/58eec5111a28abbc7e8b45ed/html5/thumbnails/53.jpg)
Thank you !
53WORDPRESS CAMP GENÈVE 2016@frederiquegame
www.frederiquegame.fr