Tipografia en La WEB

Tipografía en la web
“Typography exists to honor content.”

—Robert Bringhurst
Fuentes seguras
Fuentes seguras para la web
Serif: Georgia, Times New Roman, Trebuchet MS


Sans-Serif : Arial, Arial Black, Impact

Monospace: Courier, “Ms Courier New”, Prestige

Cursive: Lucida Handwriting, “Zapf-Chancery”

Cursive: Lucida Handwriting, “Zapf-Chancery”
Fantasy: comic sans
p{
font-family: Georgia, Times New Roman; serif;
}
p{
font-family:rial, Arial Black, sans-serif;
}
Personalidad en una letra
¿qué me pongo?
¿qué me pongo?
¿qué me pongo?
¿qué me pongo? ¿qué me pongo?
¿qué me pongo?
Alfabeto cuneiforme Alfabeto fenicio
http://commons.wikimedia.org/w/index.php?title=File:Runic_letters_elder_futhark.svg&page=1
http://commons.wikimedia.org/w/index.php?title=File:Phoenician_alphabet.svg&page=1
Maecenas fringilla, neque eu dictum tincidunt Maecenas fringilla, neque eu dictum tincidunt
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel enim elit, in
enim elit, in luctus augue. Praesent eu risus in augue mattis accum- luctus augue. Praesent eu risus in augue mattis accumsan. Morbi placerat neque
san. Morbi placerat neque sed augue fringilla nec varius dui iaculis. sed augue fringilla nec varius dui iaculis. Integer sit amet urna nec magna euis-
Integer sit amet urna nec magna euismod molestie. Nulla semper, velit mod molestie. Nulla semper, velit a lacinia aliquet, massa diam tincidunt est,
a lacinia aliquet, massa diam tincidunt est, pharetra scelerisque neque pharetra scelerisque neque sapien eget lectus. Pellentesque habitant morbi tristi-
sapien eget lectus. Pellentesque habitant morbi tristique senectus et que senectus et netus et malesuada fames ac turpis egestas. Fusce sem nibh,
netus et malesuada fames ac turpis egestas. Fusce sem nibh, sollicitu- sollicitudin condimentum lacinia sed, elementum vel erat. Mauris aliquet biben-
din condimentum lacinia sed, elementum vel erat. Mauris aliquet dum malesuada. Ut in velit vestibulum nisl lacinia ultricies eleifend vitae diam.
bibendum malesuada. Ut in velit vestibulum nisl lacinia ultricies elei- Etiam quam eros, ultrices at malesuada quis, molestie id orci. Maecenas ultricies
fend vitae diam. Etiam quam eros, ultrices at malesuada quis, molestie metus non dui laoreet hendrerit.
id orci. Maecenas ultricies metus non dui laoreet hendrerit. Duis feugiat, nibh vitae commodo tempus, lacus augue imperdiet justo, eu viverra
Duis feugiat, nibh vitae commodo tempus, lacus augue imperdiet arcu orci quis ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et
justo, eu viverra arcu orci quis ipsum. Vestibulum ante ipsum primis in ultrices posuere cubilia Curae; Integer id massa lectus, eu vulputate nisi. Morbi
faucibus orci luctus et ultrices posuere cubilia Curae; Integer id massa imperdiet euismod diam, ornare posuere erat interdum sit amet. Suspendisse
lectus, eu vulputate nisi. Morbi imperdiet euismod diam, ornare posue- imperdiet, orci in congue dictum, felis sapien eleifend erat, a vehicula ipsum
re erat interdum sit amet. Suspendisse imperdiet, orci in congue magna vel ante. Phasellus urna ante, molestie non imperdiet eu, elementum a
dictum, felis sapien eleifend erat, a vehicula ipsum magna vel ante. nibh. Maecenas fringilla, neque eu dictum tincidunt, justo leo lobortis sapien, et
Phasellus urna ante, molestie non imperdiet eu, elementum a nibh. porta leo nibh vel sem. Etiam et mauris elit. Mauris nisi est, sodales a pretium
Maecenas fringilla, neque eu dictum tincidunt, justo leo lobortis sapien, vel, ultrices in dolor. Cras sed mauris libero. Aenean nunc felis, ultrices vel
et porta leo nibh vel sem. Etiam et mauris elit. Mauris nisi est, sodales pellentesque et, egestas vel turpis. Praesent quis vulputate purus. Suspendisse
a pretium vel, ultrices in dolor. Cras sed mauris libero. Aenean nunc placerat rutrum neque bibendum condimentum. Nullam sed elit non nunc portti-
felis, ultrices vel pellentesque et, egestas vel turpis. Praesent quis tor convallis.
vulputate purus. Suspendisse placerat rutrum neque bibendum condi- Phasellus fringilla suscipit ligula, non lacinia sem rutrum nec. Nulla sem ipsum,
mentum. Nullam sed elit non nunc porttitor convallis. dapibus non pretium eget, cursus eu diam. Donec gravida lacinia metus, eu
Phasellus fringilla suscipit ligula, non lacinia sem rutrum nec. Nulla tempor magna aliquam vel. Proin sed venenatis risus. Praesent vehicula molestie
sem ipsum, dapibus non pretium eget, cursus eu diam. Donec gravida pellentesque. Fusce quis est nec lacus tincidunt fermentum. Nulla pulvinar male-
lacinia metus, eu tempor magna aliquam vel. Proin sed venenatis suada tincidunt. Pellentesque habitant morbi tristique senectus et netus et male-
risus. Praesent vehicula molestie pellentesque. Fusce quis est nec suada fames ac turpis egestas.
lacus tincidunt fermentum. Nulla pulvinar malesuada tincidunt. Pellen- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae porta
tesque habitant morbi tristique senectus et netus et malesuada fames tortor. Nunc imperdiet magna sed justo consequat in aliquam erat luctus. Integer
ac turpis egestas. consequat fringilla lorem quis dignissim. Morbi pellentesque pulvinar luctus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae Nam eu dapibus mauris. Donec eleifend enim sapien, in sollicitudin metus.
porta tortor. Nunc imperdiet magna sed justo consequat in aliquam Aliquam ornare auctor nulla, id pulvinar velit mattis nec. Mauris quam orci,
Maecenas fringilla, neque eu dictum tincidunt Maecenas fringilla, neque eu dictum tincidunt
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel enim
enim elit, in luctus augue. Praesent eu risus in augue mattis accum- elit, in luctus augue. Praesent eu risus in augue mattis accumsan. Morbi
san. Morbi placerat neque sed augue fringilla nec varius dui iaculis. placerat neque sed augue fringilla nec varius dui iaculis. Integer sit amet
Integer sit amet urna nec magna euismod molestie. Nulla semper, velit urna nec magna euismod molestie. Nulla semper, velit a lacinia aliquet,
a lacinia aliquet, massa diam tincidunt est, pharetra scelerisque neque massa diam tincidunt est, pharetra scelerisque neque sapien eget lectus.
sapien eget lectus. Pellentesque habitant morbi tristique senectus et Pellentesque habitant morbi tristique senectus et netus et malesuada
netus et malesuada fames ac turpis egestas. Fusce sem nibh, sollicitu- fames ac turpis egestas. Fusce sem nibh, sollicitudin condimentum lacinia
din condimentum lacinia sed, elementum vel erat. Mauris aliquet sed, elementum vel erat. Mauris aliquet bibendum malesuada. Ut in velit
bibendum malesuada. Ut in velit vestibulum nisl lacinia ultricies elei- vestibulum nisl lacinia ultricies eleifend vitae diam. Etiam quam eros,
fend vitae diam. Etiam quam eros, ultrices at malesuada quis, molestie ultrices at malesuada quis, molestie id orci. Maecenas ultricies metus non
id orci. Maecenas ultricies metus non dui laoreet hendrerit. dui laoreet hendrerit.
Duis feugiat, nibh vitae commodo tempus, lacus augue imperdiet Duis feugiat, nibh vitae commodo tempus, lacus augue imperdiet justo, eu
justo, eu viverra arcu orci quis ipsum. Vestibulum ante ipsum primis in viverra arcu orci quis ipsum. Vestibulum ante ipsum primis in faucibus
faucibus orci luctus et ultrices posuere cubilia Curae; Integer id massa orci luctus et ultrices posuere cubilia Curae; Integer id massa lectus, eu
lectus, eu vulputate nisi. Morbi imperdiet euismod diam, ornare posue- vulputate nisi. Morbi imperdiet euismod diam, ornare posuere erat inter-
re erat interdum sit amet. Suspendisse imperdiet, orci in congue dum sit amet. Suspendisse imperdiet, orci in congue dictum, felis sapien
dictum, felis sapien eleifend erat, a vehicula ipsum magna vel ante. eleifend erat, a vehicula ipsum magna vel ante. Phasellus urna ante,
Phasellus urna ante, molestie non imperdiet eu, elementum a nibh. molestie non imperdiet eu, elementum a nibh. Maecenas fringilla, neque eu
Maecenas fringilla, neque eu dictum tincidunt, justo leo lobortis sapien, dictum tincidunt, justo leo lobortis sapien, et porta leo nibh vel sem.
et porta leo nibh vel sem. Etiam et mauris elit. Mauris nisi est, sodales Etiam et mauris elit. Mauris nisi est, sodales a pretium vel, ultrices in
a pretium vel, ultrices in dolor. Cras sed mauris libero. Aenean nunc dolor. Cras sed mauris libero. Aenean nunc felis, ultrices vel pellentes-
felis, ultrices vel pellentesque et, egestas vel turpis. Praesent quis que et, egestas vel turpis. Praesent quis vulputate purus. Suspendisse
vulputate purus. Suspendisse placerat rutrum neque bibendum condi- placerat rutrum neque bibendum condimentum. Nullam sed elit non nunc
mentum. Nullam sed elit non nunc porttitor convallis. porttitor convallis.
Phasellus fringilla suscipit ligula, non lacinia sem rutrum nec. Nulla Phasellus fringilla suscipit ligula, non lacinia sem rutrum nec. Nulla sem
sem ipsum, dapibus non pretium eget, cursus eu diam. Donec gravida ipsum, dapibus non pretium eget, cursus eu diam. Donec gravida lacinia
lacinia metus, eu tempor magna aliquam vel. Proin sed venenatis metus, eu tempor magna aliquam vel. Proin sed venenatis risus. Praesent
risus. Praesent vehicula molestie pellentesque. Fusce quis est nec vehicula molestie pellentesque. Fusce quis est nec lacus tincidunt fer-
lacus tincidunt fermentum. Nulla pulvinar malesuada tincidunt. Pellen- mentum. Nulla pulvinar malesuada tincidunt. Pellentesque habitant morbi
tesque habitant morbi tristique senectus et netus et malesuada fames tristique senectus et netus et malesuada fames ac turpis egestas.
ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae porta tortor. Nunc imperdiet magna sed justo consequat in aliquam erat
porta tortor. Nunc imperdiet magna sed justo consequat in aliquam luctus. Integer consequat fringilla lorem quis dignissim. Morbi pellen-
Maecenas fringilla, neque eu dictum tincidunt
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel enim Maecenas fringilla, neque eu dictum tincidunt
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

