LuchoWiki

Cosas que debería hacer más a menudo

User Tools

Site Tools


desarrollo:24_theme:tipografia-24

Ajustes de Visualización para el Reloj 24

Volver a Tema "24"

Tipografía

Chequea las licencias de las fuentes aquí enlazadas antes de utilizarlas.

Aunque he chequeado aquellas que son de libre uso a la fecha de 2008-06-01, no puedo garantizar que lo sigan siendo a futuro.

Cada fuente está acompañada del vínculo, el nombre de familia y el nombre genérico. El nombre genérico es el nombre por el cual debes referirte a esta fuente si vas a utilizar el método de sIFR (Flash Text); el nombre de familia es por el cual debes referire a e instalar la fuente si vas a utilizar el método de CSS font-face.

Fuente y Muestra Licencia Familia y Nombre
Harvey Twyman's "World's Simplest Font"7segments-ttf (¡RECOMENDADO!) Excempto de Copyright N/A
LCD (Spinward)lcd-*.ttf Family Freeware →Familia: “lcd”
→Nombre: “Regular”
Digital ReadoutDigital Readout (altamente aceptable) Libre para uso personal1) →Familia: “Digital Readout” (exacto)
Transistor (Free Fonts)transistor.ttf Freeware →Familia: “Transistor”
→Nombre:“Regular”
LCD (URW Software) Shareware, aprox. 30€ N/A
LCD (Elsner) Shareware, aprox. 30€ →Familia: “LCD” (asi con mayúsculas). Al parecer es la fuente oficial de la serie2).

La fuente que yo estoy usando en los ejemplos es LCD Family, por la exactitud de la visualización.

En general para lograr el efecto puedes usar una de estas fuentes, o cualquier otra fuente de reloj digital, provisto que cumpla con las siguientes condiciones:

  • debe ser monoespaciada (todos los caracteres usan el mismo espacio, como en Courier)

sin kerning.

  • o, alternativamente, ser una fuente ajustada (como lo es por ejemplo Gentium) sin serif y con kerning.
  • claro está, los números deben parecer de matriz de siete segmentos.

Parece complicado, pero no lo es. En lenguaje humano lo que estoy tratando de decir es que, o todos los caracteres usan el mismo espacio como en un LED físico de 7 segmentos, o que aquellos caracteres que usan menos espacio (el “1” y el “7”) no se autoajustan al caracter anterior por un espacio mayor al que sería “medio” segmento de LED.

Color

Para lograr el efecto como el que se ve abajo, puedes utilizar un esquema de colores como el siguiente (pasa los códigos de color directo a CSS, o usa el selector de colores de Windows para seleccionar el color exacto):

  • Color de frente: #ff3e10 (amarillo ligeramente vivo)
  • Color de fondo: #333333 (entre plomo y negro, tirando para negro)
  • Color de sombreado, esi está disponible: #f04444
Demo

<p style="margin:4px;"><span style="font-size:18pt;color:#fff310;background-color:#333333;text-shadow:1px 1px #f04444;">HH:MM:SS</span></p>

Disposición del Objeto

  • Ancho mínimo del objeto: el contenedor visual del reloj necesita un ancho mínimo de 8 em de modo de contener perfectamente todos los digitos del display (seis dígitos y dos dos-puntos).
  • Tamaño de la tipografía: en el caso de la fuente Transistor el tamaño recomendado es de 14 pt, en el caso de las fuentes de la familia lcd el tamaño recomendado es de 12 pt en peso negrita.

* Alineación del texto: centrado da el mejor efecto.

—-

1)
acorde a declaración en el sitio
desarrollo/24_theme/tipografia-24.txt · Last modified: 20120526 10:52 (external edit)