Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

Typetester

Publicado em: 2006-03-26 — 14.603 visualizacoes         

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:

typetester-parte1

Á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:

typetester-parte2

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

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro jQuery   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro html5   capa livro css3   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro RWD   capa livro foundation   capa livro HTML5 e CSS3   capa livro Bootstrap3   capa livro Sass e Compass

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.

4 comentários na matéria: “Typetester”

  1. Lucas AlvesNo Gravatar disse:

    Caramba belo post amigo.
    De grande ajuda mesmo….tenho lido seu site constantemente ele eh muito util para profissionais web 🙂

    Abraços

  2. Domingos BernardoNo Gravatar disse:

    Olá Maurício, bem legal a ferramenta, valeu !

  3. Newton de Góes HortaNo Gravatar disse:

    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!

  4. helderNo Gravatar disse:

    Belíssima dica! Vai me ajudar bastante.
    Mais uma vez obrigadíssimo maurício..

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo