(Você estranha esse título e acha normal o contrário “CSS para designers”? Por quê? Perseguição?)

Até o MinC usa CSS. Você não? Vergonha…”
A popularização crescente do uso de css e (X)HTML em sites não é mais uma tendência: é fato consumado. Praticamente qualquer empresa que esteja no século XXI usa essas tecnologias - e até mesmo algumas firmas arcaicas estão, pelo menos no que diz respeito à web, mais modulares.
Esse movimento é, do ponto de vista da comunicação, muito maior que uma simples tecnologia (ou mesmo um conjunto delas), já que significa uma mudança de processo, de enfoque. A dissociação entre conteúdo e forma chegou para ficar. Se é certo que provavelmente não se falará em JavaScript ou até mesmo em XML no futuro, a idéia de uma folha de estilo para controlar a apresentação de todos os dados, sensível às necessidades especiais e acessibilidade e maleável em sua apresentação é mais do que genial: ela faz sentido. E o futuro acontece quando tiramos do presente as coisas que não fazem sentido.
Mas se o uso de folhas de estilo é um bem inegável, ele não é novo. Qualquer designer com um conhecimento razoável da profissão sabe o que é um projeto gráfico e os elementos envolvidos nele. O uso de CSS transmite este domínio (melhor: esse cuidado e preocupação) para todos os que fazem sites, o que sempre é uma boa.
Ao contrário de muito “purista” de design, eu acho essa democratização do projeto gráfico muito bem-vinda. Até porque o cara vai fazer a página de qualquer jeito, e o quanto mais ele souber de design, tanto melhor.
Com tanta gente boa de CSS por aí que não teve aula nem de Gestalt nem de Seção Áurea na escola; que acha que Tipografia e Tipologia são sinônimos; que usa uma “fonte com serifa” para compor um texto “justificado”; e que acredita que Itálico é sinônimo de Oblíquo, é preciso colocar alguns pingos nos “i”s para que, municiados de um pouco de teoria, eles possam ir ainda mais longe. Esta será a função dos próximos posts.
Famílias tipográficas

