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

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
El Abuelo La Madre

True Type
PostScript
World Wide Web Consortium
El Padre

CHSS SSP
Håkon Wium Lie Bert Bos

CSS1

CSS2
Open Programas de
autoedición CSS3
Type

Navegadores Web

¿Y quién es él? Open
Type

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

¿Cómo funciona? Open
Type

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

liga DLIG ONUM swsh SALT CALT

init FINA SMCP Pau Riba Pau Riba
versalitas

¿Cómo funciona? Open
Type

SMCP

cajabaja versalitas

abcdefghij abcdefgh
klmnopqrs ijklmnop
tuvwxyz12 qrstuvw
34567890 feature smcp { # Small Capitals
xyz123456
# Latin
sub @cajabaja by @versalitas;
7890
} smcp;

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

Afiché

Propiedades de los sufijos Open
Type
liga ligaduras

Afiché Afiché

Type
liga
+ DLIG
ligaduras
discrecionales

Afiché Afiché

Type
liga
+ DLIG
+ init
formas
iniciales

Afiché Afiché

Type
liga
+ DLIG
+ init
+ FINA
formas
finales

Afiché Afiché

Type
CALT
alternativas
contextuales

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

Type
SALT
alternativas
estilísticas

hugle hugle

Type
SWSH
caracteres
decorativos

Artes Artes

Type
SS01
conjuntos SS02 SS03 SS04 SS…
estilísticos

E E EE E E

Type
ONUM
NUMERALES ESTILO
ANTIGUO

1678 1678

Type
SUPS
NUMERALES
SUPERIORES

USA(1) USA(1)

Type
SINF
NUMERALES CIENTÍFICOS
INFERIORES

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

Type
pnum
numerales
proporcionales

10.111.111 10.111.111
20.456.823 20.000.000
12.540 12.540

Type

& 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? CSS3

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

http://www.congresotipografia.com/wp-content/themes/5cti-default/style.css

/* =Menu
-------------------------------------------------------------- */
CSS3
#access { #access .menu-header ul,
width:740px; div.menu ul {
} list-style: none;
#access .menu-header, div.menu { margin: 0;
font-size: 14px; }
font-family:'PT Serif', serif; #access .menu-header li,
font-weight:700; div.menu li {
margin-left:0px; width:110px;
text-align:left; border-top:#000000 solid 8px;
} float: left;
#access .menu-header ul.sub-menu { margin-right: 16px;
font-size: 14px; position: relative;
font-family:'PT Serif', serif; }
font-weight:400;
margin-left:0px; #access ul.sub-menu li {
margin-right: 16px; width:110px;
width: 110px; border-top:#000 solid 1px;
text-align:left; float: left;
} position: relative;

Open
CSS3
Type

¿Cómo unirlos?

<html>
<head>
<title>Farrerons OT Test</title>
<style type="text/css">

1
@font-face {
font-family: FarreronsSerif;
src: url(fonts/FarreronsSerifRegular.woff ) format("woff"), Vincula la fuente
url(fonts/FarreronsSerifRegular.otf ) format("opentype");
}

body { font-family: FarreronsSerif, serif; }

2
.ligaduras { -moz-font-feature-settings: "dlig=1"; }
.liga-pnum { -moz-font-feature-settings: "dlig=1,pnum=1"; }
.iniciales{ -moz-font-feature-settings: "init=1"; } Crea los estilos
.finales { -moz-font-feature-settings: "fina=1"; }
.versalitas { -moz-font-feature-settings: "smcp=1"; }
.superiores { -moz-font-feature-settings: "sups=1"; }

3
</style>
<body>
Personaliza!
<p class="ligaduras">Machito y el Sr Cactus</p>

<html>
<head>
<title>Farrerons OT Test</title>
Vinculando la fuente
<style type="text/css">
@font-face {
font-family: FarreronsSerif;
src: url(fonts/FarreronsSerifRegular.woff ) format("woff"),
url(fonts/FarreronsSerifRegular.otf ) format("opentype");

Servidor propio Servidor externo

Tipos de licencia
Gratis Pago único Subscripción Subscripción
Servidor anual por peso anual y
Servidor propio
externo o propio Servidor externo
barra libre*
Servidor externo

Depende del precio de Typical price is $7.50/year
la tipografia 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 Sufijos de las funcionalidades OpenType
del estilo que se desean aplicar al estilo

Vista de los estilos en Adobe Dreamweaver
a punto para dar formato a los textos

D
Dos distintos géneros de impresión se conocían antes del os distintos géneros de impresión se conocían
descubrimiento de Gutenberg: la xilografía o grabado de antes del descubrimiento de Gutenberg: la
caracteres en tablas de madera, y la calcografía o impresión xilografía o grabado de caracteres en tablas de
en planchas de metal, ora en medio relieve, ora en dulce. La madera, y la calcografía o impresión en planchas de metal,
primera precedió a la segunda, pues la más antigua prueba ora en medio relieve, ora en dulce. La primera precedió a la
con fecha conocida de un grabado en metal destinado a segunda, pues la más antigua prueba con fecha conocida
la impresión, es un San Bernardo del año 1454 que existe de un grabado en metal destinado a la impresión, es un San
en la Biblioteca de París, al paso que ya en el siglo XIV se Bernardo del año 1454 que existe en la Biblioteca de París, al
estampaban naipes grabados en madera, principalmente en paso que ya en el siglo xiv se estampaban naipes grabados
Alemania o los Países-Bajos. De suponer es también que se en madera, principalmente en Alemania o los Países-Bajos.
imprimiesen naipes en España, pues estaba el uso de ellos tan De suponer es también que se imprimiesen naipes en
generalizado, que ya fue objeto de prohibiciones, tanto por España, pues estaba el uso de ellos tan generalizado, que ya
Alfonso XI como por Juan I de Castilla(1). Como quiera que fue objeto de prohibiciones, tanto por Alfonso xi como
fuese, los libros impresos xilográfica o calcográficamente, por Juan i de Castilla(1). Como quiera que fuese, los
en tablas o láminas, y por consiguiente en caracteres fijos libros impresos xilográfica o calcográficamente, en tablas o
é inmóviles, precedió a la Tipografía, que se diferencia láminas, y por consiguiente en caracteres fijos é inmóviles,
esencialmente de las impresiones anteriores por la movilidad precedió a la Tipografía, que se diferencia esencialmente
de los tipos. La primera edición del Catholicon Johannis de las impresiones anteriores por la movilidad de los tipos.
Januensis(2) fue xilográfica; la segunda en caracteres La primera edición del Catholicon Johannis Januensis(2) fue
movibles. Éstos fueron grabados en un principio letra por xilográfica; la segunda en caracteres movibles. Éstos fueron
letra, con separación y singularmente, pero muy pronto se grabados en un principio letra por letra, con separación
llegó a fundirlas en matrices, primero grabadas en hueco, y y singularmente, pero muy pronto se llegó a fundirlas en
luego hincadas por medio de punzones. Si la historia de la matrices, primero grabadas en hueco, y luego hincadas por
TEXTO España se halla incompleta y casi en el mismo
Imprenta en TEXTO
medio de punzones. Si la historia de la Imprenta en España
DESCUIDADO años hace el P. Méndez, que no
estado en que la dejó cien MIMADO
se halla incompleta y casi en el mismo estado en que la dejó
pasó de los incunables, o libros impresos en el siglo XV, la 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 Navegador
Obsoleto 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 Confetti

Agradecimientos

Lletraferits

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

Recomendados

Recomendados

Más contenido relacionado

Más de Can Antaviana

Más de Can Antaviana (14)

Último

Último (20)

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