Olá para todos, hoje eu vou falar de @font-face não sei se todos conhecem, mas com essa técnica vocês conseguem colocar font’s não padrões no seu site, chega de falatório e vamos começar a por a mão na massa.

Vou escolher uma font muito usada para layouts a Futura Md Bt abaixo vou fazer um html bem simples.

<h1>Testando @Font-Face</h1>

Depois de criar o código vou gerar as font’s “.eot – .svg – .ttf – .woff vocês tem que usar todos esses tipos para que funcione em todos os browsers.” , eu uso o site http://www.fontsquirrel.com/fontface/generator “atenção este site não funciona o upload da font se for linux somente em windows” .

Para fazer o uploader da font é muito simples, primeiro aperte o botão “add fonts” deixe carregar, depois selecione a opção “optimal” e por final aceite os termos de uso “Agreement” e aperte o botão “Download Your Kit”.

Depois de terminar o download é só descompactar o arquivo gerado e copiar as font’s para dentro do seu projeto, se você quiser crie uma pasta chamada font para que fique mais organizado.

Agora abra a pasta que fizemos download da font e edite o arquivo “stylesheet.css” porque dentro dele já tem o css pronto da nossa font, copie e cole no arquivo no exemplo que estamos fazendo, a única alteração que temos que fazer é colocar o caminho de onde esta nossa font veja o exemplo abaixo.

@font-face {
	font-family: 'FuturaMdBTMedium';
	src: url('font/futura_md_bt_medium-webfont.eot');
	src: url('font/futura_md_bt_medium-webfont.eot?iefix') format('eot'),
	      url('font/futura_md_bt_medium-webfont.woff') format('woff'),
	      url('font/futura_md_bt_medium-webfont.ttf') format('truetype'),
	      url('font/futura_md_bt_medium-webfont.svg#webfontZaJl2R9s') format('svg');
	font-weight: normal;
	font-style: normal;
}

Depois de criar o @font-face no css vamos criar o um estilo para o h1.

h1{
 	font-family: 'FuturaMdBTMedium';
   }

Pronto agora estamos usando uma font não padrão em nosso projeto, vocês viram como é muito simples fazer isto, bom espero que ajude vocês qualquer dúvida ou sugestão é só comentar até o proxímo post.

Exemplo: Visualizar

Arquivos: Download

É pessoal para quem me conheçe sabe que eu sou viciado em uma cerveja…hahahah…e ontem o Lucas mais conhecido como “Maluko” que trabalha comigo na Lógica Digtital, me mostrou essa coleção e não tem como eu deixar passar essa…e tambem se for pensar direito as latinhas é Designer cada uma tem um detalhe mais bunito doque a outra.

Referência: Cyber Vida

E ai pessoal outro dia eu assisti o “Helvetica Film” e achei interessante saber quais logos era feitos com ela e eu achei muitos logos como a Microsoft, 3M, Nestlé, BMW, GM, Harley Davidson, etc… são escritos com Helvética e varias outras grandes marcas como nesse post vai mostrar.

Olá pessoal eu sou viciado em Fontes não tem como esconder isso, eu estava dando uma olhada na galeria de fonts que tenho aqui no meu pc e achei umas fontes muito interessantes que são utilizadas em Filmes, Marcas, Logos, Bandas e Games, então eu resolvi colocar aqui no meu blog  para quem quiser fazer download delas é só clicar na imagem, abaixar e aproveitar…hahahahah…tomara que vocês gostem…

Fonts de Filmes/Produtoras

Marcas/Logos

Bandas

Games

Olá pessoal, já faz um tempinho que o Guto sempre fica perguntando para mim quais fontes seriam boas para colocar no recorte de um certo site, então eu resolvi fazer este post para ele, sempre  quando  tiver ele uma dúvida “Qual fonte seria boa para colocar neste recorte?”.

Abaixo eu vou dar exemplos de fontes com serifa e sem serifa padrões do Windows todas com 11px de altura.

Com Serifa:

Palatino Linotype

Courier New

Times New Roman

