"l'uso efficace di una tipografia corretta" @ wordcamp bologna 2013

WORDCAMP BOLOGNA - 9 Febbraio 2013

@WordcampBologna # WPCAMPBO13

L’uso efficace di una

tipografia correttadi MATTIA COMPAGNUCCI

Say Hello!

Mattia CompagnucciWeb, brand & type design.

Co-founder Fattelo!

www.mattiacompagnucci.com ~ www.fattelo.com

Twitter @matcompagnucci Facebook mattiacompagnucci.visualdesigner

TITILLIUM www.campivisivi.net/titillium/

Perché questo talk?Con la nuova dichiarazione @font-face siamo riusciti a liberarci dalla schiavitù delle font web-safe.Possiamo utilizzare un immaginario di caratteri vastissimo, abbiamo un potere enorme tra le mani.

“Da grandi poteri derivano grandi responsabilità”Peter Parker, Uomo Ragno

Di che cosa parleremo?- Del perchè e del come trattare correttamente la tipografia all’interno dei nostri progetti.

- Degli strumenti e risorse che abbiamo a nostra disposizione

La tipografia è importante,datele la giusta attenzione.

Perché?

“Parole scelte con cura meritano lettere scelte con cura…”

“Gli elementi dello stile tipografico” Robert Bringhurst

Video+

Immagini+

“La differenza tra una buona e una cattiva tipografia sembra avere un piccolo effetto su alcuni fattori come la velocità di lettura e la comprensione del

testo.”“The aesthetics of reading” Larson e Picard

Un buon uso della tipografia sembra indurre nell’utente un mood positivo.

Aumentando la comprensione dei contenuti.

“Parole scelte con cura meritano lettere scelte con cura, queste a loro volta meritano di essere composte con affetto, intelligenza, conoscenza

e abilità.”“Gli elementi dello stile tipografico” Robert Bringhurst

.1. Scegliere il giusto carattere

2. Impostare correttamente il contenuto della pagina

3. Gerarchizzare il contenuto

Scegliere un carattere coerente con il tono della comunicazione e ben progettato.

1. Scegliere il giusto carattere

Un tono?!?

1. Scegliere il giusto carattere- Il giusto tono

TI AMO

Ti amo

PROFESSIONALE

Quand’è ben progettato?

1. Scegliere il giusto carattere - Qualità progettuale

Quando ha un set di glifi completo.

Quando lo spazio tra coppie di caratteri è studiata caso per caso.

(kerning)

THE KERNING GAME http://type.method.ac/

SOTTO ANTIPASTO www.dafont.com/antipasto.font SOPRA NOVECENTO www.typography.synthview.com

Quando viene fornito con diverse forze d’asta.

GRETA SANS 10 pesi combinati in 4 larghezze(compressed, condensed, normal, expanded) http://www.typotheque.com/blog/greta_system

Quando è presente un vero corsivo.

Io sono forzato

Io sono disegnato

VOLKHOV www.fontsquirrel.com/fonts/volkhov

Quando presenta opzioni opentype.http://ie.microsoft.com/testdrive/graphics/opentype/opentype-fontbureau/index.html

ACTA POSTER www.dstype.com/fonts/acta-poster

Quando il carattere è ottimizzato per il web e viene visualizzato correttamente sui vari

browser e sistemi operativi.(operazione chiamata hinting)

Proxima Nova “a,” as renderizzata da tre differenti browser/sistemi operativi a 16px.“Type rendering on the web “ Typekit Blog

http://blog.typekit.com/2010/10/05/type-rendering-on-the-web/

Testate sempre i caratteri su diversi sistemi operativi e browser.

Una volta scelto il carattere dobbiamo scegliere che corpo utilizzare per il testo e

l’iterlinea del testo.

Il corpo del testo deve essere tale da avere tra 45-75 caratteri in una riga di testo.

Lorem Ipsum is simply dummy text of the printing and typeset-ting industry. Lorem Ipsum has been the industry’s standard dum-my text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has sur-vived not only five centuries, but also the leap into electronic type-setting, remaining essentially un-changed. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker inclu-ding versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus.

ADOBE GARAMOND PRO

75 caratteri

142 caratteri

28 caratteri

L’interlinea scelta deve far risultare il testo una texture omogenea di caratteri, senza

soffocare o disperdere il contenuto.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s,

when an unknown printer took a galley of type and scrambled it to make a type

specimen book. It has survived not only five centuries, but also the leap into

electronic typesetting, remaining essentially unchanged. It was popularised.

In the 1960s with the release of Letraset sheets containing Lorem Ipsum passa-ges, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.In the 1960s with the release of Letraset sheets containing Lorem Ipsum passa-ges, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum lorem Ipsum is simply.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker inclu-ding versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make.

ADOBE GARAMOND PRO

In media l’interlina dovrebbe essere il 20% in più del corpo scelto.

Per creare armonia all’interno della pagina ogni distanza dovrà essere un multiplo o

sottomultiplo dell’interlinea scelta.

-Diverso corpo del carattere- Forze d’asta diverse

- Varianti come il corsivo e il maiuscoletto- Spazio bianco per dividere i vari livelli di gerarchizzazione

- Colori differenti- Caratteri differenti (non più di due)

www.informationarchitects.net

iABC Font

www.ilovetypography.com

FF Scala Sans - FF Scala

www.scalafont.com

FF Basic Gothic Web Pro

www.typekit.com/fonts/ff-basic-gothic-web-pro

Il web è pieno di strumenti utili.

Dove trovare buoni caratteri?

Fontsquirrel (Free) www.fontsquirrel.com

Google Web Font (Free) www.google.com/webfonts

MyFonts (Free - Pay) http://www.myfonts.com/

Typekit (Free - Pay) www.typekit.com

Fontdeck (Pay) www.fontdeck.com

Fonts.com (Pay) www.fonts.com

Come testarli e scegliere le giuste combinazioni?

Web Font Specimen (Free) www.webfontspecimen.com

Scale & Rythm (Free) www.lamb.cc/typograph/

TypecastApp (Pay) www.typecast.com

C’è dell’altro?

“Gli elementi dello stile tipografico” Robert BringhurstThe Elements of Typographic Style Applied to the Web www.webtypography.net

Typophile www.typophile.com

Font-Face www.font-face.com

What’s the Font http://www.myfonts.com/WhatTheFont/

Thank you!

Mattia CompagnucciWeb, brand & type design.

Co-founder Fattelo!

www.mattiacompagnucci.com ~ www.fattelo.com

Twitter @matcompagnucci Facebook mattiacompagnucci.visualdesigner

"l'uso efficace di una tipografia corretta" @ wordcamp bologna 2013

Design

wordcamp toronto

tipografia arquitectonica

tipografia 01

tipografia cuestionario

tipografia express

ejercicio tipografia

tipografia leanny reina. seccion gh tipografia virtual

tipografia yule

tipografia creativa

wordcamp tokyo 2016から wordcamp tokyo 2017へ

wordcamp malaysia

2 tipografia

tipografia renascentista

tipografia informe

tipografia unr

wordcamp tokyo2016itkaasan

arquitectura tipografia

wordcamp 2010

wordcamp presentation

istruzioni per l'uso - gibertini.com · istruzioni per...