Mostrando entradas con la etiqueta Tipografía digital. Mostrar todas las entradas
Mostrando entradas con la etiqueta Tipografía digital. Mostrar todas las entradas

sábado, 30 de enero de 2016

7.4 Tipografía creativa.


En este apartado os comentaré las diferencias entre las tipos de edición y la creativas:


- Tipos de edición:

Son legibles, con interlineado y línea de base regular, con kernin regular, con márgenes, uniformidad de caracteres... Son tipos que pasan desapercibidas y den belleza, serán de un modo u otro según el soporte y el público, por ejemplo en un libro, periódico, revista...


http://www.congresotipografia.com/wp-content/uploads/Mostra01_w.jpg


- Tipos creativas:

Comunican a través de una imagen, de por las palabras en sí, aporta una metáfora visual, con estilos variados, con imágenes, con diferentes composiciones, con contornos, juega con el Kerning e interlineados y rompe la línea. Son tipos que llaman la atención, que impactan y comunican claramente un mensaje. Para carteles, poster...


http://hazmeweb.es/wp-content/uploads/2014/04/Tipografia_dibujo.jpg


- El texto: adquiere valor de imagen y como ya he dicho se puede hablar de metáfora visual.              
- Ahora os mencionaré algunas fuentes libres, decorativas y de titulares:

Como ya mencioné en el apartado 5.6 Tipos libres, decorativos y detitulares esto ahora dedicaré a mencionarlo por encima, si quieren saber más solo tiene que ir a ese punto del blog.

http://www.letramania.com/archivos/miniaturas/Stencil.jpg
Algunas tipos son:

  • Stencil/ Pantalla




http://content.altfonts.com:88/img/T/E/Techno-Hideo.png


  • Techno



http://cdn.designbeep.com/wp-content/uploads/2012/10/25.free-brush-fonts.jpg


  • Brush



http://st.depositphotos.com/1030956/5167/v/950/
depositphotos_51675639-Halftone-dots-font-dirty-
grunge-color-pixels-print-texture-lett.jpg




  • Texture








https://mapra2preimpresion.files.wordpress.com/2011/11/fantasia.jpg



  • Fantasía...






¡Espero que les haya gustado!
¡Hasta la próxima!



7.2 Fundamentos del diseño tipográfico.



1- Lo primero que hay que plantearse cuando se quiere hacer un proyecto tipográfico es definir las características de la familia tipográfica que uno pretende crear. Características a tener en cuenta:

-Peso
-Eje/ modulación
-Ancho x
-Altura x
-Contraste trazos
-Remates

Son las características que definen a la letra, de edición normalmente.


2- Correcciones ópticas, las correcciones que hay son:



https://tiposformales.files.wordpress.com/
2010/09/he2.jpg
- Coherencia formal; Si estoy haciendo una fuente tipográfica y tengo claro las caracteristicas que tiene que tener, tengo que intentar repetir las mismas características en todas las letras de la fuente.

- Correcciones concretas; También hay correcciones concretas, como por ejemplo en la “E” mayúscula. En la “E” el palo del medio se coloca ligeramente mas arriba y no en el medio, para que cuando lo veamos lo hagamos bien, esto es debido a un efecto óptico, La O no es un circulo, sino que tiene un eje que le da más altura que anchura, el circulo interno le da el grosor y la curvatura. Entre otras muchas correcciones.




https://upload.wikimedia.org/wikipedia/commons/
thumb/d/da/Kerning_EN.svg/2000px-Kerning_EN.svg.

3- Espaciado no solo lo tienen las letras, sino también:


-Prosa o kerning, espaciado entre caracteres. 

-Numerales.

-Espacios verticales, que afectan a los interlineados. Es el espacio entre los parrafos, para impedir, por ejemplo que una “j” del párrafo de arriba moleste a una “l” del parrafo de abajo. Para que haya el bastante espacio entre párrafos para que los trazos ascendentes y descendentes no se toquen.

-Acoplamiento: que consiste en que se superponener los espacios de los huecos de las letras,
por ejemplo en PAVA , la A invade el espacio de la P y la V de la A. Esto ocurre por las formas de las letras, que parece que en unos sitios queda más espacio en blanco que en otros y esto se arregla superponiendo los espacios.



¡Hasta la próxima!

7.1 El proceso de diseño tipográfico.


http://tipo-e.com/blog/wp-content/uploads/
2012/08/gandhi_bocetos_2-600x459.jpg

1-A la hora de diseñar algo se tiene en cuenta un proyecto que tiene dos partes; 
(Motivación y Bocetos)

Para diseñar cualquier cosa hay que tener en cuenta un proyecto, en el cual lo primero que se hace es un boceto, pero antes del boceto esta la motivación para diseñar una tipografía. 

