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/
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 "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.
"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.
"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.
São apresentados os resultados para os valores escolhidos nas três colunas com 12 variações tipográficas a saber:
Em 2006 comecei a publicar nesse blog uma série de desafios CSS que consistiam em…
Há muito tempo que eu não publico um "Teste seu conhecimento". Esta semana, revendo algumas…
Introdução Elementos da marcação HTML podem ser aninhados uns dentro de outros, criando-se uma cadeia…
HTML5? Web universal? É comum eu me deparar com dúvidas sobre a HTML5 não só…
Quem é Tab Atkins Jr? Tab Atkins Jr, um desenvolvedor americano, trabalhou durante muitos anos…
Pessoal, a BrazilJS Conf 2013 disponibilizou para o Maujor cupons de desconto para serem oferecidos…
View Comments
Caramba belo post amigo.
De grande ajuda mesmo....tenho lido seu site constantemente ele eh muito util para profissionais web :)
Abraços
Olá Maurício, bem legal a ferramenta, valeu !
Ferramenta interessante e útil. Vem a calhar com um artigo, que li recentemente, publicado na revista Webdesign, de Fevereiro de 2006, onde é colocado com muita propriedade a importância da tipografia em projetos gráficos, de forma geral, e em particular na Web.
Parabéns pela dica. Excelente!
Belíssima dica! Vai me ajudar bastante.
Mais uma vez obrigadíssimo maurício..