Nem só de código vive um desenvolvedor web.

Nem só de código vive um desenvolvedor(a) web, principalmente para quem está começando na área. Muitas das vezes, ou quase sempre, ao desenvolvermos nossos projetos precisamos além do codar, deixar o front-end da nossa aplicação o mais amigável e profissional possível e isso implica trabalhar com cores, fontes, imagens e outros atributos relacionados ao designer da aplicação.

Quem nunca tentou replicar a página inicial do Instagram, Facebook  ou e do Spotify para anexar em seu portfolio e ficou se perguntando que estilo de fonte esses sites usam, ou visitou um determinado site e se deparou com uma fonte e pensou, “Era esse estilo de fonte que eu estava buscando”. Bom, meu amigo e minha amiga dev. uma ótima dica para você é  o Fonts Ninja.

Fonts Ninja é uma extensão para google chrome que tem como funcionalidade identificar fontes que estão sendo usadas na página, possibilitando obter diversas informações da mesma como cor, largura, tamanho e peso. Desta maneira seu fluxo de trabalho se torna mais produtivo, já que, buscar por uma determinada fonte pode ser um processo demorado e cansativo.

Neste tutorial você vai conhecer essa ferramenta que pode te ajudar e muito para que seus projetos sejam mais bonitos e profissionais de uma maneira rápida e prática.

Então, Mão na massa

Para começar clique em personalizar e controlar o Google Chrome.  

São os três pontos verticais no canto superior direito da aba do Google Chrome

Depois é só ir até a opção Mais Ferramentas e em seguida clicar em Extensões.

Ao clicar em extensões, você será direcionado a página onde se encontra todas as suas extensões já instaladas. Note que no meu caso ainda não existe nenhuma extensão na página principal.

Então clique em Chrome Web Store para acessar a loja de aplicativos e extensões do Chrome.

Essa é a página inicial do Chrome Web Store. 

Na página do Chrome web stores vá até a barra de pesquisa e digite fonts ninja de Enter. Extensões correspondentes ao termo da busca serão mostradas. O app que queremos é Fonts Ninja desenvolvido pela empresa de mesmo nome. De um clique sobre a extensão para poder ser levado a até a página de apresentação do app.

Na página do aplicativo você terá uma breve apresentação do mesmo e algumas informações adicionais.

Para usar a extensão no chrome clique no botão Usar no Chrome

Uma caixa de diálogo será aberta, clique em adicionar extensão.

Observe que no canto superior direito um novo ícone apareceu. Isso significa que existem uma ou mais extensões instaladas no navegador do google chrome.

Clique no ícone de extensões para visualizar quais apps estão instalados em seu navegador.

tê-lo

Clique em extensões e em seguida no ícone em fixa

Observe que a cor do ícone é alterada ao mesmo tempo que o ícone do Fonts Ninja aparece na barra do navegador.

Primeira vista

Está na hora de começarmos a usar nossa extensão.

Para isso clique no ícone do aplicativo. Em seguida será mostrado um card suspenso logo abaixo no mesmo que, automaticamente mostrará as principais fontes que estão sendo utilizadas na página em questão.

1 - Nome da fonte usada no site

2 - Card principal

Identificando as fontes

No card podemos observar o nome da fonte, uma área de seleção dos pesos da fonte e uma pequena amostra da fonte relacionada ao tipo de peso.

Ao selecionar o tipo peso da fonte ( Regular - Medium - ExtraBold ) perceba que as mesmas são destacadas na página.

1 - Área de seleção do peso da fonte.

2 - Texto destacado relacionado ao peso da fonte escolhida.

Obtendo mais detalhes sobre a fonte

As funcionalidades do fonts ninja, não se limitam em somente saber o nome das principais fontes que estão sendo usadas em uma página. É possível também saber o tamanho, altura, espaçamento e a cor empregada no texto.

Basta passar o ponteiro em cima da escrita que será mostrado as informações adicionais.

Alterando atributos e copiando o código referente à cor da fonte.

Para alterar os atributos da fonte e copiar o código referente a cor, é só clicar duas vezes no texto ou frase desejada que em seguida o card do fonts ninja aparecerá um mini menu onde você poderá alterar o tamanho e o espaçamento, podendo ter uma noção de como a fonte ficará mediante as proporções inseridas. 

Vale observar que somente a cor tem a possibilidade de copiar para sua área de transferência, bastando clicar sobre o código da cor para que a cópia seja realizada.

1 - Modifica o tamanho da fonte.

2 - Altera os espaços entre as letras.

3 - Código referente a cor da fonte (Ao clicar o mesmo é copiado para a área de transferência)

Existem diversas extensões que podem te auxiliar na hora de desenvolver seus projetos e o fonts ninja é uma delas. Então use e abuse das ferramentas que possibilitam um aumento de produtividade no seu dia a dia. Seja na hora do seu aprendizado ou criando aquele projeto para o seu portfólio. 

Isso é tudo pessoal. Nos vemos por aí.