Puede haber una motivación de caracter personal o un encargo, pero además hay otros motivos a parte de estos dos anteriores, por ejemplo, el interes por aprender o ampliar conocimientos, practicar una
 disciplina, para darse a conocer, por ganar dinero...


2 -Ya realizado el proyecto, de pensar el para que y como se va a usar y los bocetos, se pasa al siguiente paso que sería la digitalización:

Lo primero sería crear la fuente con el peso normal, eso se llama Master, es la tipo base de la que surgen todas las variaciones de la tipo. Se elije la ilustración que puede estar en papel abocetada , escaneado... y se empieza a digitalizar. Se suelen hacer las tipos en illustrator y después se exportan a un programa de diseño tipográfico.


https://tiposformales.files.wordpress.com/2010/08/156_desarrollodefuentetelteca.jpg

3- Y pasamos al siguiente paso que sería la producción

En este proceso se hacen los múltiples o la familia de la fuente (negrita, cursiva...)

4- Y pasamos a la postproducción

En este proceso se crean y calculan o miden los espaciados, un proceso muy importante de la tipografía. Las formas y contraformas se tienen mucho en cuenta a la hora de medir y calcular los espacios. El espaciado que debe de haber entre las letras se llama; Prosa ó Kerning.

5- Y el último paso sería la comercialización

Llegados a este paso, ya hemos acabado la fuente tipográfica y estamos preparados para ponerla a la venta, y distribuirla. Hay ya cada uno hace lo que vea mejor, si la quiere vender, ponerla gratuita, regalarla, colgarla en su pagina web, apoyarse en una fundición digital como MyFonts por ejemplo, que la va a poner en circulación...


¡Hasta la próxima!

6.5 Tipografía en soportes digitales.


En este apartado os comentare los diferentes soportes digitales que hay.


1- Web

Comentar que hace unos años atrás si usabas una de las tipos de Windows o Mac para una pagina web, sabias que lo escrito iba a salir bien, que los demás verían el texto tal y como tu lo estabas viendo, pero si trabajabas con otras tipos que no fueran ni de Windows ni Mac, corrías el riesgo de que los demás no lo viesen como tu lo estabas viendo, pero esto se fue arreglando con el tiempo. 

 Tipos que se podían usar: vendarna, time new roman, comic sans sans serif,...

Y comentar que los estándares de las pantallas se han ido cambiando a lo largo de tiempo, antes eran más pequeños y ahora son grandes, y las tipos se han tenido que ir adaptando. Y decir que el tamaño de las tipos no bajan de 9, ya que no se leería bien.



2- Móvil/ tablets:
http://dispersium.es/wp-content/uploads/
2014/04/responsive-vs-mobile-first.png

Hay que tener en cuenta que lo que hagas, digitalmente, se va a ver en tablets, ordenadores, móviles...

Actualmente hay un movimiento llamado Mobile First, por el que se consume más datos desde el móvil, que desde otros dispositivos, entonces cuando se diseña una pagina por ejemplo, para lo primero que se diseña es para móviles y después es cuando ese diseño se pasa a formato tablet y ordenador.







3 – Libros digitales:

Uno de los avances que hizo la wed fue las Hojas de Estilo (CSS), define como va a ser el texto de un contenido que esta en la web, el tipo de fuente, tamaño, jerarquía...

En la versión 1 de la CSS no se podía integrar ninguna fuente, solo se podía utilizar las que tenía el sistema por defecto, tu no podías añadirles nuevas. O si no tenías que incluir dos alternativas, una para MAC y otra para Window, de tipos, entonces tenías que pensar el como iba a salir en Mac y como iba a salir en Windows, y era un lio.

Y llego la version 2 con una función llamada @font-face, que te permitía añadir en tu pagina web una fuente y eso automáticamente servía como una carga temporal o incrustada, cualquier fuente que tu utilizaras al entrar el cliente se veía, con cualquier fuente que utilizases, pero no tenía mucha seguridad y esto provocó que muchos informáticos pudieran coger la tipo de ahí y las piratearan, esto facilito la piratearía de fuentes.

En la versión 2.1 eliminaron la función @font-face. En 2008 llego el CSS 3, se inventaron los alojamientos virtuales de fuentes virtuales, que permite la carga temporal de la tipo y permite usar fuentes que están en un servidor.



4- Texto y programación:

Elementos de tipografía para hacer contenido experimental de carácter creativo aplicado a texto:


https://s-media-cache-ak0.pinimg.com/236x/
dc/ef/4f/dcef4f15728cb219d29b26a126adf934.jpg


1- Processing: es un sistema o lenguaje de programación muy básico pensado para diseñadores y artistas para gente que no tiene muchos conocimientos pueda escribir códigos y puedan programar, para que lo tengan mas fáciles. Se trata de un código.