elit, in luctus augue. Praesent eu risus in augue mattis accumsan. Morbi
placerat neque sed augue fringilla nec varius dui iaculis. Integer sit amet
Aenean vel enim elit, in luctus augue. Praesent eu risus in
urna nec magna euismod molestie. Nulla semper, velit a lacinia aliquet,
massa diam tincidunt est, pharetra scelerisque neque sapien eget lectus.
Pellentesque habitant morbi tristique senectus et netus et malesuada augue mattis accumsan. Morbi placerat neque sed augue frin-
fames ac turpis egestas. Fusce sem nibh, sollicitudin condimentum lacinia
sed, elementum vel erat. Mauris aliquet bibendum malesuada. Ut in velit gilla nec varius dui iaculis. Integer sit amet urna nec magna
vestibulum nisl lacinia ultricies eleifend vitae diam. Etiam quam eros,
ultrices at malesuada quis, molestie id orci. Maecenas ultricies metus non euismod molestie. Nulla semper, velit a lacinia aliquet, massa
diam tincidunt est, pharetra scelerisque neque sapien eget lectus.

dui laoreet hendrerit.
Duis feugiat, nibh vitae commodo tempus, lacus augue imperdiet justo, eu
Pellentesque habitant morbi tristique senectus et netus et male-
viverra arcu orci quis ipsum. Vestibulum ante ipsum primis in faucibus
orci luctus et ultrices posuere cubilia Curae; Integer id massa lectus, eu
vulputate nisi. Morbi imperdiet euismod diam, ornare posuere erat inter- suada fames ac turpis egestas. Fusce sem nibh, sollicitudin
dum sit amet. Suspendisse imperdiet, orci in congue dictum, felis sapien
eleifend erat, a vehicula ipsum magna vel ante. Phasellus urna ante, condimentum lacinia sed, elementum vel erat. Mauris aliquet
molestie non imperdiet eu, elementum a nibh. Maecenas fringilla, neque eu
dictum tincidunt, justo leo lobortis sapien, et porta leo nibh vel sem. bibendum malesuada. Ut in velit vestibulum nisl lacinia ul-
tricies eleifend vitae diam. Etiam quam eros, ultrices at ma-

Etiam et mauris elit. Mauris nisi est, sodales a pretium vel, ultrices in
dolor. Cras sed mauris libero. Aenean nunc felis, ultrices vel pellentes-
lesuada quis, molestie id orci. Maecenas ultricies metus non
que et, egestas vel turpis. Praesent quis vulputate purus. Suspendisse
placerat rutrum neque bibendum condimentum. Nullam sed elit non nunc
porttitor convallis. dui laoreet hendrerit.
Phasellus fringilla suscipit ligula, non lacinia sem rutrum nec. Nulla sem
ipsum, dapibus non pretium eget, cursus eu diam. Donec gravida lacinia Duis feugiat, nibh vitae commodo tempus, lacus augue imper-
metus, eu tempor magna aliquam vel. Proin sed venenatis risus. Praesent
vehicula molestie pellentesque. Fusce quis est nec lacus tincidunt fer- diet justo, eu viverra arcu orci quis ipsum. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia

mentum. Nulla pulvinar malesuada tincidunt. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.
Curae; Integer id massa lectus, eu vulputate nisi. Morbi im-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae
porta tortor. Nunc imperdiet magna sed justo consequat in aliquam erat
luctus. Integer consequat fringilla lorem quis dignissim. Morbi pellen- perdiet euismod diam, ornare posuere erat interdum sit amet.
Lorem ipsum Lorem ipsum
http://pentagram.com/what-type-are-you/
Mapa de caracteres
abc … ?¿^*¨Ç_:;¢∞¬ı˝•£‰ ⁄‘’≈¸˛ˆ±«»—
Codificación del alfabeto natural
http://es.wikipedia.org/wiki/Codificaci%C3%B3n_de_caracteres
Entidades HTML
http://ascii.cl/es/codigos-html.htm
http://www.u-tokyo.ac.jp/index_j.html
http://muji.net
http://www.dafont.com/es/lost-in-the-sound.font
http://www.dafont.com/es/bebas-neue.font
http://www.dafont.com/es/znikomit.font
http://es.wikipedia.org/wiki/OpenType
https://www.fontfont.com/fonts/amman-sans/thin#tab-glyphs
http://www.fonts.com/font/linotype/excelsior
http://www.fonts.com/font/linotype/excelsior/complete-family-pack
http://www.fonts.com/font/linotype/neue-frutiger/light/web-font
Historias de la letra
Diferentes vestimentas para una misma estructura
evolución histórica
serifas triangulares remates filiformes egipcias palo seco

e
VENECIANAS, mediados s.XV
Centaur
Lorem ipsum
ANTIGUAS, s.XVI
Garamond
Lorem ipsum
e
e f
DE TRANSICIÓN, s.XV
Baskerville
Lorem ipsum
e f
MODERNAS, s.XVIII
Didot
Lorem ipsum
e L
EGIPCIAS, s.XIX
Rockwell
Lorem ipsum
e
GROTESCAS, s.XX
Helvética
Lorem ipsum

e

ee

e ee

e ee e

e ee e e

e ee e e e

Serifas vs. Palo seco
“Pero quizás es más seguro restringirse en decir que tienen gracia las
letras cuando parecen escritas no ya con desgano o con priso siono
más bien con empeño y esfuerzo, con felicidad y amor”
—Giambattista Bodoni
Serifas Palo seco
Serifas Palo seco
No es un combate de boxeo
Serifas Palo seco

Hablamos de entender cómo son las formas de las letras y cómo nombrarlas
Serifas Palo seco

Hablamos de entender cómo son las formas de las letras y cómo nombrarlas
Todo tiene su razón
Serifas Palo seco

Variables para reconocer una letra
Modulación
Remates / Serifas / Gracias
Peso
Altura x
Contraste
Modulación
Peso
Altura x
Contraste
E
Modulación
Peso
Altura x
Contraste
E Times
Modulación
Peso
Altura x
Contraste
E Times
Modulación
Peso
Altura x
Contraste
E Times
Serif:
Times New Roman
Georgia
Modulación
Peso
Altura x
Contraste
E Times
Modulación
Peso
Altura x
Contraste
E Times
Modulación
Peso
Altura x
Contraste
E Times
E
Modulación
Peso
Altura x
Contraste
E Times
E
Helvética
Modulación
Peso
Altura x
Contraste
Modulación
Peso
Altura x
Contraste
E
Modulación
Peso
Altura x
Contraste
E
Helvética
Modulación
Peso
Altura x
Contraste
E
Helvética
Sans-Serif:
Verdana
Arial
Modulación
Peso
Altura x
Contraste
Modulación
Peso
Altura x
Contraste
E
Modulación
Peso
Altura x
Contraste
E Times
Modulación
Peso
Altura x
Contraste
E Times
E
Modulación
Peso
Altura x
Contraste
E Times
E
Helvética
Modulación
Peso
Altura x
Contraste
AAA
Modulación
Peso
Altura x
Contraste
AAA
Modulación
Peso
Altura x
Contraste
Verdana 18 Georgia 18
En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un
hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de algo más hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de algo más
vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, lantejas los viernes, algún vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, lantejas los viernes, algún
palomino de aña didura los domingos, consumían las tres partes de su hacienda. palomino de aña didura los domingos, consumían las tres partes de su hacienda.
Verdana 18
En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho
tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín
flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más
noches, duelos y quebrantos los sábados, lantejas los viernes, algún palomino de
aña didura los domingos, consumían las tres partes de su hacienda.
ejemplo web: www.the greatdiscontent.com
http://www.linotype.com/es/1990/muestrasactuales.html#30886
http://www.linotype.com/catalog/view/imageview.php?name=http://image.linotype.com/
fontlounge/fontsinuse/gamesinner_gr.gif&title=Fonts+in+Use
titulares con sans serif

