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


Afiché Afiché

OpenType

liga formas iniciales+ +DLIG init


Afiché Afiché

OpenType

liga formas finales+ + +DLIG init FINA


Evitan los vecinos "chungos" o problemáticos

¡Confín! ¡ Confín!

OpenType

CALT alternativas contextuales


hugle hugleOpenType

SALT alternativasestilísticas


Artes Artes

OpenType

SWSH caracteres decorativos


E E EE E E

OpenType

SS01 SS02 SS03 SS04 SS…conjuntos estilísticos


1678 1678

OpenType

ONUM NUMERALES ESTILO ANTIGUO


USA(1) USA(1)

OpenType

SUPS NUMERALES SUPERIORES


Xp(6-1) Xp(6-1)

OpenType

SINF NUMERALES CIENTÍFICOS INFERIORES


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

Business

Antaviana. Open type i css3. El inicio de un prometedor noviazgo