• iborra
    borde slide
    DESCUBRE A TRAVÉS DE
    borde slide
    NUESTRO BLOG
    Artículos de interés sobre diseño web

Cómo editar fuentes con Type Light

type light

Cuando trabajamos con fuentes tipográficas, tanto en formato True Type (.ttf) como en formato Open Type (.otf), muchas veces nos econtramos que la fuente que queremos utilizar para nuestro proyecto le faltan una serie de caracteres esenciales.

Seguro que a muchos de vosotros os ha gustado una fuente y al utilizarla te has dado cuenta que le faltan acentos o la letra "Ñ" por ejemplo.

Por suerte, existen varios programas que sirven para editar y crear fuentes. Nos centraremos en uno en concreto, Type Light, un programa gratuito genial para solucionar estos problemas, que cuenta con un símbolo gráfico llamado Glyph que nos ayudará a editar y crear nuevas fuentes de forma sencilla.

Estos son los pasos que debes seguir para editar una fuente con Type Light:

  1. Primero nos vamos al siguiente enlace para descargar el programa en la página oficial de Type Light. Descargamos e instalamos la versión gratuita Type Light FREE. Este programa también tiene su versión de pago con más características pero con la versión libre nos sobra. Para los que sois de Mac, mirar en ese mismo enlace en la columna de la derecha donde dice Type 3.2x (Linux/OS X) o la versión que sea.
  2. Para hacer pruebas, descargamos una fuente que sea libre de uso comercial y que le falten caracteres como la "Ñ" o acentos. Para ello descargamos Requiem Font, una fuente bastante bonita. El enlace está al final del tutorial.
  3. Abrimos el programa Type Light. Hacemos clic en el menú de arriba en File->Open (.ttf .otf) y seleccionamos la fuente que acabamos de descargar y la abrimos.
  4. Tenemos dos columnas a la vista, la de la izquierda donde están las herramientas de edición y creación de fuentes y con la herramienta Select ya seleccionada por defecto; y la columna de la derecha, que es donde se encuentran los caracteres de la fuente que acabamos de abrir, ahí nos dirá qué caracteres tiene y cuáles no. Para hacer la letra "Ñ" nos vamos a la columna de la derecha, buscamos la letra "N" (Character #: 78) y la abrimos haciendo doble clic.
  5. Vemos en la columna de la izquierda que la herramienta Select ya está seleccionada. Seleccionamos la letra "N" haciendo clic con el botón izquierdo del ratón sin soltar como haciendo un cuadrado a la letra. Se deberían quedar los puntos de la letra en color azul. Ahora le damos a copiar con Ctrl (+) C o siguiendo la ruta Edit->Copy.
  6. Ahora en la columna de la derecha buscamos la letra "Ñ" (Character #: 209). Vemos que no existe pero la abrimos igual con doble clic para crear el nuevo carácter y seguidamente le damos a pegar con Ctrl (+) V o siguiendo la ruta Edit->Paste quedando la letra "N" de antes.
  7. En la columna de la derecha buscamos "El Guión" (Character #: 45) y lo abrimos. Haciendo los mismos pasos que antes lo seleccionamos y lo copiamos.
  8. Nos vamos de nuevo a la letra "Ñ" (Character #: 209), la abrimos y pegamos el guión que hemos copiado anteriormente. El guión nos aparecerá en medio y seleccionado.
  9. Para mover el guión arriba es bien sencillo. Vemos que sólo el guión está seleccionado y no la "N". Hacemos clic con el botón izquierdo del ratón sobre uno de los puntos seleccionados del guión en color azul sin soltar y lo arrastramos arriba. Esto también se puede conseguir siguiendo la ruta Point->Move... y dando valores a donde dice Relative (x,y) pero es más rápido de la otra forma.
  10. Como el guión es demasiado ancho vamos a hacerlo más estrecho. Esto ya es a vuestro gusto. Para hacerlo tenemos que seleccionar tan sólo los puntos del guión que queramos acortar. Tanto en la parte de la derecha del guión como en la izquierda, es decir, es jugar un poco a transformar el guión.
  11. Con esto ya lo tendremos listo. Para guardar hacemos clic en el menú de arriba en File->Save as (.ttf .otf) y lo guardamos por ejemplo con el nombre Requiem-editada para mantener la original también.

Tener en cuenta que esto habría que hacerlo tanto con las mayúsculas como con las minúsculas. Para realizar los acentos el método es el mismo, en vez de pillar la letra "N" copiamos una vocal y para ponerle el acento podemos aprovecharnos del carácter "Punto" (Character #: 46) y estirarlo para arriba para crear la forma, algo similar a lo que hicimos con el guión, en el archivo de descarga se puede ver un ejemplo de acento. Os dejo la tabla de caracteres de la fuente Requiem a continuación, todas las fuentes utilizan los mismos códigos.

En nuestro último vídeo promocional, hemos utilizado esta fuente y hemos editado algunos caracteres. Podéis ver el resultado en el siguiente vídeo de cómo nos ha quedado.

Supongo que sabéis donde van situadas las fuentes en Windows, por si alguien no lo sabe, se encuentran en Disco local (C:)->Windows->Fonts. Si necesitáis, por alguna razón, pasar un archivo .ttf a .eot, podéis utilizar la siguiente herramienta.

A continuación, para que os podáis guiar mejor, podéis descargar la fuente Requiem original, más la editada pero sólo con unos pocos caracteres más de prueba y una imagen de la fuente.

Recordar que este tutorial es para editar una fuente existente, con este programa también podéis crear una fuente nueva. Espero que os haya sido útil.

ENLACE DE DESCARGA
Requiem Font (Iborra Web Design)

CONTRASEÑA DEL ARCHIVO
iborra.es

Comenta y comparte este post!

¿Tienes alguna sugerencia, idea, consejo, duda, pregunta, agradecimiento, encuentras algún error o este post no está actualizado? Entonces esperamos tu comentario.

También puedes recomendar y compartir este post. Estamos muy agradecidos por tu apoyo!

Comentarios (2)

  • foto
    Joan Responder

    Ups, gracias por el artículo, otro de esos de gran interés del que aprender :)

    Hasta la fecha 'Iborra Web Design' ha sido de los sitios más creativos que he encontrado, algún día espero estar a tu altura, jeje.

    12 de Abril 2016 a las 11:24h
    • foto blog
      Paco (Iborra Web Design) Responder

      Hola Joan,

      Gracias por tus palabras! Hay mucha gente buena diseñando y que es muy creativa, todos nos fijamos en alguien, en mi caso en esta web alemana Kulturbanause, me encantan sus diseños. Queda mucho por aprender, poco a poco ;) Me alegro que te guste el artículo.

      Un saludo.

      12 de Abril 2016 a las 15:20h

Deja un comentario

Este blog se nutre de los comentarios de los visitantes! Así que vamos, únete a nosotros!

Por favor esperamos que entiendas que se eliminarán aquellos comentarios que no tengan nada que ver con el contenido de este post o siempre que se utilicen palabras ofensivas.

COMENTARIO PARA ESTE POST

Imagen mínimo: 300x300 - Formato: jpg o png - Tamaño máximo: 10Mb

CAPTCHA code