texto: serifa
¿Las tipografías hablan idiomas?
http://wikipedia.org
http://www.wordreference.com/enko/thank%20you
http://www.wordreference.com/
http://www.u-tokyo.ac.jp/index_j.html
http://muji.net
http://www.dafont.com/es/lost-in-the-sound.font
http://www.dafont.com/es/bebas-neue.font
http://www.dafont.com/es/znikomit.font
http://es.wikipedia.org/wiki/OpenType
https://www.fontfont.com/fonts/amman-sans/thin#tab-glyphs
http://www.fonts.com/font/linotype/excelsior
http://www.fonts.com/font/linotype/excelsior/complete-family-pack
http://www.fonts.com/font/linotype/neue-frutiger/light/web-font
Los usos de algunas letras
Garamond
LOREM IPSUM dolor sit amet, consectetur adipiscing elit.
Aenean vitae urna nisl. Etiam tempor tempor consectetur. Nunc arcu diam, accumsan eget feugiat non,
luctus non mi. Sed risus sapien, semper sit amet eleifend id, convallis vitae neque. In convallis biben-
dum erat, sed rutrum est sagittis sit amet. Nulla facilisi. Aliquam lectus nibh, congue sed imperdiet nec,
posuere non turpis. Aenean mauris mi, aliquam id convallis sit amet, vestibulum sed massa. Thusce ves-
tibulum quam in magna mattis vel vehicula eros mollis.
Quisque iaculis sapien in elit blandit et sagittis est cursus. Vivamus a risus eget odio auctor ccumsan leo mollis vehicula. Fusce nec neque vestibulum leo adipiscing condimentum quis vitae
tpsum adipiscing quis posuere metus interdum. Mauris semper dictum auctor. Fusce pulvinar ipsum vitae enim egestas non sodales libero consectetur. Morbi diam justo, pulvinar quis tempor
ut, laoreet vel est
Times
LOREM IPSUM dolor sit amet,
consectetur adipiscing elit.
Aenean vitae urna nisl. Etiam tempor tempor consectetur. Nunc arcu diam, accumsan eget feugiat non, luctus non mi. Sed risus
sapien, semper sit amet eleifend id, convallis vitae neque. In convallis bibendum erat, sed rutrum est sagittis sit amet. Nulla facilisi.
Aliquam lectus nibh, congue sed imperdiet nec, posuere non turpis. Aenean mauris mi, aliquam id convallis sit amet, vestibulum sed
massa. Thusce vestibulum quam in magna mattis vel vehicula eros mollis.
Quisque iaculis sapien in elit blandit et sagittis est cursus. Vivamus a risus eget odio auctor ccumsan leo mollis vehicula. Fusce nec neque vestibulum leo adipiscing
condimentum quis vitae tpsum adipiscing quis posuere metus interdum. Mauris semper dictum auctor. Fusce pulvinar ipsum vitae enim egestas non sodales libero
consectetur. Morbi diam justo, pulvinar quis tempor ut, laoreet vel est
Optima
Aenean vitae urna nisl. Etiam tempor tempor consectetur. Nunc arcu diam, accumsan eget feugiat non, luctus non mi. Sed
risus sapien, semper sit amet eleifend id, convallis vitae neque. In convallis bibendum erat, sed rutrum est sagittis sit amet.
Nulla facilisi. Aliquam lectus nibh, congue sed imperdiet nec, posuere non turpis. Aenean mauris mi, aliquam id convallis
sit amet, vestibulum sed massa. Thusce vestibulum quam in magna mattis vel vehicula eros mollis.
Quisque iaculis sapien in elit blandit et sagittis est cursus. Vivamus a risus eget odio auctor ccumsan leo mollis vehicula. Fusce nec neque vestibulum leo
adipiscing condimentum quis vitae tpsum adipiscing quis posuere metus interdum. Mauris semper dictum auctor. Fusce pulvinar ipsum vitae enim egestas non
sodales libero consectetur. Morbi diam justo, pulvinar quis tempor ut, laoreet vel est
FUTURA
LOREM IPSUM dolor sit amet, consectetur adipiscing elit.
Aenean vitae urna nisl. Etiam tempor tempor consectetur. Nunc arcu diam, accumsan eget feu-
giat non, luctus non mi. Sed risus sapien, semper sit amet eleifend id, convallis vitae neque. In
convallis bibendum erat, sed rutrum est sagittis sit amet. Nulla facilisi. Aliquam lectus nibh,
congue sed imperdiet nec, posuere non turpis. Aenean mauris mi, aliquam id convallis sit amet,
vestibulum sed massa. Thusce vestibulum quam in magna mattis vel vehicula eros mollis.
Quisque iaculis sapien in elit blandit et sagittis est cursus. Vivamus a risus eget odio auctor ccumsan leo mollis vehicula. Fusce nec neque vestibulum leo adipiscing condimentum
quis vitae tpsum adipiscing quis posuere metus interdum. Mauris semper dictum auctor. Fusce pulvinar ipsum vitae enim egestas non sodales libero consectetur. Morbi diam justo,
pulvinar quis tempor ut, laoreet vel est
.&5"
-03&.*146.EPMPSTJUBNFU DPOTFDUFUVSBEJQJTDJOHFMJU
"FOFBOWJUBFVSOBOJTM&UJBNUFNQPSUFNQPSDPOTFDUFUVS/VOD
BSDVEJBN BDDVNTBOFHFUGFVHJBUOPO MVDUVTOPONJ4FESJTVT
TBQJFO TFNQFSTJUBNFUFMFJGFOEJE DPOWBMMJTWJUBFOFRVF*O
DPOWBMMJTCJCFOEVNFSBU TFESVUSVNFTUTBHJUUJTTJUBNFU/VMMB
GBDJMJTJ"MJRVBNMFDUVTOJCI DPOHVFTFEJNQFSEJFUOFD QPTVF
SFOPOUVSQJT"FOFBONBVSJTNJ BMJRVBNJEDPOWBMMJTTJUBNFU
WFTUJCVMVNTFENBTTB5IVTDFWFTUJCVMVNRVBNJONBHOB
NBUUJTWFMWFIJDVMBFSPTNPMMJT
2VJTRVFJBDVMJTTBQJFOJOFMJUCMBOEJUFUTBHJUUJTFTUDVSTVT7JWBNVTBSJTVTFHFUPEJPBVDUPSDDVNTBOMFP
NPMMJTWFIJDVMB'VTDFOFDOFRVFWFTUJCVMVNMFPBEJQJTDJOHDPOEJNFOUVNRVJTWJUBFUQTVNBEJQJTDJOHRVJT
QPTVFSFNFUVTJOUFSEVN.BVSJTTFNQFSEJDUVNBVDUPS'VTDFQVMWJOBSJQTVNWJUBFFOJNFHFTUBTOPOTPEB
MFTMJCFSPDPOTFDUFUVS.PSCJEJBNKVTUP QVMWJOBSRVJTUFNQPSVU MBPSFFUWFMFTU
GOTHAM
luctus non mi. Sed risus sapien, semper sit amet eleifend id, convallis vitae neque. In convallis bibendum
erat, sed rutrum est sagittis sit amet. Nulla facilisi. Aliquam lectus nibh, congue sed imperdiet nec, posuere
non turpis. Aenean mauris mi, aliquam id convallis sit amet, vestibulum sed massa. Thusce vestibulum quam
in magna mattis vel vehicula eros mollis.
Quisque iaculis sapien in elit blandit et sagittis est cursus. Vivamus a risus eget odio auctor ccumsan leo mollis vehicula. Fusce nec neque
vestibulum leo adipiscing condimentum quis vitae tpsum adipiscing quis posuere metus interdum. Mauris semper dictum auctor. Fusce
pulvinar ipsum vitae enim egestas non sodales libero consectetur. Morbi diam justo, pulvinar quis tempor ut, laoreet vel est
Preparación de nuestro diseño
Resetear todo
Contraste
Tamaño
Jerarquía
Leading
Ritmo vertical
Utilidades web
Para hacerte más sencilla tu vida
http://es.lipsum.com/feed/html
http://pxtoem.com/
http://www.identifont.com/index.html
http://www.myfonts.com/WhatTheFont/
http://font-combinator.com/
http://fonttester.org/
http://www.csstypeset.com/
http://letteringjs.com/
http://www.kernjs.com/
Preparación de nuestro diseño
Tamaño
{font-size}
Tamaño // medidas tipográficas
Absolutas Relativas
in = pulgadas em = relativa al elemento

cm = centímetros ex = relativa a la altura x
mm = milímetros rem = relativa a la raíz
pt = puntos …
pc = picas
px = pixeles
Absolutas Relativas
in = pulgadas em = relativa al elemento

cm = centímetros ex = relativa a la altura x
mm = milímetros rem = relativa a la raíz
pt = puntos …
pc = picas
px = pixeles
Absolutas Relativas
px = pixeles em = relativa al elemento

rem = relativa a la raíz
No hay una técnica perfecta.