2- Scriptographer: es un plugin de illustrator, en el que tu no haces el dibujo a mano, sino que es un dibujo con formas generativas, que se genera por códigos , por algoritmos del programa no a mano. Y se genera en tiempo real.







3- Paper.js: es una implantación de HTML5, que es la ultima versión de l HTML, con muchas funciones , muchas de carácter generativo, sobre todo de animación, movimiento, con tecnología flash.

4- Natebox: es un sistema de código libre, con caracteres generativos.

5- Cindex: crea formas auto generadas, no están realizadas a mano, esta realizado por códigos. Código libre.



¡Hasta la próxima!


viernes, 29 de enero de 2016

6.3 Legibilidad en pantalla.



En este apartado os hablaré del como se ven las tipos en pantalla y los tipos de uso de fuentes que hay.


http://letrag.com/imaxes/hinting.jpg
Hay un termino cuando uno empieza a conocer el mundo de las tipos que es Hinting, este lo que hace el definir que pixeles exactamente va a utilizar cada carácter tipográfico en relación al tamaño o resolución en la pantalla. Es como un sistema de programación complementario, tiene muchas instrucciones y cada instrucción tiene Tint (tunt,...) y cada uno de estos define para cada carácter instrucciones según el tamaño que se use y la pantalla con lo cual, estas tipos tienen bastante programación para que se adapte sobre todo en tamaños pequeños,

Esto sirve para que las tipos se puedan ver bien en pantallas grandes y pequeñas sin perder calidad.




https://helpx.adobe.com/es/x-productkb/global/
troubleshoot-system-errors-freezes-windows/
_jcr_content/main-pars/accordion_container_4/
accordion-par/accordion-item-4/accordion-item-par/
image_0.img.png/fonts.png
Administrar fuentes:

Comentar que en Windows hay una carpeta llamada Fonts y hay se instalan todas las tipos que vayas a utiizar. Pero no siempre se instalan, de echo podemos hablar de 3 tipos de uso de una fuente:

- La instalación: tendremos las tipos de carácter permanente, siempre y cuando no las desintalemos.

- Las carga temporales: se instalan las fuentes de forma temporal en servidores de Google y otros servidores y de hay conseguimos las tipos y las podemos instalar para usarlas de manera temporal , funciona como las licencias.


- Incrustar (embedding): las tipo solo se puede usar en un determinado archivo, pero la fuente no esta en el ordenador, 
la fuente no es temporal,
 solo la puedo usar para eso en concreto.


¡Hasta la próxima!

6.2 Las fuentes tipográficas.


En este apartado os hablaré de las fuentes tipográficas. Hay dos:


Bitmap:

Las primeras fuentes que se hicieron fueron las fuentes Bitmap, que aparecieron a comienzos de los 70, cuando empezaron a aparecer los ordenadores. En aquellos entonces los ordenadores tenían pantallas monocromo, verdes y había una estética muy pixelada. 


http://www.snowbound.com/sites/snowbound.com/
files/images/antialias.gif


Se empezaron a crear fuentes especificas para eso. Estas tipos se adjuntaban a una cuadrícula. Y eran tipos limitadas. La tecnología empezó a cambiaba muy rápido y se empezó a demandar algo que tuviese más definición y cuando salio el sistema operativo de Window, las tipos empezaron a usarse para algo más, para las ventanas, imágenes, textos,… y como ya he dicho estas tipos pixeladas eran insuficientes y se empezó a pensar en otro métodos para crear tipos con más definición así apareció lo del PostScript de Adobe, que ya lo he mencionado en varias ocasiones, con el que se podían crear caracteres vectoriales.



Los problemas eran que había que diseñar cada letra para cada tamaño y era muy laborioso, no era lo mismo que fuera de 10 que ocupaba 100 pixeles a que fuese de 12 que ocupaba 140 pixeles, por ejemplo. Se hacía un mismo carácter de 12, de 68, de 71... etc y había que hacer todos los caracteres de esa letra con las mismas medidas, desde cero.
Lo normal es que estas tuviesen dos formatos (.PFM y .PGB) . 

Se invento el sistema Antialiasing, este sistema lo que hace es que intenta matizar la brusquedad que generan los pixeles añadiendo otros pixeles al rededor, de tonos medios, para disimular digamos los escalones, los pixeles de las tipos.



https://designsuarezvi.files.wordpress.com
/2011/12/tipografiadigital.gif

Vectoriales:

Y aparecen los formatos vectoriales, el primero como ya comente fue el de Adobe, el PostScript, que tubo mucho éxito. 