Minha fonte predileta - além de ser linda, ainda realiza desejos. Que mais se pode pedir?
Pra começar, “letra” não é “fonte”. Quer dizer, é, mas não completamente. Letra é letra, também conhecida como “família tipográfica” ou “tipo” (caindo em desuso, já que remete ao processo arcaico de composição).
Mas então daonde vem essa história de fonte? Bom, a longa história remete à composição com tipos móveis, feitos de uma liga de chumbo e antimônio, aquela coisa meio Gutemberg. Uma fonte, desde aquela época, era uma matriz de impressão. Era uma letra? Sim. Mas uma só. Assim, o “j” minúsculo, em Times New Roman Bold, corpo 9, era uma fonte. A mesma letra, em outro corpo ou estilo, era outra fonte. Seguindo esse raciocínio, Times New Roman Bold, corpo 9, não era uma fonte, mas um conjunto de, no mínimo, umas 100 delas (contando maiúsculas, minúsculas, números e caracteres analfabéticos, tipo %$#@*).
Todos os caracteres de uma letra, nos estilos (bold, itálico e suas variações) e tamanhos necessários para se escrever um jornal comum (9, 10, 12, 18, 24, 36 e 72, por exemplo) podia chegar facilmente a milhares de fontes, por isso era chamado de “família tipográfica”. O termo typeface ou “face”, usado em inglês, (em referência ao fato que os membros de uma mesma família tendem a ser parecidos) surgiu pra simplificar um pouco essa confusão, mas não muito.
![]()
Em outras palavras, chamar uma família tipográfica de “fonte” é uma simplificação, algo como chamar uma objetiva de “lente” ou dizer que você “escovou dente” antes de dormir. Poder, pode. Tudo depende de seu nível de pedantismo vs. informalidade.

fonte = lente = dente?
As “fontes” também têm uma história mais curta, ligada ao mundo digital. Ela remete à Editoração eletrônica. As primeiras impressoras a laser e imagesetters digitais vinham com algumas famílias de letras residentes. Quando se mandava imprimir um texto em alguma letra que a máquina não tinha, ela importava o “arquivo-fonte” (font file), que tinha o desenho das formas de todas as letras, em linguagem PostScript (vetorial, curvas Bézier), que daí poderia ser ampliado para o tamanho desejado.
Fonte quer dizer, como sempre, “origem” ou “molde”. “Letra” pode ser só uma interpretação metonímica do termo.
“Ele salvou o texto justificando a fonte”
Antes da editoração eletrônica, essa frase dizia claramente que o indivíduo em questão impediu seu texto de ser rejeitado ao mostrar que ele vinha de uma origem pertinente. Hoje ela frase não faz nenhum sentido, afinal salvar texto e justificar fonte são processos diferentes. Costumo usar esse exemplo pra mostrar os três principais erros de má tradução que afetam o design, algo na linha de “Vale do Silicone” para se referir a Silicon Valley.
Ao contrário de “fonte”, que tem uma origem mais completa, “salvar” e “justificar” têm uma explicação mais simples: são só traduções literais e muito mal-feitas. Save, em inglês, é mais abrangente e menos desesperado que “salvar”, e também quer dizer “poupar, proteger”. A melhor tradução para nós deveria ser “gravar”, talvez. Sei lá.

Texto justificado. Ou não.
“Justificado” é ainda mais ridículo. Se você pisou na bola com alguém, deu a maior mancada e quer se desculpar, pode mandar flores e escrever um cartão. O texto em que você tenta se explicar que “não é o que parece, meu bem” é um texto justificado, já que proporciona uma justificativa para algo. O texto alinhado firmemente às duas margens (direita e esquerda) é chamado corretamente de “blocado”. Justify, em inglês, quer dizer “ajustar, tornar justo”. Mas justo no sentido de não ter espaços antes das margens, não de correto, honesto ou justificado (no estrito senso).
Por último, sabe por que os textos antigos eram blocados? Ora, porque texto tem a mesma origem que tecido e textura. Acreditava-se que o calígrafo costurava o fio do pensamento (Dreamweaver, alguém?) na forma da palavra escrita. Como você não usaria um pano rasgado irregularmente nem para limpar o chão da cozinha, é natural que os primeiros textos buscassem ser o mais regulares possível. É daí também que surgiram as expressões “Linha de pensamento”, “Fio da meada” e outras tantas.

No próximo post, motivos tipográfico por trás de alguns comandos CSS.
Popularity: 69% [?]

Muito Legal Luli.
Não sei se fui o primeiro a ler esse post, mas só sei que quando “twittou” o anuncio dele, eu já estava aqui lendo.. heheh
Um abraço, e aguardo os próximos!
Sei não Luli, mas não consigo enxergar (como você faz) um enterro do Flash “coming soon”…
Acredito eu que, se o Flash sumir, será para o advento (de uma vez por todas) das aplicações em Flex e AIR (principalmente o AIR que IMHO será o “tchan” pros empresários que vão poder disponibilizar sistemas online off-browser).
Quanto ao js/xml, sei não, mas também acho que eles não devem “bater as botas” num futuro tão próximo quanto aparenta no post aí.
Enfim, no mais, parabéns (como sempre neah!). O post tá show!
Muito bom no aguardo por mais da série, espero que o link do cara que “traduziu” o Elementos do Estilo Tipográfico para CSS tenha ajudado.
Abs
Muito bom artigo e conscientizador para designers. Espero que a série continue e paremos de ver textos “justificados” na web cheios de espaços entre as palavras e difíceis de se ler.
Beleza. Quando terminei de ler eu disse em voz alta: “AMÉM”.
Quanto ao Flash, penso que se essa tecnologia for utilizada em instruções sobre execuções de tarefas, como montagens, consertos, etc. acertaremos muito mais. É claro que para entretenimento (desenhos animados) o Flash é fantástico. Eu considero quase um pecado websites feitos em Flash (Tenho um no meu portfólio). Hotsites talvez, mas websites NUNCA! É como colocar os cotovelos sobre a mesa quando se está comendo.
Luli, mais uma vez, parabéns pelo post!
Não tenho [ainda] opinião formada sobre futuro de flashs, js e outros pinduricalhos da web. São várias as correntes divergentes e de forças semelhantes fazendo projeções para a web de amanhã - fico onde estou, por enquanto.
Sobre as traduções porcas, será que foi mancada dos primeiros softwares em português, alguma relação com o pt-PT ou uma consolidação de um aportuguesamento dos software em ingles, como ‘deletar’, ‘estopar’, etc?
Flash, uma tecnologia perdida? Que diabos você comeu no café da manhã? Eu entendo o contexto e a ‘justificativa’ do seu argumento… o Flash usado na hora e no lugar errado é um bode na sala de estar, também torço para que essas aberrações virem coisa do passado. Mas ainda assim, o Flash é de longe a melhor opção para integrar games, vídeo, som, ou qualquer tipo de rich-media na internet… ou você acha que o mundo virtual vive só de CSS?
Moçada, desculpe. Acho que me expressei mal. Acredito sim que o Flash irá sumir, como o CSS também o fará. A inovação que eles representam, seja em animação ou em folhas de estilos, veio para ficar. O Felipe e o Nagash, em seus exemplos, mostraram que em breve ninguém falará em Flash, mas em animação. Seja lá qual for a tecnologia que a sustente.
Se você disse “agooora sim”, obrigado. E perdão pela confusão. Há uma defensividade natural entre a galera de animação, provavelmente causada pelos excessos da galerinha sem noção e da paixão por web standards.
Não é necessário. Flash é legal e cada coisa é bem-finda em seu lugar relevante.
Quanto aos outros comentários: muito obrigado a todos, principalmente agora que essa polêmica de “morte das tecnologias, não das idéias que as sustentam” está encerrada.
Guilherme, ainda não olhei com o respeito que aquele site merece, mas acho fundamental, obrigatória a visita a ele. Talvez ele vire o capítulo final dessa parte de Tipografia.
Lucas, não manjo de Etimologia, acho que a tradução tosca é simplesmente falta de instrução ou um medo à Homer Simpson de se parecer erudito. Não tem nada a ver com Portugal porque lá eles até exageram na direção oposta, chamando mouse de Rato.
Show de bola Luli, gostei muito, a foto da gaveta de tipos me fez lembrar quando eu trabalhei fazendo carimbos hahaha e também quando comecei a conhecer como funcionam as gráficas, isso faz muito tempo, mas ainda exitem gráficas utilizando esse processo usando aquelas velhas máquinas Minerva…hehehe
A confusão ali sobre fonte e letra é quase a mesma entre logomarca e logotipo, para muitos é a mesma coisa, mas não é :)
Abraços Luli e qualquer dia a gente aparece aí denovo pra te pagar outra Coca Zero…rs
É.. desses um que tem dado boas respiradas é o XML. Pessoal da web semântica, informação estruturada, o próprio RSS, arquivos de configuração, tudo tem adotado o XML. Sobre o Flash, eu não sou tão fã dele enquanto tecnologia e parece que o Silverlight da M$, junto com Vi$ual $tudio, tão dando um bom chega pra lá em termos de integração com sistemas de back-end…. Ah.. curti a legenda frita da objetiva. Parabéns pelo post. Ótima URL pra passar pro cliente que acha que blocar texto é tudo de bom: “olha como fica organizadinho”.
(…)
Um minuto de silêncio para a modularidade.
(…)
Ok, pode ligar novamente a música.
Pois é, Davi, para não voltar à questão das ferramentas, tanto o XêMêLê quanto o Flash e o luz prateada estão com os dias contados. O que permanece é a inovação que cada um traz para o processo de comunicação.
Vão-se os dedos e os anéis, fica o hábito de usá-los.
Como a música no Mojo.
Luli,
Uma sugestão:
Na contrução de fontes digitais normalmente é usado o termo glifo (caracter) para definir uma letra da fonte digital. Glifo vem do termo inglês: Glyph.
http://en.wikipedia.org/wiki/Glyph
Penso que vale usar o termo no texto abaixo.
Pra começar, “letra” não é “fonte”. Quer dizer, é, mas não completamente. Letra é letra, também conhecida como “família tipográfica” ou “tipo” (caindo em desuso, já que remete ao processo arcaico de composição).
Devemos começar a pensar em conhecimentos correlacionados, e a partir daí, estudar muito, ler muito e praticar muito. Apresentar trabalhos e projetos cada vez mais profissionais sugando o acesso a informações que todos temos. Quanto ao futuro fica a frase de Cazuza “Eu vejo o futuro repetir o passado, eu vejo um museu de grandes novidades, o tempo não pára”.
Gustavo, é uma boa sugestão. Eu não uso para não ter que acrescentar mais um termo a este imbróglio. Mais eu não adianto para não estragar a surpresa. No próximo post, entre outras coisas, explico a diferença entre Glifo, Grifo e Griffo. E de tipologia para tipografia, etc etc etc.
Obrigado pela contribuição.
Luli,
Muito bom o post sobre CSS
Te enviei um email com 2 “print screen”…
arrivederci,
Anunciato )))
Quando eu estava estudando cores, você postou aquela série sobre cores. Agora que estou estudando tipografia você começa a escrever sobre… tipografia!
Medo… :)
Dica de filme: “Helvetica“, documentário sobre esta “fonte” largamente usada, muito interessante, abrangendo vários aspectos sobre tipografia! Vale a pena. (está rolando nas redes de torrent por aí, inclusive a legenda em português, é só pesquisar)
que “fonte” eles usam nessa legenda? :P
Hahahah, a que vc quiser, Guilherme. Só não recomendo que seja Arial. Depois conto o porquê.
É impressionante como a nossa visão muda ao tomarmos consciência da “fonte” das coisas. Isso é muito importante algumas vezes ao defender um trabalho, ou até mesmo, dependendo se tivermos um cliente mais erudito, argumentarmos à altura.
Acredito que boa parte dos designers, mesmo com uma formação acadêmica, acabam deixando essas questões cairem em esquecimento.
Parabéns Luli, como sempre.
Abração
Posso dizer que foi um dos melhores textos “teóricos” de design que eu já li.
Parabéns Luli, pela mensagem e pela forma. (espero não ter usado nenhum desses termos de forma equivocada - hehehe)
Com certeza esses conhecimentos básicos do Design devem ser disseminados para quem, de certa forma, acaba lidando com essa parte!
Concordo plenamente com seu ponto de vista.
Sensacional!
A Lordware está acompanhando…
“Até o MinC usa CSS. Você não? Vergonha…”
Gostaria de saber o motivo da utilização da frase..
Abraços!!
Só um breve comentário a respeito da sua afirmativa de que o Flash irá virar tecnologia perdida. Não sou puritano, nem para CSS, nem para Flash, apesar de ser certificado pela Macromedia em 2002 para desenvolver RIA.
RIA foi o antecedente de tudo isso que se faz hoje com CSS, Ajax, Frameworks e tudo mais. Até hoje faço jobs com tecnologia Flash que são mais usáveis e mais intelegíveis do que muitos sites em CSS.
O que temos que observar é a necessidade do projeto, e se quem fará o projeto tem conhecimento suficiente das ferramentas, senão, até mesmo um site em CSS pode ser uma catástrofe.
Excelente texto! Muito engraçado a explicação do texto justificado! Uhauea, parabéns pelo texto!
Matou a pau! hahahahahaha
Mais um texto, mais um dia com coisas a se pensar, mais odio de minha faculdade que so ensina merda, obrigado Luli!
Obrigado pelo elogio, Rangell, mas se sua escola não tá legal, veja como você pode contribuir. Esse é o estudo 2.0 =D