Px
• IE9 no puede cambiar el tamaño especifiado en px.
• Es un técnica muy precisa
• Poco flexible y accesible para dispositivos

EM
• Es una unidad relativa a los padres
• Problemas con los objetos anidados, ya que heredan los valores
• Es una técnica que proporciona flexibilidad entre dispositivos y
plataformas
• Tenemos que utilizar un poco la calculadora

REM
• Es una unidad relativa a la raíz del documento
• Es una técnica que proporciona flexibilidad entre dispositivos y
plataformas
1 em ≠ 1 em
M
#box1 {
M
#box2 {
font-size:12px; font-size:60px;
width:1em; width:1em;
height:1em; height:1em;
border:1px solid border:1px solid
black } black }
El texto por defecto en el navegador = 16px

12 pt impresos ≈ 16 px en pantalla
Tamaño deseado / tamaño por defecto del navegador = medida em
16px / 16px= 1 em
24px/16px=1.5 em
36px / 16px=2.25 em
Jerarquía
Jerarquía
<H1>
<H2>
<H3>
<H4>
<h5>
<h6>
Jerarquía
H1: 48 píxeles (3em)

H2: 36 píxeles (2.25em)
Body: 16 píxeles (1em)
Jerarquía
Interlineado
{line-height}
Ritmo vertical
Leading (interlineado)
interlineado
Interlineado Espacio de la línea
Leading
interlineado
Interlineado
Leading
Interlineado 150%
Leading
Cáculo de la medida para la línea base
Tamaño tipografía / medida línea base deseada = medida em
16px / 24px= 1.5 em

p {
font-size: 1em;
line-height: 1.5em }
Altura de la x
Pixel Pixel Pixel

Mancha de texto
En un lugar de la Mancha, de cuyo nombre no quiero En un lugar de la Mancha, de cuyo nombre no quiero
acordarme, no ha mucho tiempo que vivía un hidalgo acordarme, no ha mucho tiempo que vivía un hidalgo de los de
de los de lanza en astillero, adarga antigua, rocín lanza en astillero, adarga antigua, rocín flaco y galgo corredor.
flaco y galgo corredor. Una olla de algo más vaca que Una olla de algo más vaca que carnero, salpicón las más
noches, duelos y quebrantos los sábados, lantejas los viernes,
carnero, salpicón las más noches, duelos y quebrantos
algún palomino de aña didura los domingos, consumían las
los sábados, lantejas los viernes, algún palomino de
tres partes de su hacienda.
aña didura los domingos, consumían las tres partes de
su hacienda.
En un lugar de la Mancha, de cuyo En un lugar de la Mancha, de cuyo
nombre no quiero acordarme, no ha nombre no quiero acordarme, no ha
mucho tiempo que vivía un hidalgo mucho tiempo que vivía un hidalgo de los
de los de lanza en astillero, adarga de lanza en astillero, adarga antigua,
antigua, rocín flaco y galgo rocín flaco y galgo corredor. Una olla de
corredor. Una olla de algo más vaca algo más vaca que carnero, salpicón las
que carnero, salpicón las más más noches, duelos y quebrantos los
sábados, lantejas los viernes, algún
noches, duelos y quebrantos los
palomino de aña didura los domingos,
consumían las tres partes de su hacienda.
palomino de aña didura los
domingos, consumían las tres
partes de su hacienda.
Mancha de texto
Verdana 18pt Georgia 18pt
flaco y galgo corredor. Una olla de algo más vaca que Una olla de algo más vaca que carnero, salpicón las más
su hacienda.
Verdana 18pt Georgia 18pt
Una olla de algo más vaca que carnero, salpicón las más
flaco y galgo corredor. Una olla de algo más vaca que
su hacienda.
Mancha de texto
En un lugar de la Mancha, de cuyo nombre no quiero En un lugar de la Mancha, de cuyo nombre no quiero acordarme,
acordarme, no ha mucho tiempo que vivía un hidalgo no ha mucho tiempo que vivía un hidalgo de los de lanza en
de los de lanza en astillero, adarga antigua, rocín flaco astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de
y galgo corredor. Una olla de algo más vaca que algo más vaca que carnero, salpicón las más noches, duelos y
carnero, salpicón las más noches, duelos y quebrantos quebrantos los sábados, lantejas los viernes, algún palomino de
aña didura los domingos, consumían las tres partes de su
hacienda.
su hacienda.
En un lugar de la Mancha, de cuyo nombre no En un lugar de la Mancha, de cuyo nombre no quiero

quiero acordarme, no ha mucho tiempo que vivía acordarme, no ha mucho tiempo que vivía un hidalgo de
un hidalgo de los de lanza en astillero, adarga los de lanza en astillero, adarga antigua, rocín flaco y
antigua, rocín flaco y galgo corredor. Una olla de galgo corredor. Una olla de algo más vaca que carnero,
salpicón las más noches, duelos y quebrantos los
algo más vaca que carnero, salpicón las más
sábados, lantejas los viernes, algún palomino de aña
noches, duelos y quebrantos los sábados, lantejas
didura los domingos, consumían las tres partes de su
los viernes, algún palomino de aña didura los
hacienda.
domingos, consumían las tres partes de su
hacienda.
Longitud de la línea
también llamada medida
15% del área de la retina
Longitud de línea
La legibilidad de un texto se ve afectada por la duración de lectura de la línea.

55 - 85 caracteres por línea ≈ 12 palabras por línea
La legibilidad de un texto se ve afectada por la

La legibilidad de un texto se ve afectada por la
Longitud de línea
PRIMERA PARTE
DEL INGENIOSO
demasiado larga
hidalgo don Quijote
de la Mancha.
Capítulo primero.
Que trata de la condición y ejercicio del famoso hidalgo don Quijote de la Mancha.
En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga
antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, lantejas
los viernes, algún palomino de aña didura los domingos, consumían las tres partes de su hacienda. El resto d’ella concluían sayo de velarte,
calzas de velludo para las fiestas, con sus pantuflos de lo mesmo, y los días de entresemana se honraba con su vellorí de lo más fino. Tenía en
su casa una ama que pasaba de los cuarenta y una sobrina que no llegaba a los veinte, y un mozo de campo y plaza que así ensillaba el rocín
como tomaba la podadera. Frisaba la edad de nuestro hidalgo con los cincuenta años. Era de complexión recia, seco de carnes, enjuto de
rostro, gran madrugador y amigo de la caza. Quieren decir que tenía el sobrenombre de Quijada o Quesada, que en esto hay alguna diferencia
en los autores que d’este caso escriben, aunque, por conjeturas verosímiles se deja entender que se llamaba Quejana. Pero esto importa poco a
nuestro cuento: basta que en la narración d’él no se salga un punto de la verdad. Es, pues, de saber que este sobredicho hidalgo, los ratos que
estaba ocioso, que eran los más del año, se daba a leer libros de caballerías, con tanta afición y gusto, que olvidó casi de todo punto el ejercicio
de la caza y aun la administración de su hacienda; y llegó a tanto su curiosidad y desatino en esto, que vendió muchas hanegas de tierra de
sembradura para comprar libros de caballerías en que leer, y así, llevó a su casa todos cuantos pudo haber d’ellos; y de todos, ningunos le
parecían tan bien como los que compuso el famoso Feliciano de Silva, porque la claridad de su prosa y aquellas entricadas razones suyas le
parecían de perlas, y más cuando llegaba a leer aquellos requiebros y cartas de desafíos, donde en muchas partes hallaba escrito: “La razón de
la sinrazón que a mi razón se hace, de tal manera mi razón enflaquece, que con razón me quejo de la vuestra hermosura”. Y también cuando
leía: “Los altos cielos que de vuestra divinidad divinamente con las estrellasos fortifican y os hacen merecedora del merecimiento que merece
la vuestra grandeza…”.
Longitud de línea
PRIMERA PARTE
DEL INGENIOSO
hidalgo don Quijote
de la Mancha. demasiado corta
Capítulo primero.
Que trata de la condición y
ejercicio del famoso
hidalgo don Quijote de la
Mancha.
En un lugar de la Mancha,
de cuyo nombre no quiero
acordarme, no ha mucho
tiempo que vivía un hidalgo
de los de lanza en astillero,
adarga antigua, rocín flaco
y galgo corredor. Una olla
de algo más vaca que
Longitud de línea
En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no

ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, Óptimo
adarga antigua, rocín flaco y galgo corredor. Una olla de algo más 55 - 85 caracteres
vaca que carnero, salpicón las más noches, duelos y quebrantos los
sábados, lantejas los viernes, algún palomino de aña didura los
domingos, consumían las tres partes de su hacienda. El resto d’ella
concluían sayo de velarte, calzas de velludo para las fiestas, con sus
pantuflos de lo mesmo, y los días de entresemana se honraba con su
vellorí de lo más fino. Tenía en su casa una ama que pasaba de los
cuarenta y una sobrina que no llegaba a los veinte, y un mozo de
campo y plaza que así ensillaba el rocín como tomaba la podadera.
Frisaba la edad de nuestro hidalgo con los cincuenta años. Era de
complexión recia, seco de carnes, enjuto de rostro, gran madrugador
y amigo de la caza. Quieren decir que tenía el sobrenombre de
Quijada o Quesada, que en esto hay alguna diferencia en los autores
Longitud de línea
En un lugar de la Mancha, de cuyo

