Typetester é uma ferramenta online que tem por finalidade testar tipografia.

O usuário escolhe valores CSS para uma série de propriedades relacionadas à tipografia, e a interface gráfica da ferramenta retorna um texto padrão (ou um texto digitado pelo usuário) estilizado conforme suas escolhas. E, como bônus a folha de estilos pode também ser visualizada pelo usuário.

Experimente a ferramenta para tirar conclusões sobre sua utilidade.
O link é: http://typetester.maratz.com/

Como funciona?

A seguir algumas dicas que poderão ser úteis caso você não tenha entendido a ferramenta.

Notar que o usuário tem a opção de fazer suas escolhas usando 03 colunas separada e independentemente.
É claro que pode-se optar por uma duas ou as três colunas.
Normalmente usa-se mais de uma coluna para efeitos de comparação.

Vamos começar com as três áreas que eu destaquei conforme mostrado na figura abaixo:

Área 1

Área "sample text" é um texto de exemplo ao qual serão aplicadas as regras CSS escolhidas.
Neste campo foi inserido um texto padrão "Lorem ipsum etc…." que você poderá alterar a seu gosto. Digite ou copie e cole sobre o texto padrão o que você quiser.

Área 2

"Choose typeface from the list" aqui você escolhe de uma lista (padrão para Win XP e MacOS), o tipo de fonte a usar, font-family.

"…or specify your own" semelhante ao anterior, mas aqui a lista foi construida com as fontes instaladas na máquina do usuário.

Importante: O tipo de fonte escolhido deve estar instalado em seu computador para que o resultado seja real. Caso você escolha uma fonte que não esteja instalada na sua máquina o teste retornará o resultado com a fonte padrão, com serifas (serif) ou sem serifas (sans-serif) conforme a fonte escolhida.

Área 3

"size" escolha o valor para o tamanho da fonte em unidades em. Tutorial sobre unidades de medidas CSS.

Importante: O tamanho em unidades em é calculado com referência ao tamanho base de fonte escolhido pelo usuário (campo "base font size" mostrado na próxima figura)

"leading" escolha o valor para a propriedade line-height em unidades em.
"tracking" escolha o valor para a propriedade letter-spacing em unidades px.

"alignment" escolha o valor para a propriedade text-align.
"word space" escolha o valor para a propriedade word-spacing.
"decoration" escolha o valor para a propriedade text-decoration.
"color" escolha o valor para a propriedade color (cor da fonte do texto) digitando o código hex ou usando o selecionador de cores.
"background" escolha o valor para a propriedade background (cor de fundo do texto).
"apply to column 1- 2- 3" aqui você escolhe a coluna nas quais você quer aplicar os valores escolhidos para a coluna atual.

Vamos continuar examinando os demais menus da interface:

As palavras destacadas a seguir são links que desempenham uma função conforme eu explico:

Caixa de seleção “base font size” aqui o usuário escolhe um tamanho de fonte em pixel que servirá de base para cálculo dos valores em unidades em escolhidos conforme explicado anteriormente.

"about" uma descrição da ferramenta.
"requirements" browsers, sistemas e condições para funcionamento da ferramenta.
"step by step" tutorial explicando como usar a ferramenta.
"resources" links relacionados.
"tools" é a página de entrada na ferramenta que contém os menus explicados a seguir.

"reset settings " reseta tudo para os valores iniciais quando a página é carregada pela primeira vez. É diferente de dar um "refresh" (F5) na página.
"recent" abre uma janela pop-up mostrando os mais recentes valores solicitados por usuários que utilizaram a ferramenta.
"most wanted" abre uma janela pop-up mostrando valores mais solicitados pelos usuários.

E na última linha: Get CSS for 1st | 2nd | 3rd column (Ver a folha de estilos para a 1a. | 2a. | 3a. colunas) os links são:
"1st" abre uma janela pop-up mostrando as regras de estilo para a tipografia na 1a. coluna.
"2nd" abre uma janela pop-up mostrando as regras de estilo para a tipografia na 2a. coluna.
"3rd" abre uma janela pop-up mostrando as regras de estilo para a tipografia na 3a. coluna.

Apresentação dos resultados

São apresentados os resultados para os valores escolhidos nas três colunas com 12 variações tipográficas a saber:

1. linha REGULAR: font-weight: normal
2. linha BOLD: font-weight: bold
3. linha ITALIC: font-style: italic
4. linha BOLD ITALIC: font-weight: bold, font-style: italic
5. linha UPPERCASE REGULAR: text-transform: uppercase
6. linha UPPERCASE BOLD: text-transform: uppercase, font-weight: bold
7. linha UPPERCASE ITALIC: text-transform: uppercase, font-style: italic
8. linha UPPERCASE ITALIC BOLD: text-transform: uppercase, font-style: italic, font-weight: bold
9. linha SMALL CAPS REGULAR: font-variant: small-caps
10. linha SMALL CAPS BOLD: font-variant: small-caps, font-weight: bold
11. linha SMALL CAPS ITALIC: font-variant: small-caps, font-style: italic
12. linha SMALL CAPS BOLD ITALIC: font-variant: small-caps, font-weight: bold, font-style: italic

Esta matéria foi publicada em: 2006-03-26 (domingo). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2006/03/26/typetester/trackback no seu site.