CSS3 + OpenType by UnosTiposDuros UnosTiposDuros

CSS3 + OpenType

El inicio de un prometedor noviazgo El refinamiento tipogrรกfico que se avecina

Los padres de él

Los padres de ella SGML 1970

La Madre

El Abuelo

True Type

PostScript El Padre

World Wide Web Consortium

SSP Bert Bos

CHSS Håkon Wium Lie

CSS1

Open Type

Programas de autoedición

CSS2

CSS3

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

Open Type

驴C贸mo funciona?

Open Type

Utiliza sufijos de 4 letras, para separar los diferentes conjuntos de funcionalidades

liga

DLIG

ONUM

init

FINA

SMCP versalitas

swsh

Pau Riba

SALT

CALT

Pau Riba

驴C贸mo funciona?

Open Type

SMCP cajabaja

versalitas

abcdefghij klmnopqrs tuvwxyz12 34567890

abcdefgh ijklmnop qrstuvw xyz123456 7890

feature smcp { # Small Capitals # Latin sub @cajabaja by @versalitas; } smcp;

¿Qué podemos hacer con este montón de letras?

Afiché

Open Type

Propiedades de los sufijos liga

Open Type

ligaduras

AfichĂŠ AfichĂŠ

Propiedades de los sufijos liga

DLIG

Open Type

ligaduras discrecionales

AfichĂŠ AfichĂŠ

Propiedades de los sufijos liga

DLIG

init

Open Type

formas iniciales

AfichĂŠ AfichĂŠ

Propiedades de los sufijos liga

DLIG

init

FINA

Open Type

formas finales

Afiché Afiché

Propiedades de los sufijos CALT

Open Type

alternativas contextuales

¡Confín! ¡ Confín! Evitan los vecinos "chungos" o problemáticos

Propiedades de los sufijos SALT

Open Type

alternativas estilĂsticas

hugle hugle

Propiedades de los sufijos SWSH

Open Type

caracteres decorativos

Artes Artes

Propiedades de los sufijos SS01

conjuntos estilísticos

SS02

SS03

SS04

Open Type

SS…

E E EE E E

Propiedades de los sufijos ONUM

Open Type

NUMERALES ESTILO ANTIGUO

1678 1678

Propiedades de los sufijos SUPS

Open Type

NUMERALES SUPERIORES

USA(1) USA(1)

Propiedades de los sufijos SINF

Open Type

NUMERALES CIENTÍFICOS INFERIORES

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

Propiedades de los sufijos pnum

Open Type

numerales proporcionales

10.111.111 20.456.823 12.540

10.111.111 20.000.000 12.540

Propiedades de los sufijos

& etc… FRAC

ORNM

ordn

tnum

…

Open Type

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

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; }

CSS3 #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;

Open Type

CSS3

驴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"); }

Vincula la fuente

Crea los estilos

Personaliza!

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>

Servidor propio

Vinculando la fuente

Servidor externo

Tipos de licencia Gratis Servidor externo o propio

Pago 煤nico Servidor propio

Subscripci贸n anual por peso Servidor externo

Subscripci贸n anual y barra libre* Servidor externo

Depende del precio de la tipografia

Typical price is $7.50/year per font

* Consultad planes de suscripci贸n

body { font-family: FarreronsSerif, serif; }

Creando estilos

.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>

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 TEXTO estado en que la dejó cien años hace el P. Méndez, que no DESCUIDADO pasó de los incunables, o libros impresos en el siglo XV, la

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 TEXTO se halla incompleta y casi en el mismo estado enMIMADO que la dejó cien años hace el P. Méndez, que no pasó de los incunables,

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.

Problemas 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.

Problemas Los navegadores de iPad y iPhone no soportan OpenType

Problemas 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

¡Hablemos del progressive enhancement!* cojones ¡ya!

Conclusiones Unos brotes verdes están apareciendo, pero…

* Enriquecimiento progresivo

El enriquecimiento progresivo, va a llegar!

Navegador Obsoleto

Navegador Actualizado

/* 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;

Conclusiones Confiad en navegadores no integrados en el sistema operativo, y con frecuentes actualizaci贸nes

Muchas Gracias Por Vuestra Asistencia

Trajana Sans

Farrerons Serif

Paralex

Valliciergo

Agradecimientos

Lletraferits

Confetti