nombre no quiero acordarme, no
ha mucho tiempo que vivía un
hidalgo de los de lanza en astillero,
adarga antigua, rocín flaco y galgo
corredor. Una olla de algo más vaca
que carnero, salpicón las más
noches, duelos y quebrantos los
palomino de aña didura los
domingos, consumían las tres
partes de su hacienda. El resto
d’ella concluían sayo de velarte,
calzas de velludo para las fiestas,
con sus pantuflos de lo mesmo, y
Sangrías
…que no quiere decir derramar sangre.
Sangrías
1. ¶ (símbolo cambio de párrafo)

2. Espacio más largo que un punto y seguido
3. Tipo francés
(pero estos están en desuso)
Sangrías

3. Tipo francés
p{
text-indent:-1em;
}
Sangrías

3. Tipo francés
4. Un salto de línea después

5. Sangrar el texto (mismo valor que el tamaño)
p+p{
font-size: 1em;
margin-bottom: 1.5em;
}
3. Tipo francés
4. Un salto de línea después

5. Sangrar el texto (mismo valor que el tamaño)
p:not(:first-of-type) {
text-indent: 2em;
}
Capitulares
Capitulares
p:first-child::first-letter {
font-size: 7.5em; float: left; margin: 0.5rem .5rem 0 0;
text-shadow: 0.2rem 0.2rem 0 #f4f6d0, 0.4rem 0.4rem 0 #707070;
}
Otra forma de hacer una captitular:
http://lostworldsfairs.com/moon/
Variantes
Versalitas, cursivas y negritas
NBZóTDVMBT
Wfstbmjubt
ABCD efg HIJK
p {
font-variant: small-caps;
}
cursiva cursivacursiva
auténtica cursiva redonda falsa cursiva
p {
font-style: italic;
}
sfepoeb
ofhsjub
Mpsfn!jqtvn!epmps!tju!bnfu-!dpotfdufuvs!bejqjtdjoh!
fmju/!Vu!wfijdvmb!gbvdjcvt!wbsjvt/!Npscj!ujodjevou!
tbhjuujt!wbsjvt/!Qibtfmmvt!fhfu!upsups!nbvsjt/!Wftuj.
cvmvn!bouf!jqtvn!qsjnjt!fo!gbvdjcvt!Psdj!mvduvt!fu!
vmusjdft!qptvfsf!dvcjmjb!Dvsbf<!Dsbt!wfijdvmb!jqtvn!
ofd!nbhob!ejduvn!tfnqsf/!Bmjrvbn!tju!bnfu!ftu!
upsups/!Wjwbnvt!jbdvmjt!Kvtup!Jefoujgjdbdjo!tfn!
bvdups!ejhojttjn/
fonts.com
emigre.com
cursiva cursiva
p:first-of-type::first-line {
font-style: italic;
}
Letras y más
Cómo decorar
text-rendering: auto | optimizeSpeed | optimizeLegibility | geometricPrecision
Tirabuzón
Tirabuzón
https://developer.mozilla.org/en-US/docs/CSS/text-rendering
Hi! You are viewing this site in a browser that doesn't support OpenType. We
didn't want to leave you hanging, so we filled in a couple of the blanks. If you
want the real deal, get a browser that supports OpenType like Internet
Explorer 10+ or Firefox 8+.
Kerning
.kerning {
text-rendering: optimizeLegibility;
-moz-font-feature-settings: "kern=1";
-ms-font-feature-settings: "kern" 1;
}
V elocidad Velocidad
Fracciones
.fracciones {
-moz-font-feature-settings: "frac=1";
-ms-font-feature-settings: "frac" 1; }
1/2 ½
Small Caps
.versalitas {
-moz-font-feature-settings: "smcp=1";
-ms-font-feature-settings: "smcp" 1;
}
.todasversalitas {
-moz-font-feature-settings: "c2sc=1, smcp=1";
-ms-font-feature-settings: "c2sc" 1,"smcp" 1;
}
small caps SMALL CAPS

Ligaduras
.ligaduras {
! text-rendering: optimizeLegibility;
! -moz-font-feature-settings: "liga=1";
! -ms-font-feature-settings: "liga" 1;
}
final final
pichu
Numerales
.figures {
-moz-font-feature-settings: "pnum=1,onum=1";
-ms-font-feature-settings: "pnum" 1,"onum" 1;
}
1.234 € 1.234 €
Alternativas y remates
.alternativas {
-moz-font-feature-settings: "ss05=1";
-ms-font-feature-settings: "ss05" 1;
}
.remates {
-moz-font-feature-settings: "swsh=1,cswh=1";
-ms-font-feature-settings: "swsh" 1,"cswh" 1;
}
Queso Queso
http://clagnut.com/sandbox/opentype/ligatures
PyJ
La partición de palabras en documentos electrónicos
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
lacinia, lacus at ornare vulputate, metus libero convallis sapien, quis Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lacinia, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lacinia,
tincidunt turpis felis non risus. Phasellus eu tellus ac dui mollis lacus at ornare vulputate, metus libero convallis sapien, quis tincidunt turpis lacus at ornare vulputate, metus libero convallis sapien, quis tincidunt turpis
imperdiet eu vel libero. Pellentesque habitant morbi tristique senectus felis non risus. Phasellus eu tellus ac dui mollis imperdiet eu vel libero. felis non risus. Phasellus eu tellus ac dui mollis imperdiet eu vel libero. Pellen-
et netus et malesuada fames ac turpis egestas. Quisque malesuada felis Pellentesque habitant morbi tristique senectus et netus et malesuada fames tesque habitant morbi tristique senectus et netus et malesuada fames ac
eu metus auctor vestibulum vel sed est. Nam rhoncus scelerisque ac turpis egestas. Quisque malesuada felis eu metus auctor vestibulum vel turpis egestas. Quisque malesuada felis eu metus auctor vestibulum vel sed
sapien, eu posuere orci dignissim nec. Nulla ipsum risus, ultrices eget sed est. Nam rhoncus scelerisque sapien, eu posuere orci dignissim nec. Nulla est. Nam rhoncus scelerisque sapien, eu posuere orci dignissim nec. Nulla
gravida nec, placerat sit amet lectus. Praesent sed metus elit. Morbi eu ipsum risus, ultrices eget gravida nec, placerat sit amet lectus. Praesent sed ipsum risus, ultrices eget gravida nec, placerat sit amet lectus. Praesent sed
massa quam. Aliquam erat volutpat. Sed et eros eget enim consectetur metus elit. Morbi eu massa quam. Aliquam erat volutpat. Sed et eros eget metus elit. Morbi eu massa quam. Aliquam erat volutpat. Sed et eros eget
porta. enim consectetur porta. enim consectetur porta.
Mauris non faucibus velit. Pellentesque viverra consectetur Mauris non faucibus velit. Pellentesque viverra consectetur consectetur. Mauris non faucibus velit. Pellentesque viverra consectetur consectetur.
consectetur. Aenean bibendum fringilla lectus, sed imperdiet nunc Aenean bibendum fringilla lectus, sed imperdiet nunc porttitor a. Maecenas a Aenean bibendum fringilla lectus, sed imperdiet nunc porttitor a. Maecenas a
porttitor a. Maecenas a leo lacinia quam semper adipiscing. Etiam vel leo lacinia quam semper adipiscing. Etiam vel cursus nisl. Nunc malesuada leo lacinia quam semper adipiscing. Etiam vel cursus nisl. Nunc malesuada
cursus nisl. Nunc malesuada sem et dolor mollis feugiat. Morbi sem et dolor mollis feugiat. Morbi accumsan accumsan euismod. Etiam sem et dolor mollis feugiat. Morbi accumsan accumsan euismod. Etiam
accumsan accumsan euismod. Etiam bibendum est at velit sodales bibendum est at velit sodales pulvinar. Etiam a tellus nulla, sed ornare mi. bibendum est at velit sodales pulvinar. Etiam a tellus nulla, sed ornare mi.
pulvinar. Etiam a tellus nulla, sed ornare mi. Proin egestas malesuada Proin egestas malesuada velit, ac vulputate risus scelerisque vitae. Proin Proin egestas malesuada velit, ac vulputate risus scelerisque vitae. Proin
velit, ac vulputate risus scelerisque vitae. Proin metus ipsum, fringilla metus ipsum, fringilla vitae varius ut, vehicula eget dui. Ut vehicula congue metus ipsum, fringilla vitae varius ut, vehicula eget dui. Ut vehicula congue
vitae varius ut, vehicula eget dui. Ut vehicula congue dictum. dictum. dictum.
Integer eleifend viverra lorem, vel sodales mauris luctus nec. Curabitur Integer eleifend viverra lorem, vel sodales mauris luctus nec. Curabitur eu est Integer eleifend viverra lorem, vel sodales mauris luctus nec. Curabitur eu est
eu est id sem rhoncus interdum. Suspendisse dictum augue quis velit id sem rhoncus interdum. Suspendisse dictum augue quis velit pellentesque id sem rhoncus interdum. Suspendisse dictum augue quis velit pellentesque
pellentesque dapibus. Sed faucibus, ligula non placerat iaculis, erat nisl dapibus. Sed faucibus, ligula non placerat iaculis, erat nisl elementum nibh, id dapibus. Sed faucibus, ligula non placerat iaculis, erat nisl elementum nibh, id
elementum nibh, id condimentum diam risus egestas metus. Nulla condimentum diam risus egestas metus. Nulla eget ipsum augue. Integer eu condimentum diam risus egestas metus. Nulla eget ipsum augue. Integer eu
eget ipsum augue. Integer eu ante vitae augue fermentum vestibulum. ante vitae augue fermentum vestibulum. Vestibulum ante ipsum primis in ante vitae augue fermentum vestibulum. Vestibulum ante ipsum primis in
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere faucibus orci luctus et ultrices posuere cubilia Curae; Quisque dapibus faucibus orci luctus et ultrices posuere cubilia Curae; Quisque dapibus pulvi-
cubilia Curae; Quisque dapibus pulvinar orci, malesuada pharetra urna pulvinar orci, malesuada pharetra urna interdum at. Phasellus ultrices feugiat nar orci, malesuada pharetra urna interdum at. Phasellus ultrices feugiat tinci-
interdum at. Phasellus ultrices feugiat tincidunt. Nam accumsan nisl sit tincidunt. Nam accumsan nisl sit amet eros fermentum a imperdiet nisl dunt. Nam accumsan nisl sit amet eros fermentum a imperdiet nisl suscipit.
amet eros fermentum a imperdiet nisl suscipit. Mauris eu nisi sed suscipit. Mauris eu nisi sed neque congue egestas. Pellentesque dictum Mauris eu nisi sed neque congue egestas. Pellentesque dictum adipiscing
neque congue egestas. Pellentesque dictum adipiscing euismod. adipiscing euismod. Integer sit amet viverra urna. Integer sagittis, nulla in euismod. Integer sit amet viverra urna. Integer sagittis, nulla in venenatis
venenatis egestas, felis enim venenatis arcu, at tincidunt erat velit in enim. egestas, felis enim venenatis arcu, at tincidunt erat velit in enim.
Párrafo alineado a la izquierda Párrafo justificado, sin PyJ activo Párrafo justificado, con PyJ activo
+
+

