antaviana. open type i css3. el inicio de un prometedor noviazgo
DESCRIPTION
Presentació de Josep Patau al 5è. Congrés Internacional de Tipografia. València y Madrid. Junio de 2012.TRANSCRIPT
![Page 1: Antaviana. Open type i css3. El inicio de un prometedor noviazgo](https://reader035.vdocuments.pub/reader035/viewer/2022062708/558a7a5ed8b42ab8028b46b9/html5/thumbnails/1.jpg)
El refinamiento tipográfico que se avecina
El inicio de unprometedor noviazgo
CSS3 + OpenType
![Page 2: Antaviana. Open type i css3. El inicio de un prometedor noviazgo](https://reader035.vdocuments.pub/reader035/viewer/2022062708/558a7a5ed8b42ab8028b46b9/html5/thumbnails/2.jpg)
CSS3
CSS1
CSS2
Los padres de ellaLos padres de élLa Madre
PostScriptTrue Type
El Abuelo
El Padre
OpenType
CHSSHåkon Wium Lie
SSPBert Bos
World Wide Web Consortium
SGML 1970
Programas de autoedición
Navegadores Web
![Page 3: Antaviana. Open type i css3. El inicio de un prometedor noviazgo](https://reader035.vdocuments.pub/reader035/viewer/2022062708/558a7a5ed8b42ab8028b46b9/html5/thumbnails/3.jpg)
¿Y quién es él?
Es un formato de tipografía digital que incluye un lenguaje de programación interno que permite substituir los caracteres básicos por el de otros conjuntos
OpenType
![Page 4: Antaviana. Open type i css3. El inicio de un prometedor noviazgo](https://reader035.vdocuments.pub/reader035/viewer/2022062708/558a7a5ed8b42ab8028b46b9/html5/thumbnails/4.jpg)
¿Cómo funciona?
Utiliza sufijos de 4 letras, para separar los diferentes conjuntos de funcionalidades
OpenType
liga DLIG ONUM swsh SALT CALT
init FINA SMCP Pau Riba Pau Riba
versalitas
![Page 5: Antaviana. Open type i css3. El inicio de un prometedor noviazgo](https://reader035.vdocuments.pub/reader035/viewer/2022062708/558a7a5ed8b42ab8028b46b9/html5/thumbnails/5.jpg)
¿Cómo funciona? OpenType
SMCP
a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0
a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6
7 8 9 0 feature smcp { # Small Capitals # Latin sub @cajabaja by @versalitas;} smcp;
cajabaja versalitas
![Page 6: Antaviana. Open type i css3. El inicio de un prometedor noviazgo](https://reader035.vdocuments.pub/reader035/viewer/2022062708/558a7a5ed8b42ab8028b46b9/html5/thumbnails/6.jpg)
¿Qué podemos hacer con este montón de letras?
OpenType
Afiché
![Page 7: Antaviana. Open type i css3. El inicio de un prometedor noviazgo](https://reader035.vdocuments.pub/reader035/viewer/2022062708/558a7a5ed8b42ab8028b46b9/html5/thumbnails/7.jpg)
Propiedades de los sufijos OpenType
liga ligaduras
Afiché Afiché
![Page 8: Antaviana. Open type i css3. El inicio de un prometedor noviazgo](https://reader035.vdocuments.pub/reader035/viewer/2022062708/558a7a5ed8b42ab8028b46b9/html5/thumbnails/8.jpg)
Propiedades de los sufijos
Afiché Afiché
OpenType
liga ligadurasdiscrecionales+ DLIG
![Page 9: Antaviana. Open type i css3. El inicio de un prometedor noviazgo](https://reader035.vdocuments.pub/reader035/viewer/2022062708/558a7a5ed8b42ab8028b46b9/html5/thumbnails/9.jpg)
Propiedades de los sufijos
Afiché Afiché
OpenType
liga formas iniciales+ +DLIG init
![Page 10: Antaviana. Open type i css3. El inicio de un prometedor noviazgo](https://reader035.vdocuments.pub/reader035/viewer/2022062708/558a7a5ed8b42ab8028b46b9/html5/thumbnails/10.jpg)
Propiedades de los sufijos
Afiché Afiché
OpenType
liga formas finales+ + +DLIG init FINA
![Page 11: Antaviana. Open type i css3. El inicio de un prometedor noviazgo](https://reader035.vdocuments.pub/reader035/viewer/2022062708/558a7a5ed8b42ab8028b46b9/html5/thumbnails/11.jpg)
Propiedades de los sufijos
Evitan los vecinos "chungos" o problemáticos
¡Confín! ¡ Confín!
OpenType
CALT alternativas contextuales
![Page 12: Antaviana. Open type i css3. El inicio de un prometedor noviazgo](https://reader035.vdocuments.pub/reader035/viewer/2022062708/558a7a5ed8b42ab8028b46b9/html5/thumbnails/12.jpg)
Propiedades de los sufijos
hugle hugleOpenType
SALT alternativasestilísticas
![Page 13: Antaviana. Open type i css3. El inicio de un prometedor noviazgo](https://reader035.vdocuments.pub/reader035/viewer/2022062708/558a7a5ed8b42ab8028b46b9/html5/thumbnails/13.jpg)
Propiedades de los sufijos
Artes Artes
OpenType
SWSH caracteres decorativos
![Page 14: Antaviana. Open type i css3. El inicio de un prometedor noviazgo](https://reader035.vdocuments.pub/reader035/viewer/2022062708/558a7a5ed8b42ab8028b46b9/html5/thumbnails/14.jpg)
Propiedades de los sufijos
E E EE E E
OpenType
SS01 SS02 SS03 SS04 SS…conjuntos estilísticos
![Page 15: Antaviana. Open type i css3. El inicio de un prometedor noviazgo](https://reader035.vdocuments.pub/reader035/viewer/2022062708/558a7a5ed8b42ab8028b46b9/html5/thumbnails/15.jpg)
Propiedades de los sufijos
1678 1678
OpenType
ONUM NUMERALES ESTILO ANTIGUO
![Page 16: Antaviana. Open type i css3. El inicio de un prometedor noviazgo](https://reader035.vdocuments.pub/reader035/viewer/2022062708/558a7a5ed8b42ab8028b46b9/html5/thumbnails/16.jpg)
Propiedades de los sufijos
USA(1) USA(1)
OpenType
SUPS NUMERALES SUPERIORES
![Page 17: Antaviana. Open type i css3. El inicio de un prometedor noviazgo](https://reader035.vdocuments.pub/reader035/viewer/2022062708/558a7a5ed8b42ab8028b46b9/html5/thumbnails/17.jpg)
Propiedades de los sufijos
Xp(6-1) Xp(6-1)
OpenType
SINF NUMERALES CIENTÍFICOS INFERIORES
![Page 18: Antaviana. Open type i css3. El inicio de un prometedor noviazgo](https://reader035.vdocuments.pub/reader035/viewer/2022062708/558a7a5ed8b42ab8028b46b9/html5/thumbnails/18.jpg)
Propiedades de los sufijos
10.111.11120.456.823
12.540
OpenType
pnum numerales proporcionales
10.111.11120.000.000
12.540
![Page 19: Antaviana. Open type i css3. El inicio de un prometedor noviazgo](https://reader035.vdocuments.pub/reader035/viewer/2022062708/558a7a5ed8b42ab8028b46b9/html5/thumbnails/19.jpg)
Propiedades de los sufijos OpenType
& etc…FRAC …ORNM ordn tnum
![Page 20: Antaviana. Open type i css3. El inicio de un prometedor noviazgo](https://reader035.vdocuments.pub/reader035/viewer/2022062708/558a7a5ed8b42ab8028b46b9/html5/thumbnails/20.jpg)
Tradicionalmente orientado a programas de autoedición
![Page 21: Antaviana. Open type i css3. El inicio de un prometedor noviazgo](https://reader035.vdocuments.pub/reader035/viewer/2022062708/558a7a5ed8b42ab8028b46b9/html5/thumbnails/21.jpg)
Pero no todos los programas soportan las funcionalidades de opentype
Señores de Adobe.
Ya os vale!
![Page 22: Antaviana. Open type i css3. El inicio de un prometedor noviazgo](https://reader035.vdocuments.pub/reader035/viewer/2022062708/558a7a5ed8b42ab8028b46b9/html5/thumbnails/22.jpg)
¿Quién es ella?
Las CSS sirven para dar formato o estilo a los textos y objetos de los documentos HTML y XML, utilizados por los navegadores web para la visualización de los contenidos
CSS3
![Page 23: Antaviana. Open type i css3. El inicio de un prometedor noviazgo](https://reader035.vdocuments.pub/reader035/viewer/2022062708/558a7a5ed8b42ab8028b46b9/html5/thumbnails/23.jpg)
CSS3
http://www.congresotipografia.com/wp-content/themes/5cti-default/style.css
/* =Menu-------------------------------------------------------------- */#access { width:740px; }#access .menu-header, div.menu { font-size: 14px; font-family:'PT Serif', serif; font-weight:700; margin-left:0px; text-align:left;}#access .menu-header ul.sub-menu { font-size: 14px; font-family:'PT Serif', serif; font-weight:400; margin-left:0px; margin-right: 16px; width: 110px; text-align:left;}
#access .menu-header ul,div.menu ul { list-style: none; margin: 0;}#access .menu-header li,div.menu li { width:110px; border-top:#000000 solid 8px; float: left; margin-right: 16px; position: relative;}
#access ul.sub-menu li { width:110px; border-top:#000 solid 1px; float: left; position: relative;
![Page 24: Antaviana. Open type i css3. El inicio de un prometedor noviazgo](https://reader035.vdocuments.pub/reader035/viewer/2022062708/558a7a5ed8b42ab8028b46b9/html5/thumbnails/24.jpg)
CSS3OpenType
¿Cómo unirlos?
![Page 25: Antaviana. Open type i css3. El inicio de un prometedor noviazgo](https://reader035.vdocuments.pub/reader035/viewer/2022062708/558a7a5ed8b42ab8028b46b9/html5/thumbnails/25.jpg)
<html> <head> <title>Farrerons OT Test</title> <style type="text/css"> @font-face { font-family: FarreronsSerif; src: url(fonts/FarreronsSerifRegular.woff ) format("woff"), url(fonts/FarreronsSerifRegular.otf ) format("opentype"); } body { font-family: FarreronsSerif, serif; } .ligaduras { -moz-font-feature-settings: "dlig=1"; } .liga-pnum { -moz-font-feature-settings: "dlig=1,pnum=1"; } .iniciales{ -moz-font-feature-settings: "init=1"; } .finales { -moz-font-feature-settings: "fina=1"; } .versalitas { -moz-font-feature-settings: "smcp=1"; } .superiores { -moz-font-feature-settings: "sups=1"; } </style> <body> <p class="ligaduras">Machito y el Sr Cactus</p>
1
2
3
Vincula la fuente
Crea los estilos
Personaliza!
![Page 26: Antaviana. Open type i css3. El inicio de un prometedor noviazgo](https://reader035.vdocuments.pub/reader035/viewer/2022062708/558a7a5ed8b42ab8028b46b9/html5/thumbnails/26.jpg)
<html> <head> <title>Farrerons OT Test</title> <style type="text/css"> @font-face { font-family: FarreronsSerif; src: url(fonts/FarreronsSerifRegular.woff ) format("woff"), url(fonts/FarreronsSerifRegular.otf ) format("opentype");
Vinculando la fuente
Servidor propio Servidor externo
![Page 27: Antaviana. Open type i css3. El inicio de un prometedor noviazgo](https://reader035.vdocuments.pub/reader035/viewer/2022062708/558a7a5ed8b42ab8028b46b9/html5/thumbnails/27.jpg)
Tipos de licencia
Gratis Pago único Subscripción anual por peso
Subscripción anual y
barra libre*
Typical price is $7.50/yearper font
Depende del precio de la tipografia
Servidor
externo o propio Servidor externoServidor externo
* Consultad planes de suscripción
Servidor propio
![Page 28: Antaviana. Open type i css3. El inicio de un prometedor noviazgo](https://reader035.vdocuments.pub/reader035/viewer/2022062708/558a7a5ed8b42ab8028b46b9/html5/thumbnails/28.jpg)
body { font-family: FarreronsSerif, serif; } .ligaduras { -moz-font-feature-settings: "dlig=1"; } .liga-pnum { -moz-font-feature-settings: "dlig=1,pnum=1"; } .iniciales{ -moz-font-feature-settings: "init=1"; } .finales { -moz-font-feature-settings: "fina=1"; } .versalitas { -moz-font-feature-settings: "smcp=1"; } .superiores { -moz-font-feature-settings: "sups=1"; } </style> <body>
Creando estilos
Nombre del estilo
Sufijos de las funcionalidades OpenType que se desean aplicar al estilo
![Page 29: Antaviana. Open type i css3. El inicio de un prometedor noviazgo](https://reader035.vdocuments.pub/reader035/viewer/2022062708/558a7a5ed8b42ab8028b46b9/html5/thumbnails/29.jpg)
Vista de los estilos en Adobe Dreamweaver a punto para dar formato a los textos
![Page 30: Antaviana. Open type i css3. El inicio de un prometedor noviazgo](https://reader035.vdocuments.pub/reader035/viewer/2022062708/558a7a5ed8b42ab8028b46b9/html5/thumbnails/30.jpg)
Dos distintos géneros de impresión se conocían antes del descubrimiento de Gutenberg: la xilografía o grabado de caracteres en tablas de madera, y la calcografía o impresión en planchas de metal, ora en medio relieve, ora en dulce. La primera precedió a la segunda, pues la más antigua prueba con fecha conocida de un grabado en metal destinado a la impresión, es un San Bernardo del año 1454 que existe en la Biblioteca de París, al paso que ya en el siglo XIV se estampaban naipes grabados en madera, principalmente en Alemania o los Países-Bajos. De suponer es también que se imprimiesen naipes en España, pues estaba el uso de ellos tan generalizado, que ya fue objeto de prohibiciones, tanto por Alfonso XI como por Juan I de Castilla(1). Como quiera que fuese, los libros impresos xilográfica o calcográficamente, en tablas o láminas, y por consiguiente en caracteres fijos é inmóviles, precedió a la Tipografía, que se diferencia esencialmente de las impresiones anteriores por la movilidad de los tipos. La primera edición del Catholicon Johannis Januensis(2) fue xilográfica; la segunda en caracteres movibles. Éstos fueron grabados en un principio letra por letra, con separación y singularmente, pero muy pronto se llegó a fundirlas en matrices, primero grabadas en hueco, y luego hincadas por medio de punzones. Si la historia de la Imprenta en España se halla incompleta y casi en el mismo estado en que la dejó cien años hace el P. Méndez, que no pasó de los incunables, o libros impresos en el siglo XV, la
D os distintos géneros de impresión se conocían antes del descubrimiento de Gutenberg: la xilografía o grabado de caracteres en tablas de
madera, y la calcografía o impresión en planchas de metal, ora en medio relieve, ora en dulce. La primera precedió a la segunda, pues la más antigua prueba con fecha conocida de un grabado en metal destinado a la impresión, es un San Bernardo del año 1454 que existe en la Biblioteca de París, al paso que ya en el siglo xiv se estampaban naipes grabados en madera, principalmente en Alemania o los Países-Bajos. De suponer es también que se imprimiesen naipes en España, pues estaba el uso de ellos tan generalizado, que ya fue objeto de prohibiciones, tanto por Alfonso xi como por Juan i de Castilla(1). Como quiera que fuese, los libros impresos xilográfica o calcográficamente, en tablas o láminas, y por consiguiente en caracteres fijos é inmóviles, precedió a la Tipografía, que se diferencia esencialmente de las impresiones anteriores por la movilidad de los tipos. La primera edición del Catholicon Johannis Januensis(2) fue xilográfica; la segunda en caracteres movibles. Éstos fueron grabados en un principio letra por letra, con separación y singularmente, pero muy pronto se llegó a fundirlas en matrices, primero grabadas en hueco, y luego hincadas por medio de punzones. Si la historia de la Imprenta en España se halla incompleta y casi en el mismo estado en que la dejó cien años hace el P. Méndez, que no pasó de los incunables,
TEXTODESCUIDADO
TEXTOMIMADO
![Page 31: Antaviana. Open type i css3. El inicio de un prometedor noviazgo](https://reader035.vdocuments.pub/reader035/viewer/2022062708/558a7a5ed8b42ab8028b46b9/html5/thumbnails/31.jpg)
http://letterror.com/develop/css3/kosmik/
![Page 32: Antaviana. Open type i css3. El inicio de un prometedor noviazgo](https://reader035.vdocuments.pub/reader035/viewer/2022062708/558a7a5ed8b42ab8028b46b9/html5/thumbnails/32.jpg)
http://hacks.mozilla.org/2010/11/firefox-4-font-feature-support/
![Page 33: Antaviana. Open type i css3. El inicio de un prometedor noviazgo](https://reader035.vdocuments.pub/reader035/viewer/2022062708/558a7a5ed8b42ab8028b46b9/html5/thumbnails/33.jpg)
![Page 34: Antaviana. Open type i css3. El inicio de un prometedor noviazgo](https://reader035.vdocuments.pub/reader035/viewer/2022062708/558a7a5ed8b42ab8028b46b9/html5/thumbnails/34.jpg)
![Page 35: Antaviana. Open type i css3. El inicio de un prometedor noviazgo](https://reader035.vdocuments.pub/reader035/viewer/2022062708/558a7a5ed8b42ab8028b46b9/html5/thumbnails/35.jpg)
![Page 36: Antaviana. Open type i css3. El inicio de un prometedor noviazgo](https://reader035.vdocuments.pub/reader035/viewer/2022062708/558a7a5ed8b42ab8028b46b9/html5/thumbnails/36.jpg)
![Page 37: Antaviana. Open type i css3. El inicio de un prometedor noviazgo](https://reader035.vdocuments.pub/reader035/viewer/2022062708/558a7a5ed8b42ab8028b46b9/html5/thumbnails/37.jpg)
¿Os gusta verdad?DEMASIADO BONITO PARA SER CIERTO
¡Hablemos de los problemas!
![Page 38: Antaviana. Open type i css3. El inicio de un prometedor noviazgo](https://reader035.vdocuments.pub/reader035/viewer/2022062708/558a7a5ed8b42ab8028b46b9/html5/thumbnails/38.jpg)
Problemas
=Necesita más tiempo para el formateo del texto y gente con experiencia en ortotipografía para aplicar correctamente los estilos.
![Page 39: Antaviana. Open type i css3. El inicio de un prometedor noviazgo](https://reader035.vdocuments.pub/reader035/viewer/2022062708/558a7a5ed8b42ab8028b46b9/html5/thumbnails/39.jpg)
Las funcionalidades OpenType sólo las soporta Firefox 4 y superiores, Internet Explorer 10 beta y Google Chrome en Windows.
Actualmente, solo una fracción de los usuarios lo previsualiza correctamente en su navegador.
ProblemasProblemas
![Page 40: Antaviana. Open type i css3. El inicio de un prometedor noviazgo](https://reader035.vdocuments.pub/reader035/viewer/2022062708/558a7a5ed8b42ab8028b46b9/html5/thumbnails/40.jpg)
ProblemasLos navegadores de iPad y iPhone no soportan OpenType
![Page 41: Antaviana. Open type i css3. El inicio de un prometedor noviazgo](https://reader035.vdocuments.pub/reader035/viewer/2022062708/558a7a5ed8b42ab8028b46b9/html5/thumbnails/41.jpg)
Hablar de OpenType es hablar de tipografías con un extenso número de caracteres que generan archivos pesados que ralentizan la carga de la página web
Problemas
![Page 42: Antaviana. Open type i css3. El inicio de un prometedor noviazgo](https://reader035.vdocuments.pub/reader035/viewer/2022062708/558a7a5ed8b42ab8028b46b9/html5/thumbnails/42.jpg)
ConclusionesUnos brotes verdes están apareciendo, pero…
* Enriquecimiento progresivo
¡Hablemos del progressive enhancement!*
cojones ¡ya!
![Page 43: Antaviana. Open type i css3. El inicio de un prometedor noviazgo](https://reader035.vdocuments.pub/reader035/viewer/2022062708/558a7a5ed8b42ab8028b46b9/html5/thumbnails/43.jpg)
El enriquecimiento progresivo, va a llegar!
/* Firefox v3.6+ */background-image:-moz-linear-gradient(50% 0% -90deg,rgb(241,241,241) 0%,rgb(189,189,174) 100%); /* safari v4.0+ and by Chrome v3.0+ */background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0, rgb(241,241,241)),color-stop(1, rgb(189,189,174)));/* Chrome v10.0+ and by safari nightly build*/background-image:-webkit-linear-gradient(-90deg,rgb(241,241,241) 0%,rgb(189,189,174) 100%);/* Opera v11.10+ */background-image:-o-linear-gradient(-90deg,rgb(241,241,241) 0%,rgb(189,189,174) 100%);/* IE v10+ */background-image:-ms-linear-gradient(-90deg,rgb(241,241,241) 0%,rgb(189,189,174) 100%);background-image:linear-gradient(-90deg,rgb(241,241,241) 0%,rgb(189,189,174) 100%);width:338px;height:220px;/* Firefox v1.0+ */-moz-border-radius:25px 25px 17px 25px;/* Safari v3.0+ and by Chrome v0.2+ */-webkit-border-radius:25px 25px 17px 25px;/* Firefox v4.0+ , Safari v5.0+ , Chrome v4.0+ , Opera v10.5+ and by IE v9.0+ */border-radius:25px 25px 17px 25px;-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#fff1f1f1,endColorstr=#ffbdbdae,GradientType=0)";filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#fff1f1f1,endColorstr=#ffbdbdae,GradientType=0);
NavegadorActualizadoNavegadorActualizado
NavegadorObsoleto
![Page 44: Antaviana. Open type i css3. El inicio de un prometedor noviazgo](https://reader035.vdocuments.pub/reader035/viewer/2022062708/558a7a5ed8b42ab8028b46b9/html5/thumbnails/44.jpg)
Confiad en navegadores no integrados en el sistema operativo, y con frecuentes actualizaciónes
Conclusiones
![Page 45: Antaviana. Open type i css3. El inicio de un prometedor noviazgo](https://reader035.vdocuments.pub/reader035/viewer/2022062708/558a7a5ed8b42ab8028b46b9/html5/thumbnails/45.jpg)
Muchas GraciasTrajana Sans
Lletraferits
Por Vuestra Asistencia
ConfettiParalex ValliciergoFarrerons Serif
Agradecimientos