Antaviana. Open type i css3. El inicio de un prometedor noviazgo.
-
Upload
can-antaviana -
Category
Business
-
view
305 -
download
1
description
Transcript of Antaviana. Open type i css3. El inicio de un prometedor noviazgo.
El refinamiento tipográfico que se avecina
El inicio de unprometedor noviazgo
CSS3 + OpenType
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
¿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
¿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
¿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
¿Qué podemos hacer con este montón de letras?
OpenType
Afiché
Propiedades de los sufijos OpenType
liga ligaduras
Afiché Afiché
Propiedades de los sufijos
Afiché Afiché
OpenType
liga ligadurasdiscrecionales+ DLIG
Propiedades de los sufijos
Afiché Afiché
OpenType
liga formas iniciales+ +DLIG init
Propiedades de los sufijos
Afiché Afiché
OpenType
liga formas finales+ + +DLIG init FINA
Propiedades de los sufijos
Evitan los vecinos "chungos" o problemáticos
¡Confín! ¡ Confín!
OpenType
CALT alternativas contextuales
Propiedades de los sufijos
hugle hugleOpenType
SALT alternativasestilísticas
Propiedades de los sufijos
Artes Artes
OpenType
SWSH caracteres decorativos
Propiedades de los sufijos
E E EE E E
OpenType
SS01 SS02 SS03 SS04 SS…conjuntos estilísticos
Propiedades de los sufijos
1678 1678
OpenType
ONUM NUMERALES ESTILO ANTIGUO
Propiedades de los sufijos
USA(1) USA(1)
OpenType
SUPS NUMERALES SUPERIORES
Propiedades de los sufijos
Xp(6-1) Xp(6-1)
OpenType
SINF NUMERALES CIENTÍFICOS INFERIORES
Propiedades de los sufijos
10.111.11120.456.823
12.540
OpenType
pnum numerales proporcionales
10.111.11120.000.000
12.540
Propiedades de los sufijos OpenType
& etc…FRAC …ORNM ordn tnum
Tradicionalmente orientado a programas de autoedición
Pero no todos los programas soportan las funcionalidades de opentype
Señores de Adobe.
Ya os vale!
¿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
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;
CSS3OpenType
¿Cómo unirlos?
<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!
<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
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
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
Vista de los estilos en Adobe Dreamweaver a punto para dar formato a los textos
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
http://letterror.com/develop/css3/kosmik/
http://hacks.mozilla.org/2010/11/firefox-4-font-feature-support/
¿Os gusta verdad?DEMASIADO BONITO PARA SER CIERTO
¡Hablemos de los problemas!
Problemas
=Necesita más tiempo para el formateo del texto y gente con experiencia en ortotipografía para aplicar correctamente los estilos.
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
ProblemasLos navegadores de iPad y iPhone no soportan OpenType
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
ConclusionesUnos brotes verdes están apareciendo, pero…
* Enriquecimiento progresivo
¡Hablemos del progressive enhancement!*
cojones ¡ya!
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
Confiad en navegadores no integrados en el sistema operativo, y con frecuentes actualizaciónes
Conclusiones
Muchas GraciasTrajana Sans
Lletraferits
Por Vuestra Asistencia
ConfettiParalex ValliciergoFarrerons Serif
Agradecimientos