+

+
algo de javascript
“The anger towards Romney was palpable. "The
folks at the top in this country don't need another
champion in Washington. They already have a seat at
the table," he said. Romney didn't represent
change, or the future. "To make sure no matter who you are
or”
guión suave
U+00AD soft hyphen,
HTML:
+
+
hyphenator.js
Control sobre el espaciado
Kerning & Traking
Kerning
Traking
Kerning
Traking
Traking
Kerning
Ta
Kerning
VA Th
Ta
Kerning
VA Th
Ta
Kerning
VA Th
Ta
Kerning
VA Th
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae urna nisl. Etiam
tempor tempor consectetur. Nunc arcu diam, accumsan eget feugiat non, luctus non mi.
Sed risus sapien, semper sit amet eleifend id, convallis vitae neque. In convallis bibendum
erat, sed rutrum est sagittis sit amet. Nulla facilisi. Aliquam lectus nibh, congue sed
imperdiet nec, posuere non turpis. Aenean mauris mi, aliquam id convallis sit amet,
Quisque iaculis sapien in elit blandit et sagittis est cursus. Vivamus a risus eget odio
auctor ullamcorper. Curabitur ac dui neque, eu tristique justo. Sed sed diam ligula.
Nullam at dolor eleifend erat mattis varius sodales vel lacus. Donec consectetur lobortis
arcu at accumsan. Sed tincidunt rhoncus nibh, nec accumsan leo mollis vehicula. Fusce
nec neque vestibulum leo adipiscing condimentum quis vitae turpis. Ut eros nulla, mattis
ac posuere sed, aliquet eu nulla. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Curabitur at lectus magna, a vulputate mi. Sed imperdiet
tortor sed ipsum adipiscing quis posuere metus interdum. Mauris semper dictum auctor.
Fusce pulvinar ipsum vitae enim egestas non sodales libero consectetur. Morbi diam
justo, pulvinar quis tempor ut, laoreet vel est.
Phasellus neque odio, semper eget mattis pharetra, commodo ac sapien. Donec nec
vehicula dolor. Morbi pellentesque aliquam tincidunt. Pellentesque risus dui, commodo
quis venenatis vel, venenatis id lacus. Quisque congue, est ut convallis varius, sem tellus
porta quam, non tristique nisi tortor nec tellus. Mauris porttitor sapien eget odio tempor
sit amet congue magna porta. Duis sapien dui, aliquam ac condimentum quis, pharetra
vel sapien. Mauris non erat in purus venenatis tincidunt. Morbi ac urna ac augue
commodo adipiscing sit amet ultricies augue. Ut viverra nulla sed nisi cursus ut dignissim
Th
Th
Ve
h1 {
letter-spacing: (medidas relativas);
}
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur adipiscing
adipiscing elit. Aenean vitae urna nisl. elit. Aenean vitae urna nisl. Etiam tempor tempor
Etiam tempor tempor consectetur. Nunc consectetur. Nunc arcu diam, accumsan eget feugiat
arcu diam, accumsan eget feugiat non, non, luctus non mi. Sed risus sapien, semper sit
luctus non mi. Sed risus sapien, semper amet eleifend id, convallis re non turpis. Aeneane
sit amet eleifend id, convallis re non vestibulum quam in magna mattis vel vehicula eros
turpis. Aeneane vestibulum quam in mollis.
magna mattis vel vehicula eros mollis.
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Aenean vitae urna nisl. adipiscing elit. Aenean vitae urna nisl. Etiam
Etiam tempor tempor consectetur. Nunc tempor tempor consectetur. Nunc arcu diam,
arcu diam, accumsan eget feugiat non, accumsan eget feugiat non, luctus non mi.
luctus non mi. Sed risus sapien, semper Sed risus sapien, semper sit amet eleifend id,
sit amet eleifend id, convallis re non convallis re non turpis. Aeneane vestibulum
turpis. Aeneane vestibulum quam in quam in magna mattis vel vehicula eros
magna mattis vel vehicula eros mollis. mollis.
LOREM IPSUM DOLOR SIT AMET, LOREM IPSUM DOLOR SIT AMET,
CONSECTETUR ADIPISCING ELIT. AENEAN CONSECTETUR ADIPISCING ELIT.
VITAE URNA NISL. ETIAM TEMPOR AENEAN VITAE URNA NISL. ETIAM
TEMPOR CONSECTETUR. NUNC ARCU TEMPOR TEMPOR CONSECTETUR. NUNC
DIAM, ACCUMSAN EGET FEUGIAT NON, ARCU DIAM, ACCUMSAN EGET FEUGIAT
LUCTUS NON MI. SED RISUS SAPIEN, NON, LUCTUS NON MI. SED RISUS
SEMPER SIT AMET ELEIFEND ID, SAPIEN, SEMPER SIT AMET ELEIFEND ID,
CONVALLIS RE NON TURPIS. AENEANE CONVALLIS RE NON TURPIS. AENEANE
VESTIBULUM QUAM IN MAGNA MATTIS VESTIBULUM QUAM IN MAGNA MATTIS
VEL VEHICULA EROS MOLLIS. VEL VEHICULA EROS MOLLIS.
LOREM IPSUM DOLOR SIT AMET, LOREM IPSUM DOLOR SIT AMET,
CONSECTETUR ADIPISCING ELIT. CONSECTETUR ADIPISCING ELIT.
AENEAN VITAE URNA NISL. ETIAM AENEAN VITAE URNA NISL. ETIAM
TEMPOR TEMPOR CONSECTETUR. NUNC TEMPOR TEMPOR CONSECTETUR.
ARCU DIAM, ACCUMSAN EGET FEUGIAT NUNC ARCU DIAM, ACCUMSAN EGET
NON, LUCTUS NON MI. SED RISUS FEUGIAT NON, LUCTUS NON MI. SED
SAPIEN, SEMPER RISUS SAPIEN, SEMPER SIT AMET
ELEEHICULA EROS MOLLIS.
Open Type
las posibilidades expresivas de las letras y sus decoraciones
TTF - True Type
PS - Postcript } OT - OPEN TYPE
http://www.w3.org/TR/css3-fonts/
Magneta
http://blog.fontdeck.com http://clagnut.com/sandbox/opentype/ligatures
OTF - Open Type Font
Roman Caracteres extra Soporte multiidioma
Caps Ligaduras Multiplataforma
Expert Ornamentos
LF Roman
LF Caps
LF Expert
Ligaduras
evitar conflictos y añadir decoración
et = ampersand
&& & &

http://www.linotype.com/es/6527/rameau.html
http://www.linotype.com/es/6719/shilia.html
web fonts
@font-face
@font-face
Web fonts // @ font-face
Ampliando nuestro catálogo de tipografías

• Por una razón estética
• Por una razón funcional: Accesibilidad y flexibilidad nos acompañan
• Varias tecnologías: sIFR, cufón
*Algunos diseñadores de tipografía consideran ilegal incrustar fuentes de esta

forma.
xxx
eot svg
ttf woff
otf open type
www.fontsquirrel.com
@font-face generator
Web fonts // @ font-face
Tener los archivos en el servidor

