Que considerações existem no design de fontes de pixel?


14

Estou projetando fontes de pixel monoespaçadas para um jogo e, até agora, só consegui trabalhar com tamanhos extremamente pequenos (o maior que eu consegui é 5x9), porque esses são os mais fáceis de experimentar e cometer. Muitas vezes, os resultados apresentados para tamanhos de até 7x13 são todos bloqueadores e desagradáveis.

Analisei algumas outras fontes de pixel e a maioria das atraentes graficamente faz muitas considerações alternativas que eu nunca teria pensado em fazer, como criar seções inteiras apenas na diagonal.

Existem tamanhos de bloco especiais que são "ideais" para o design de fontes de pixel? Há algum posicionamento especial em pixel que eu possa ter em mente? Porque, às vezes, quando desenho uma linha com apenas 11 pixels de comprimento (ou que as coisas se cruzam em tamanhos tão pequenos), ela acaba se parecendo com outra coisa depois de diminuir o zoom.

Respostas:


11

As fontes de pixel não são muito diferentes das fontes minúsculas de impressão quando você as seleciona *. A única grande exceção é que você sabe o que o meio fará com as fontes de pixel - uma grande vantagem.

Realmente não existe uma grade de pixels ideal, por si só. Obviamente, uma grade maior oferece mais espaço para trabalhar. Os menores tipos que já vi funcionar com sucesso são designs de 7px. Os designs MiniFonts de Joe Gillespie ajudarão você a entender o design no limite de legibilidade. Outra pergunta aqui tratou desses micro projetos e pode fornecer mais referências.

Onde começar

Todo problema de design começa com uma restrição. Com uma boa fonte é [geralmente] o uso pretendido. Onde sua fonte de pixels precisa se encaixar? Seu jogo se beneficiaria com texto de fácil leitura ou o texto precisa ficar fora do caminho e só estará disponível para "decifrar" quando necessário?

Você precisará esclarecer se deseja ou não letras minúsculas. Uma fonte toda maiúscula pode caber em uma grade menor devido às formas relativamente simples e à falta de extensores (abaixo da linha de base e acima da altura da tampa). Mas as letras minúsculas também podem ficar bem pequenas: o Minx de Gillespie fornece um excelente ponto de referência para o que eu consideraria o menor alfabeto minúsculo razoável.

Minx é tão pequeno quanto o minúsculo

Os detalhes

Você notará algo até nas melhores fontes de pixel: elas parecem terríveis quando você se aproxima e tenta descobrir. Eles devem ser "percebidos", ou seja, as lacunas no design são preenchidas pelo cérebro. Portanto, dois quadrados alinhados a 45 ° se tornam uma linha diagonal. Às vezes, um buraco na grade é a linha "fina" entre dois traços grossos.

Projete de perto : Este é o desafio do designer de fontes de pixels. Em outras palavras, você cria e modifica suas formas a distâncias ridiculamente próximas o tempo todo, considerando como será a aparência quando visualizada no tamanho normal.

O computador é nosso amigo nesta situação confusa: basta manter uma segunda janela aberta com uma exibição de 100% para que você possa ver como seu design está realmente parecendo. Ter um segundo monitor para essa "visão da realidade" torna as coisas muito mais convenientes.

Acomodando as minúsculas

Desde que você mencionou a necessidade de letras minúsculas em 6 x 12 ...

Aqui está um exemplo rápido que juntei para ilustrar as considerações específicas com esse requisito.

Perdoe-me, é uma ilustração aproximada

Para começar, cortei um pixel da sua altura. Trabalhando em tamanhos tão pequenos, você notará que a legibilidade se beneficia de um corpo de personagem mais amplo. As tampas precisam ser marginalmente mais altas que as minúsculas. Dê uma olhada no 9px Verdana para ver como um corpo largo pode beneficiar a legibilidade.

Caracteres minúsculos com ascendentes proeminentes costumam ler melhor se ultrapassarem ligeiramente a altura da tampa (como bno meu exemplo). Meu exemplo ainda consegue permanecer em um corpo de 11px de altura. Isso é auxiliado pelo fato de que a legibilidade é menos influenciada por decanos longos: apenas alguns pixels serão utilizados.

Mesmo nessa grade restritiva, você pode ver que pequenos toques de estilo você pode adicionar sem destruir totalmente a legibilidade.

Ampliado, você pode ver como as coisas ficam estranhas

Com a altura x e o corpo destacados para referência:

insira a descrição da imagem aqui

No tamanho ampliado, Milustra uma consideração notável. Com uma grade de número par, você não tem um ponto médio para um pixel pousar. Isso não é necessariamente uma coisa ruim, você apenas terá que tomar algumas decisões que parecem estranhas quando aproximadas. A segunda M, por exemplo, parece bastante estranha quando ampliada, mas na verdade é uma melhoria no tamanho da tela. Esses tipos de linhas implícitas são um componente crítico da maioria das fontes de pixels.

Obviamente, você também precisará levar em consideração o espaço extra necessário para o espaçamento entre letras. Você certamente não tem muito espaço para jogar lá, mas é uma parte importante da legibilidade.

Olhe para os mestres

Como em qualquer forma de arte, você aprenderá ao máximo tentando fazer o que os mestres fazem. Os exemplos que eu vinculei acima fornecerão muitas informações.

Um estudo de caso clássico em excelência de fonte de pixel é o Unibody 8 da Underware . O romance "itálico" vertical obtém seu efeito usando alinhamentos de 45 ° para implicar o ângulo de uma fonte em itálico sem comprometer a fonte inteira no processo.

Emigre foi outro dos pioneiros, junto com Susan Kare, no início do Mac OS.

* Observação:
Retina é um exemplo fantástico de como uma fonte de impressão é responsável pelo inesperado em tamanhos pequenos, como é o que eu consideraria seu antecessor Bell Centennial .

Retina de H & FJ


Na verdade, eu quero uma letra minúscula. Quero que a fonte 6x12 seja utilizável em, digamos, um console.
Joe Z.

Mas sim, esta é uma resposta muito boa, com muitos recursos para os quais posso olhar mais adiante. Obrigado.
Joe Z.

1
Uma adição muito pequena: "de perto e de longe" é facilmente alcançado no Photoshop, criando uma nova janela (menu da janela> organizar> nova janela para docname-1) e deixando uma delas com 100% de zoom para o lado como um "cópia de visualização"
horatio

1
Não se preocupe, você entendeu a idéia. Eu nem acho que você precisará da altura extra. Eu apenas adicionaria o pixel extra na largura e deixaria a altura entre 10 e 12. Brinque com alguns caracteres e veja onde você acaba.
à paisana

1
A propósito, uma palavra de teste padrão que explique as formas básicas do alfabeto romano é Hamburgefonts . Muitos designers tipo vai começar com H, ne opara começar uma sensação para as características essenciais.
à paisana
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.