Al principio de la informática había mucho secretismo comercias y empresarial, y Microsoft y Apple durante un tiempo tuvieron la presión de que o pagaban los derecho de Adobe del PostScript o no podían usar la fuente en sus sistemas operativos, a sin que invirtieron para crear fuentes para sus sistemas operativos , pero no podían utilizarlas como querían y tuvieron que elegir una alternativa. 

La idea principalmente fue de Apple junto a Microsoft, fue TrueType (1991). Apple invento el Splimer son funciones cuadráticas. Trabaja por nodos y es un programa vectorial .

A pesar de esto hubo otra ultima alternativa es la tipo OpenType de Adobe, junto a Microsoft, estas tipos eran o para Mac o para Window, eran para una plataforma en concreto o para las dos en ocasiones.
Esto fue a partir del año 2000, cuando decidieron hacer un formato multiplataformas (.OTF), abierto y disponible para los sistemas operativos. Este usa un sistema Unicode, este sistema lo que hace es incluir una gran cantidad de caracteres mucho más mayor que las que permitía la tecnología TrueType.


¡Hasta la próxima!



6.1 Concepto de tipografía digital.



En este apartado hoy os hablare de la tipo digital.


http://www.idep.es/wp-content/uploads/
tipografia_digital_julio_35h_idepgeneric.jpg


La era digital ha supuesto una verdadera explosión de la tipografía. En una pocas décadas, se han diseñado más tipos digitales que en toda la historia de la tipografía. Y esto es algo que se va incrementando, ya que cada vez hay más recursos digitales.




Hoy en día hay millones de tipos, por la facilidad que hay para hacerlas gracias a los programas, también porque vivimos en mundo de comercio, porque es común crear cosas hoy en día y porque hay super producción y esto también se da en la tipos.


Origen de las tipos digitales: 

Pues lo explique detenidamente en el punto 2.4 La tipografía digital, por ese motivo en este apartado solo lo comentare por encima.

Pues todo comenzó en 1980, cuando la tecnología electrónica e informática cambio el diseño gráfico y aparecieron los hardware y software, como PageMaker, basado en el lenguaje PostScript. Con PageMaker surgió la autoedición.

En 1984 Apple Macintosh lanzó su ordenador personal con un nuevo modo de presentación, el WYSIWYG, que mostraba el texto tal cual se vería después de imprimirse y simulaba el entorno de trabajo.

Y en esta época se crearon fuentes para los sistemas de los ordenadores, las cuales eran predeterminadas, venían en un paquete y se instalaban por defecto.

Y en 1990, hubo mucha tipografía amateur. Muchas personas tenían a su alcance un ordenador en el que poder crear y diseñar todo tipo de tipos.

En este año apareció la primera fundición y distribuidora independiente de fuentes digitales, FontShop International (FSI), fundada por Brody y Spiekermand. Diseñaban y vendían fuentes bajo el sello FontFont y con la sigla FF añadida al nombre.


¿Qué es una fuente digital?

Una fuente tipográfica es, desde un punto de vista técnico, un software, ya que a parte de contener formas vectorial también contiene elementos de programación, es un software sencillo y ligero generalmente por que son vectoriales. Tienen caracteres, glifos... y elementos de programación, por ese motivo los consideramos un software.


http://www.unostiposduros.com/wp-content/
uploads/2011/05/fonts-FontLabStudio.jpg

Características:


- Pues las tipos digitales tienen caracteres alfabéticos, nº, signos de puntuación, ligaduras...

- Suelen ser familias tipográficas, suelen traer la versión cursiva, negrita,... y unas tipos tienen más versiones que otras.

- También tienen elementos gráficos comunes, pueden tener muchas variantes las familias, pero por muy diferentes que sean siempre van 
a tener elementos en común como por ejemplo la 
altura x, remates, modulaciones...


- Gestores tipográficos:

Hay muchos gestores tipográficos, por ese motivos os comentare algunos que deberíais de conocer:

  • Extensis SuitCase Fusion 4 (Mac y PC)
Esta completito. Es el primero que incorpora la gestión de WebFonts, o dicho con otras palabras que puedes activar automáticamente fuentes en uso. De 97,33€

  • FontExplorer X (Mac y Pc)
Es el más usado. El propietario actual es, sino me equivoco MyFonts, anteriormente fue de Linotype y Monotype. De 79€.

  • FontCase (Mac)
Es el más asequible, de 26,99€. Con WebFonts, pero solo para Mac OSX Lion o superiores.

  • FontAgent Pro 5 (Mac y PC)
Esta desfasado. Con WebFonts, acepta AppleScripts y es bastante caro para lo poquito que ofrece. 
De 74,26€


En esta pagina podréis ver sus características y saber más sobre estos cuatro gestores tipográficos:



Y para acabar comentar que no existen gestores gratuitos, quizás más adelante los haya pero por ahora nada.