Tipografia

Tipografia
Projetos
Compartilhe

Guia de marcação semântica para estruturação do CSS para a tipografia global de um projeto.

Esta é uma ferramenta pessoal que utilizo quanto estou iniciando a codificação do HTML, começo sempre que possível pela tipografia global do site que é baseada na página interna fornecida pelo Designer, depois os demais elementos vão ficando mais simples de serem codificados após ter este primeiro documento disponível no projeto.

Com este documento criado eu tenho a certeza de que qualquer nova página criada no projeto e qualquer conteúdo criado através de um editor WYSIWYG por alguém, irá receber uma formação adequada para leitura na página. O desenvolvedor somente terá de se preocupar com elementos diferenciados que o Designer desenhou para uma página específica.

Como utilizar?

Passo 1

Acesse a ferramenta em http://hub.edirpedro.com.br/tipografia/

Passo 2

Edite o documento CSS usando a ferramenta e acompanhe ao lado, dando refresh, as alterações feitas no documento base ao lado. Este documento base foi elaborado respeitando as normas de uso do HTML, também achei interessante adicionar explicações de uso das tags HTML para leigos no assunto escrever para websites.

Se seu navegador permitir, as alterações feitas na ferramenta são automaticamente guardadas em cache para o caso de fechar a página acidentalmente ou cair a energia antes de copiar o resultado final. Se precisar voltar ao documento padrão clique no botão Reset.

Passo 3

Copie suas regras CSS para um arquivo que nomeio como text.css e incorpore este arquivo em seu documento HTML, antes das chamada do arquivo de estilo da página.

Passo 4

Copie o documento HTML base para seu projeto como forma de documentação e checagem futuras, será mais prático depois realizar ajustes a partir dele.

Como colaborar?

Você pode obter uma cópia ou realizar ajustes nesta ferramenta indo no Repositório Tipografia no Github. Ou se preferir pode me enviar um email com suas sugestões.

Comentários

comments powered by Disqus