Generador de letras pixeladas
Letra pixelada wordle
Contenidos
Primero, abre Glifos y selecciona Archivo > Nuevo (Cmd-N), para crear un nuevo documento de fuente. Ahora, antes de empezar a crear tus letras, ve a Archivo > Información de fuente (Cmd-I) y ponle a tu fuente un nombre llamativo. Nosotros llamaremos a la nuestra ‘Pixelfont’, porque somos muy creativos:
A continuación, selecciona la pestaña Otros, donde encontrarás las opciones de Espaciado de cuadrícula. El valor de Espaciado de cuadrícula define cómo se redondean las coordenadas. El valor por defecto es 1. Para las fuentes de píxeles, queremos que todas las herramientas y todas las modificaciones se ajusten siempre a la cuadrícula, por lo que establecemos valores más altos. Esto asegura que los ‘píxeles’ de su fuente estén automáticamente en la posición correcta. Establezcamos nuestro Paso de Cuadrícula en 50 unidades de fuente:
¿Por qué un paso de cuadrícula de 50? En pocas palabras, elegimos 50 porque divide el tamaño completo del tipo de 1000 (también conocido como UPM, unidades por em) cómodamente, y da una representación perfecta de píxeles en ciertos tamaños. Confíe en mí o eche cuentas:
Calcular el tamaño de la pantalla: El tamaño de pantalla se mide en PPM, píxeles por em. Si una em contiene 1000 unidades, que es el valor UPM (unidades por em) por defecto, entonces (1000÷50=) 20 píxeles caben en una em. En otras palabras, un píxel de fuente será exactamente un píxel de pantalla a 20 PPM. Para una resolución de pantalla de 72 ppi (píxeles por pulgada), (20 PPM ÷ 72 ppi × 72 puntos en una pulgada =) 20 puntos. Esta es la resolución por defecto que se asume para los Mac y las aplicaciones de Adobe. En Windows, calculamos con 96 ppi, por lo que alcanzamos 20 PPM a (20÷96×72=) 15 puntos.
Píxel generador de texto copiar y pegar
Aquí tienes algo loco y sin sentido: ¿sabías que los monitores LCD dibujan píxeles individuales mezclando tres subpíxeles individuales de rojo, verde y azul? Pues es cierto. De hecho, algunos dispositivos (como los teléfonos móviles y los dispositivos portátiles de juegos) lo utilizan para suavizar el texto y hacer que los bordes sean más nítidos. Microsoft lo utiliza incluso en portátiles con Windows, con una técnica llamada Cleartype.
He creado un pequeño programa que utiliza esta técnica para crear un tipo de letra ridículamente pequeño, sólo visible en monitores LCD con la máxima resolución. Cada letra tiene sólo 1 píxel de ancho y 5 píxeles de alto, pero debería ser legible si se mira muy de cerca. ¡Contemplad!
[Edición del 24 de noviembre de 2010]: ¡Hola, ycombinator! Si tienes problemas para leer esto, un tipo llamado alanfalcon en tu hilo de comentarios le hizo una foto para que puedas ver lo que pasa: https://www.flickr.com/photos/dafalcon/5204413187/in/photostream/
Nombre de la fuente de píxeles
La tipografía responsiva contradice directamente este consejo, ya que manipula directamente el tamaño de la fuente raíz y, para una tipografía escalable, es el camino a seguir. Hay una calculadora de tamaño de fuente Fluid-responsive disponible para ayudar con eso.
El tamaño mínimo de la fuente nunca debería ser inferior a 10px. Y eso es para letra pequeña, apartes, pies de foto o similares, no para el cuerpo del texto en sí. Me complace ver que por fin el tamaño de letra aumenta de forma generalizada en la web.
Cuando establezco un tamaño de fuente, suelo usar la unidad rem, que hace referencia al tamaño de fuente raíz de la página y elimina los problemas de cascada. Aunque, en el raro caso de que dependa de la cascada, recurro a em.
Personalmente, soy muy cuidadoso con la altura y la longitud/anchura de las líneas. La anchura de línea ideal para escanear o leer sigue siendo de 45-75 caracteres para los párrafos, lo que equivale a 34em (544px) aproximadamente.
La altura de las líneas debe aumentar a medida que disminuye la anchura, lo que parece contrario a la intuición. Con una altura de línea base de 1,5, sólo cambiará en ±0,065 entre 320px (20rem @ 16px) y 544px (34em @ 16px), así que, a menos que seas un perfeccionista, puedes ignorarlo.
Generador de letras pixeladas 2022
Podemos entonces seguir los movimientos del ratón del usuario con tres eventos: pointerdown, pointermove y pointerup. Como tenemos que aplicar esto a todos los píxeles, utilizamos un bucle para recorrer cada píxel y añadir el evento.
Entonces, si un usuario continúa manteniendo pulsado, podemos rastrear sobre qué píxel está usando e.target, que devuelve la entidad HTML actual sobre la que se está pasando el puntero. Si están usando el borrador, podemos tenerlo en cuenta aquí.
Una vez que se ha añadido a ese lienzo, podemos muestrear cada píxel utilizando getImageData(). Recorremos cada pixel (40×40 ya que nuestro generador de pixel art es de 40×40), y muestreamos el color en cada punto. Si hay más de 40×40 píxeles, simplemente se ignoran – así que asegúrese de que sus archivos son de menos de 40×40 de tamaño.
En el siguiente código, los datos de los píxeles se devuelven en formato R, G, B, A. Los almacenamos en pixelData. Los almacenamos en la variable pixelData. pixelData[3] es “A”, y pixelData[0] a [2] son R, G y B. Usando esta información, podemos averiguar el color RGB de cada píxel, e ignorar los píxeles transparentes donde A = 0.