Nombrar, describir y vincular la tipografía con @font-face
@font-face{
font-family: “nombre de la tipografía”;
src: la ruta de acceso a los archivos de la tipografía;
font-weight: peso;
font-style: estilo;
Nombrar en la propiedad: font-family la tipografía
@font-face {
font-family: 'League Gothic';
src: url('fonts/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/League_Gothic-webfont.woff') format('woff'),
url('fonts/League_Gothic-webfont.ttf') format('truetype'),
url('fonts/League_Gothic-webfont.svg#DearestRegular') format('svg');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'League Gothic',Georgia,serif;
}
web fonts
@font-face
woff
OPEN TYPE
TRUE TYPE
OPEN FONT FORMAT
Servicios de tipografía
Algunos sitios que ofrecen archivos de tipografías para este fín:
www.googlefonts.com
www.myfonts.com
www.fontsquirrel.com
https://typekit.com/
www.fontspring.com
www.fontslive.com
www.webtype.com
www.fontdeck.com
Tu propia paleta de tipos
A
A
A
A
A
Muerte
Muerte
Muerte
Rigoletto
Rigoletto
Rigoletto
Algunos vínculos
libro ejemplo de combinaciones de tipografia:

http://bonfx.com/the-big-book-of-font-combinations/?cmp=39
Texto
Maridaje tipográfico
Contraste
Contraste
A A
Contraste
A A
Contraste
A A
Contraste
A A
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing
elit.
Aenean vitae urna nisl. Etiam tempor tempor consectetur. Aenean vitae urna nisl. Etiam tempor
Nunc arcu diam, accumsan eget feugiat non, luctus non mi. tempor consectetur. Nunc arcu diam,
Sed risus sapien, semper sit amet eleifend id, convallis vitae accumsan eget feugiat non, luctus non mi.
neque. In convallis bibendum erat, sed rutrum est sagittis sit Sed risus sapien, semper sit amet
amet. Nulla facilisi. Aliquam lectus nibh, congue sed imperdiet eleifend id, convallis vitae neque. In
nec, posuere non turpis. Aenean mauris mi, aliquam id convallis bibendum erat, sed rutrum est
convallis sit amet, vestibulum sed massa. Thusce vestibulum sagittis sit amet. Nulla facilisi.
quam in magna mattis vel vehicula eros mollis. Aliquam lectus nibh, congue sed imperdiet
nec, posuere non turpis. Aenean mauris
Quisque iaculis sapien in elit blandit et sagittis est cursus.
mi, aliquam id convallis sit amet,
Vivamus a risus eget odio auctor ullamcorper. Curabitur ac
vestibulum sed massa. Thusce vestibulum
dui neque, eu tristique justo. Sed sed diam ligula. Nullam at
quam in magna mattis vel vehicula eros
dolor eleifend erat mattis varius sodales vel lacus. Donec
mollis.
consectetur lobortis arcu at accumsan. Sed tincidunt rhoncus
nibh, nec accumsan leo mollis vehicula. Fusce nec neque Quisque iaculis sapien in elit blandit et
vestibulum leo adipiscing condimentum quis vitae turpis. Ut sagittis est cursus. Vivamus a risus eget
eros nulla, mattis ac posuere sed, aliquet eu nulla. Vestibulum odio auctor ullamcorper. Curabitur ac dui
ante ipsum primism vitae enim egestas non sodales libero neque, eu tristique justo. Sed sed diam
consectetur. Morbi diam justo, pulvinar quis tempor ut, laoreet ligula. Nullam at dolor eleifend erat
vel est mattist, laoreet vel est
mm
Aenean vitae urna nisl. Etiam tempor tempor consectetur. Nunc arcu diam, accumsan eget feugiat
non, luctus non mi. Sed risus sapien, semper sit amet eleifend id, convallis vitae neque. In convallis
bibendum erat, sed rutrum est sagittis sit amet. Nulla facilisi. Aliquam lectus nibh, congue sed
imperdiet nec, posuere non turpis. Aenean mauris mi, aliquam id convallis sit amet, vestibulum sed
massa. Thusce vestibulum quam in magna mattis vel vehicula eros mollis.
Quisque iaculis sapien in elit blandit et sagittis est cursus. Vivamus a risus eget odio auctor
ullamcorper. Curabitur ac dui neque, eu tristique justo. Sed sed diam ligula. Nullam at dolor eleifend
erat mattis varius sodales vel lacus. Donec consectetur lobortis arcu at accumsan. Sed tincidunt
rhoncus nibh, nec accumsan leo mollis vehicula. Fusce nec neque vestibulum leo adipiscing
condimentum quis vitae turpis. Ut eros nulla, mattis ac posuere sed, aliquet eu nulla. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur at lectus magna, a
vulputate mi. Sed imperdiet tortor sed ipsum adipiscing quis posuere metus interdum. Mauris semper
dictum auctor. Fusce pulvinar ipsum vitae enim egestas non sodales libero consectetur. Morbi diam
justo, pulvinar quis tempor ut, laoreet vel est
g g
Aenean vitae urna nisl. Etiam tempor tempor consectetur. Nunc arcu diam, accumsan eget
feugiat non, luctus non mi. Sed risus sapien, semper sit amet eleifend id, convallis vitae
neque. In convallis bibendum erat, sed rutrum est sagittis sit amet. Nulla facilisi. Aliquam
lectus nibh, congue sed imperdiet nec, posuere non turpis. Aenean mauris mi, aliquam id
convallis sit amet, vestibulum sed massa. Thusce vestibulum quam in magna mattis vel
vehicula eros mollis.
nec consectetur lobortis arcu at accumsan. Sed tincidunt rhoncus nibh, nec accumsan leo
mollis vehicula vulputate mi. Sed imperdiet tortor sed ipsum adipiscing quis posuere metus
interdum. Mauris semper dictum auctor. Fusce pulvinar ipsum vitae enim egestas non sodales
libero consectetur. Morbi diam justo, pulvinar quis tempor ut, laoreet vel est
HELVÉTICA FUTURA
g g
Aenean vitae urna nisl. Etiam tempor tempor consectetur. Nunc arcu diam, accumsan eget feugiat non, luctus
non mi. Sed risus sapien, semper sit amet eleifend id, convallis vitae neque. In convallis bibendum erat, sed
rutrum est sagittis sit amet. Nulla facilisi. Aliquam lectus nibh, congue sed imperdiet nec, posuere non turpis.
Aenean mauris mi, aliquam id convallis sit amet, vestibulum sed massa. usce vestibulum quam in magna mattis
vel vehicula eros mollis.
uisque iaculis sapien in elit blandit et sagittis est cursus. Vivamus a risus eget odio auctor ullamcorper.
Curabitur ac dui neque, eu tristique justo. Sed sed diam ligula. Nullam at dolor eleifend erat mattis varius sodales
vel lacus. Donec consectetur lobortis arcu at accumsan. Sed tincidunt rhoncus nibh, nec accumsan leo mollis
vehicula. Fusce nec neque vestibulum leo adipiscing condimentum quis vitae turpis. Ut eros nulla, mattis ac
posuere sed, aliquet eu nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
Curae; Curabitur at lectus magna, a vulputate mi. Sed imperdiet tortor sed ipsum adipiscing quis posuere metus
interdum. Mauris semper dictum auctor. Fusce pulvinar ipsum vitae enim egestas non sodales libero consectetur.
Morbi diam justo, pulvinar quis tempor ut, laoreet vel est
GARAMOND BODONI
body {
font-family: 'League Gothic',Georgia,serif;
font-weight: ( );
}
100 200 300 400 500 600 700 800 900

g
g
feugiat non, luctus non mi. Sed risus sapien, semper sit amet eleifend id, convallis vitae neque.
In convallis bibendum erat, sed rutrum est sagittis sit amet. Nulla facilisi. Aliquam lectus nibh,
ullamcorper. Curabitur ac dui neque, eu tristique justo. Sed sed diam ligula. Nullam at dolor
eleifend erat mattis varius sodales vel lacus. Donec consectetur lobortis arcu at accumsan. Sed
tincidunt rhoncus nibh, nec accumsan leo mollis vehicula. Fusce nec neque vestibulum leo
adipiscing condimentum quis vitae turpis. Ut eros nulla, mattis ac posuere sed, aliquet eu nulla.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Curabitur at lectus magna, a vulputate mi. Sed imperdiet tortor sed ipsum adipiscing quis
posuere metus interdum. Mauris semper dictum auctor. Fusce pulvinar ipsum vitae enim
egestas non sodales libero consectetur. Morbi diam justo, pulvinar quis tempor ut, laoreet vel
est
HELVÉTICA GARAMOND
g g
luctus non mi. Sed risus sapien, semper sit amet eleifend id, convallis vitae neque. In convallis bibendum
erat, sed rutrum est sagittis sit amet. Nulla facilisi. Aliquam lectus nibh, congue sed imperdiet nec, posuere
non turpis. Aenean mauris mi, aliquam id convallis sit amet, vestibulum sed massa. Thusce vestibulum
quam in magna mattis vel vehicula eros mollis.
Quisque iaculis sapien in elit blandit et sagittis est cursus. Vivamus a risus eget odio auctor ullamcorper.
Curabitur ac dui neque, eu tristique justo. Sed sed diam ligula. Nullam at dolor eleifend erat mattis varius
sodales vel lacus. Donec consectetur lobortis arcu at accumsan. Sed tincidunt rhoncus nibh, nec accumsan
leo mollis vehicula. Fusce nec neque vestibulum leo adipiscing condimentum quis vitae turpis. Ut eros
nulla, mattis ac posuere sed, aliquet eu nulla. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Curabitur at lectus magna, a vulputate mi. Sed imperdiet tortor sed ipsum
adipiscing quis posuere metus interdum. Mauris semper dictum auctor. Fusce pulvinar ipsum vitae enim
egestas non sodales libero consectetur. Morbi diam justo, pulvinar quis tempor ut, laoreet vel est
DIN BASKEVILLE
g g
ullamcorponsectetur lobortis arculiquet eu nulla. Vestibulum ante ipsum primis in faucibus
orci luctus et ultrices posuere cu; Curabitur at lectus magna, a vulputate mi. Sed imperdiet
Fusce pulvinar ipsum vitae enim egestas non sodales libero consectetur. Morbi diam justo,
pulvinar quis tempor ut, laoreet vel est
SANUK SANUK
Modulación
O
eO O O
CENTAUR BODONI SANUK
g
feugiat non, luctus non mi. Sed risus sapien, semper sit amet eleifend id, convallis vitae neque.
In convallis bibendum erat, sed rutrum est sagittis sit amet. Nulla facilisi. Aliquam lectus nibh,
ullamcorper. Curabitur ac dui neque, eu tristique justo. Sed sed diam ligula. Nullam at dolor
eleifend erat mattis varius sodales vel lacus. Donec consectetur lobortis arcu at accumsan. Sed
tincidunt rhoncus nibh, nec accumsan leo mollis vehicula. Fusce nec neque vestibulum leo
adipiscing condimentum quis vitae turpis. Ut eros nulla, mattis ac posuere sed, aliquet eu nulla.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Curabitur at lectus magna, a vulputate mi. Sed imperdiet tortor sed ipsum adipiscing quis
posuere metus interdum. Mauris semper dictum auctor. Fusce pulvinar ipsum vitae enim
egestas non sodales libero consectetur. Morbi diam justo, pulvinar quis tempor ut, laoreet vel
est georgia
g
Aenean vitae urna nisl. Etiam tempor tempor consectetur. Nunc arcu diam, accumsan eget feugiat non, luctus
non mi. Sed risus sapien, semper sit amet eleifend id, convallis vitae neque. In convallis bibendum erat, sed
rutrum est sagittis sit amet. Nulla facilisi. Aliquam lectus nibh, congue sed imperdiet nec, posuere non turpis.
Aenean mauris mi, aliquam id convallis sit amet, vestibulum sed massa. usce vestibulum quam in magna mattis
vel vehicula eros mollis.
uisque iaculis sapien in elit blandit et sagittis est cursus. Vivamus a risus eget odio auctor ccumsan leo mollis
vehicula. Fusce nec neque vestibulum leo adipiscing condimentum quis vitae tpsum adipiscing quis posuere
metus interdum. Mauris semper dictum auctor. Fusce pulvinar ipsum vitae enim egestas non sodales libero
consectetur. Morbi diam justo, pulvinar quis tempor ut, laoreet vel est
GARAMOND
g
Aenean vitae urna nisl. Etiam tempor tempor consectetur. Nunc arcu diam, accumsan eget feugiat non, luctus non
mi. Sed risus sapien, semper sit amet eleifend id, convallis vitae neque. In convallis bibendum erat, sed rutrum est
sagittis sit amet. Nulla facilisi. Aliquam lectus nibh, congue sed imperdiet nec, posuere non turpis. Aenean mauris
mi, aliquam id convallis sit amet, vestibulum sed massa. Thusce vestibulum quam in magna mattis vel vehicula eros
mollis.
Quisque iaculis sapien in elit blandit et sagittis est cursus. Vivamus a risus eget odio auctor ccumsan leo mollis
vehicula. Fusce nec neque vestibulum leo adipiscing condimentum quis vitae tpsum adipiscing quis posuere metus
interdum. Mauris semper dictum auctor. Fusce pulvinar ipsum vitae enim egestas non sodales libero consectetur.
Morbi diam justo, pulvinar quis tempor ut, laoreet vel est
BODONI
g
ccumsan leo mollis vehicula. Fusce nec neque vestibulum leo adipiscing condimentum quis
vitae tpsum adipiscing quis posuere metus interdum. Mauris semper dictum auctor. Fusce
pulvinar ipsum vitae enim egestas non sodales libero consectetur. Morbi diam justo, pulvinar
quis tempor ut, laoreet vel est
FUTURA
Altura de la x
abcdefx xabcdefg
GEORGIA - s.XX CENTAUR - s.XIX
abcdefg x
bgbg
g g
Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur
consectetur adipiscing elit. adipiscing elit.
Aenean vitae urna nisl. Etiam tempor tempor consectetur.
Aenean vitae urna nisl. Etiam tempor tempor Nunc arcu diam, accumsan eget feugiat non, luctus non mi.
consectetur. Nunc arcu diam, accumsan eget Sed risus sapien, semper sit amet eleifend id, convallis vitae
feugiat non, luctus non mi. Sed risus sapien, neque. In convallis bibendum erat, sed rutrum est sagittis sit
semper sit amet eleifend id, convallis vitae neque. amet. Nulla facilisi. Aliquam lectus nibh, congue sed
In convallis bibendum erat, sed rutrum est imperdiet nec, posuere non turpis. Aenean mauris mi,
sagittis sit amet. Nulla facilisi. Aliquam lectus aliquam id convallis sit amet, vestibulum sed massa. Thusce
vestibulum quam in magna mattis vel vehicula eros mollis.
nibh, congue sed imperdiet nec, posuere non Quisque iaculis sapien in elit blandit et sagittis est cursus.
turpis. Aenean mauris mi, aliquam id convallis sit Vivamus a risus eget odio auctor ccumsan leo mollis
amet, vestibulum sed massa. Thusce vestibulum vehicula. Fusce nec neque vestibulum leo adipiscing
quam in magna mattis vel vehicula eros mollis. condimentum quis vitae tpsum adipiscing quis posuere
Quisque iaculis sapien in elit blandit et sagittis est metus interdum. Mauris semper dictum auctor. Fusce
cursus. Vivamus a risus eget odio auctor ccumsan pulvinar ipsum vitae enim egestas non sodales libero
consectetur. Morbi diam justo, pulvinar quis tempor ut,
leo mollis vehicula. Fusce nec neque vestibulum laoreet vel est
GEORGIA leo adipiscing condimentum quis vitae tpsum CENTAUR
adipiscing quis posuere metus interdum. Mauris
semper dictum auctor. Fusce pulvinar ipsum vitae
enim egestas non sodales libero consectetur.
Morbi diam justo, pulvinar quis tempor ut,
laoreet vel est
g
ccumsan leo mollis vehicula. Fusce nec neque vestibulum leo adipiscing condimentum quis
vitae tpsum adipiscing quis posuere metus interdum. Mauris semper dictum auctor. Fusce
pulvinar ipsum vitae enim egestas non sodales libero consectetur. Morbi diam justo, pulvinar
quis tempor ut, laoreet vel est
FUTURA
Ejercicio

Tipografia en La WEB

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tipografia en La WEB

Cargado por

Copyright:

Formatos disponibles

Tipografía en la web

“Typography exists to honor content.”

Serif: Georgia, Times New Roman, Trebuchet MS

Serif: Georgia, Times New Roman, Trebuchet MS

Serif: Georgia, Times New Roman, Trebuchet MS

Serif: Georgia, Times New Roman, Trebuchet MS

Serif: Georgia, Times New Roman, Trebuchet MS

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

diam tincidunt est, pharetra scelerisque neque sapien eget lectus.

tricies eleifend vitae diam. Etiam quam eros, ultrices at ma-

ipsum primis in faucibus orci luctus et ultrices posuere cubilia

serifas triangulares remates filiformes egipcias palo seco

serifas triangulares remates filiformes egipcias palo seco

serifas triangulares remates filiformes egipcias palo seco

serifas triangulares remates filiformes egipcias palo seco

serifas triangulares remates filiformes egipcias palo seco

serifas triangulares remates filiformes egipcias palo seco

serifas triangulares remates filiformes egipcias palo seco

serifas triangulares remates filiformes egipcias palo seco

Serifas Palo seco

Serifas Palo seco

Serifas Palo seco

titulares con sans serif

in = pulgadas em = relativa al elemento

in = pulgadas em = relativa al elemento

px = pixeles em = relativa al elemento

No hay una técnica perfecta.

No hay una técnica perfecta.

No hay una técnica perfecta.

El texto por defecto en el navegador = 16px

Tamaño deseado / tamaño por defecto del navegador = medida em

H1: 48 píxeles (3em)

Interlineado Espacio de la línea

Tamaño tipografía / medida línea base deseada = medida em

16px / 24px= 1.5 em

Pixel Pixel Pixel

Verdana 18pt Georgia 18pt

En un lugar de la Mancha, de cuyo nombre no En un lugar de la Mancha, de cuyo nombre no quiero

La legibilidad de un texto se ve afectada por la duración de lectura de la línea.

La legibilidad de un texto se ve afectada por la

En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no

En un lugar de la Mancha, de cuyo

1. ¶ (símbolo cambio de párrafo)

1. ¶ (símbolo cambio de párrafo)

1. ¶ (símbolo cambio de párrafo)

4. Un salto de línea después

4. Un salto de línea después

small caps SMALL CAPS

&& & &

Ampliando nuestro catálogo de tipografías

*Algunos diseñadores de tipografía consideran ilegal incrustar fuentes de esta

Tener los archivos en el servidor

libro ejemplo de combinaciones de tipografia:

100 200 300 400 500 600 700 800 900

También podría gustarte