Sylfaen

Georgia

Sem Serifa:

Verdana

Arial

Tahoma

Trebuchet MS

Microsoft Sans Serif

Eu sou fissurado por Fontes da para fazer muitas coisas com elas só saber como utilizá-las  e esses caras abaixo sabem como usá-las.  Vamos dar uma olhada:

Referência: Abduzeedo

Neste post eu vou mostrar as oito fontes mais conhecidas e mais usadas pelos Designer e tambem mostrar para um cliente que teimou comigo falando que as fontes mesmo em “Familia” diferentes não muda a sua altura e largura, então vou mostrar pra ele…hahahah…todas as fontes estão no tamanho “50px”.

Referência: Wikipédia

Eu estava navegando e deparei-me com esse post no Abduzeedo e eu achei muito legal os efeitos que da pra fazer com as fontes…na minha opinião esse post é muito bom vale a pena dar uma olhada.

Nesse post vai explicar um pouco da história das Fontes mais famosas do Mundo Designer, “na minha opinião” Helvetica e Arial.

Helvetica
A Helvetica é uma fonte sem serifas desenvolvida em 1957. O nome Helvetica é uma referência ao nome da Suíça em latim, pois esta é a pátria de seu autor (Max Miedinger) e também do Estilo Suiço, nome alternativo do Estilo Tipográfico Internacional, do qual a Helvetica é representante.


Trata-se de uma das famílias de tipos mais populares no mundo contemporâneo, sendo representada nos logotipos de empresas como 3M, AGFA, BASF, American Airlines, BMW, Lufthansa, Microsoft, Mitsubishi Electric, Nestlé, Panasonic, Parmalat, Saab, Samsung, Seagate, Target e Texaco, bem como nos mais variados produtos – Se você tem os jogos Metal Gear Solid 2: Sons of Liberty ou Metal Gear Solid 3: Snake Eater, confira os seus logos: a Helvetica estará lá.
Criada para ser uma alternativa à então popular Akzidenz Grotesk (nascida em 1896), a Helvetica alcançou o sucesso rapidamente, e no começo dos anos 80 passou a ser uma das 4 fontes incluídas junto aos interpretadores Postscript originais (em todas as impressoras laser “clássicas” e de primeira linha), bem como ser por default no Mac OS, por exemplo – porque a Apple não viu nenhum problema em obter (e pagar) a licença para isto.

Arial
A mais popular das fontes sem serifa no mundo Windows, a Arial foi projetada pela Monotype em 1982 a partir da própria Grotesk (compartilhando as raízes da Helvetica, portanto), mas tomando cuidados especiais para ter exatamente as mesmas proporções e peso da bem-sucedida Helvetica, para que documentos feitos para uso da Helvetica pudessem ser impressos ou visualizados com a Arial sem maiores alterações.

É como um clone, embora seja possível diferenciar as duas por pequenos detalhes, como a presença ou não de uma pequena cauda no A minúsculo – algo simples e trivial para os versados nestas artes, mas muito além da percepção do dia-a-dia da maioria dos usuários de computador – a não ser quando eles recebem uma amostra de cada uma das duas fontes, em tamanho 72, e a instrução clara de que devem procurar diferenças.
Este tipo de “clonagem” não era incomum na época. Outros fabricantes tinham seus próprios clones da Helvetica, com nomes como Triumvirate, Helios, Megaron ou Newton – e muitos deles eram cópias fiéis da Helvetica original, e não apenas redesigns criados para ser substitutos intercambiáveis.

Mas quando a Microsoft adotou definitivamente o padrão TrueType (no Windows 3.1), ela não seguiu a trilha da Apple, e preferiu adquirir o direito de distribuir a mais barata Arial, do que a original Helvetica. Certamente ela sabia que a maioria dos usuários não perceberia a diferença. Hoje o clone se tornou muito mais conhecido, e certamente há pessoas que, ao conhecer a Helvetica, invertem o sinal e acreditam que ela seja parecida com a Arial.

Assista o trailer sobre a Helvetica

Referência: Efetividade