Aprenda com uma das maiores startups do Brasil, a Taqtile sobre com criar a melhor experiência para o seu usuário, formas de gerar ideias, princípios básicos de design e como desenvolver interfaces de aplicativos e sites, esse curso introdutório é composto de aulas teóricas com exemplos práticos de aplicação de cada assunto abordado. Neste curso serão abordados os seguintes temas: Como conhecer o seu usuário Usabilidade e Prototipação rápida Arquitetura de informação e wireframe Princípios de design Acessibilidade e multi plataforma Elementos de interface do usuário Linguagem da empresa, lidando com o cliente e copyright Monitoração, Mensuração e Teste Ao final desse curso, esperamos que você esteja familiarizado com os principais conceitos, ferramentas e metodologias de criação de interfaces e experiência de usuário. Não deixe de ver as perguntas frequentes antes de se inscrever Conheça os nossos outros cursos: - Criação de Startups: Como desenvolver negócios inovadores https://www.coursera.org/learn/criacao-startups - Consolidando empresas: Estrutura jurídica e financeira https://www.coursera.org/learn/consolidando-empresas - Marketing Digital https://www.coursera.org/learn/estrategia-marketing-digital - Inove na gestão de equipes e negócios: o crescimento da empresa https://www.coursera.org/learn/gestao-equipes-negocios - Marketing e vendas B2B: fechando novos negócios https://www.coursera.org/learn/marketing-vendas-b2b
Tipografia e Espaçamentos
Loading...
Do curso por Universidade de São Paulo
UX / UI: Fundamentos para o design de interface
26 ratings
Na lição
Acessibilidade, multiplataforma e Elementos de interface do usuário
Nesta quinta semana do Curso de UX / UI: Fundamentos para o design de interface, você vai aprender os seguintes assuntos: (i) A importância da acessibilidade em projetos, (ii) Como lidar com multiplataformas, (iii) Como trabalhar com linhas guia e padrões da web, (iv) Aprender sobre cores e tipografias e seus usos, (v) Aprender sobre gestos e micro interações em aplicativos, (vi) Aprender sobre como fazer o refinamento de layout e boas práticas. Contamos com a presença da equipe da Taqtile: Viviane Ducarme, Edmar Miyake, Tuanny Martins, George Chaves, Jakeline Morais, Gregory Milani, Renato Tano e a convidada Maelle Cleys.
Conheça os instrutores
Artur Vilas Boas
Núcleo de Empreendedorismo da USP
André Leme FleuryProfessor
Universidade de São Paulo
Oi, sou Jaqueline.
Sou designer de interface aqui da Taqtile e hoje eu vou explicar
pouco para vocês sobre o básico da tipografia.
Quando a gente está começando um projeto de design, existem muitos elementos que
a gente tem que se preocupar, que são muito importantes para a nossa interface,
para a formação da identidade visual e a tipografia é um deles.
É ela que dá voz ao seu projeto e é a partir dela que você pode
comunicar de uma maneira que encaixe nos conceitos do seu design, do seu projeto.
A tipografia também é conhecida como tipos, como fontes.
Pode encontrar essa variação do nome.
Ela pode tanto hierarquizar o conteúdo como dar personalidade ao seu design.
Por isso, é muito importante conhecer o tipo para escolher o que se encaixa melhor
ao seu projeto.
Então tá, o que é a tipografia?
A tipografia é definida como a arte no processo de criação,
na composição digital ou impressa de um texto.
Então, para a gente entender um pouquinho sobre a história da tipografia a gente tem
que voltar lá para o século 14, quando um cara chamado Gutemberg, lá na Alemanha.
Ele tinha muito habilidade com metais, com molde de metais.
Então ele inventou uma técnica de impressão com tipos móveis.
Essa técnica ajudou muito na impressão de livros porque antigamente eles eram
escritos manualmente, eles levavam muito tempo escrevendo livros, escritas.
Então ela acelerou esse processo, como se fosse uma impressão mesmo desses livros.
Hoje dia esse tipo de arte manual é bem mais rara do que antigamente
porque a gente tem uma variedade imensa de tipos digitais, então é muito
fácil a gente encontrar tipos na internet e milhares de tipos questão de segundos.
Agora que a gente já sabe um pouco sobre a história da tipografia,
a gente vai conhecer algumas características delas, que vão ajudar
a gente a escolher a tipografia ideal do nosso projeto, como a gente comentou.
Então a tipografia conta com uma serie de classificações,
é muito extensa, classificações e estilos, mas as
mais conhecidas são as fontes serifadas e as fontes sem serifa, mas o que é isso?
Agora que a gente já sabe o que é tipografia e sabe
pouquinho sobre essa tipografia, a gente vai falar pouco sobre a classificação da
tipografia porque ela é uma classificação gigante.
Têm vários tipos de estilos,
mas os mais conhecidos são as fontes serifadas e as fontes sem serifa.
O que é isso?
As fontes serifadas são aquelas fontes que têm uns tracinhos nas hastes das letras,
das fontes de cada caractere e elas são bem utilizadas em livros, em textos longos.
Então agora que a gente já sabe o que é a tipografia e sabe um pouco sobre a história
da tipografia, a gente vai falar sobre a classificação delas.
É uma classificação muito grande.
A gente vai focar em duas, que é a fonte serifada e a fonte sem serifa.
De forma resumida, as fontes com serifa são aquelas fontes que têm
um tracinho na extremidade e as fontes sem serifa são aquelas que não têm,
elas são mais com bastão, são retas.
Então os tracinhos que têm algumas fontes serifadas são resquícios da
escrita manual, que é muito rica ornamentos e estética,
mas não é só de estética que a fonte serifada se sustenta.
Ela tem aspectos funcionais muito importantes e proporcionam
continuidade na leitura.
Então aquele tracinho ele ajuda a ligar caractere a outro,
e facilita a sua leitura, a continuidade da sua leitura, então ela não cansa.
Se você colocar um texto com bastante informação numa fonte serifada,
ela não vai tornar a leitura cansativa, então a fluência é melhor.
Já as fontes sem serifa, que não possuem esses tracinhos, foram consideradas
durante muitos anos como uma fonte sem estética, sem aquele toque humano.
As primeiras letras serifa surgiram lá por volta de 1820 e elas foram
chamadas até de fontes grotescas, sem estética, só porque elas não tinham essa
aparência cheia de ornamentos e também não lembravam muito a escrita manual.
No começo eram utilizadas tamanhos maiores e textos mais curtos.
Então elas serviam muito bem com chamadas, para títulos de texto,
para propagandas e cartazes.
Hoje a gente já vê bastante livros utilizando fontes não serifadas,
que não têm esses tracinhos porque vale lembrar que essa era uma
convenção que era muito utilizada numa época que era completamente offline.
Então hoje em dia a gente já lê bastante também na internet com fontes sem serifa,
até porque as fontes serifadas, no material assim diferente, por exemplo,
uma tela, que é luminosa, ela às vezes até parece que fica pouquinho borrada.
Isso também não é uma regra, até porque hoje
em dia a gente tem telas cada vez melhores, com qualidade cada vez melhor.
Então o uso agora está mais livre.
Alguns outros exemplos que a gente encontra, falando rapidamente de dois
outros estilos que a gente encontra bastante no estilo tipográfico,
são as fontes cursivas,
que são aquelas fontes que geralmente você vê convite de casamento, certificados.
São algumas fontes que lembram mais a escrita manual mesmo.
Elas passam uma ideia maior de sofisticação,
elas são fontes mais humanas, então são escolhidas para convites de casamento,
esse tipo de coisa que requer refinamento melhor, digamos assim.
Pelo seu excesso de detalhamento, ela também não é indicada para textos longos.
Então é sempre bom quando for escolher uma fonte lembrar disso porque seria muito
difícil você ler texto inteiro com uma fonte de título, de convite.
Sempre que você for escolher essas fontes é bom considerar isso, o uso dela.
E têm as fontes decorativas também, que você já deve ter visto,
por exemplo, cartazes de festa infantil,
convites de festa infantil ou então até mesmo no de Halloween.
A fonte da Disney é um bom exemplo de uma fonte decorativa.
De novo, são fontes que são utilizadas mais
títulos ou alguma parte que você quer chamar bastante atenção.
Elas não são indicadas para você escrever textos muito longos.
Então vale lembrar também que é bom pensar no conceito do seu texto,
do seu aplicativo, do seu design porque imagina você escolher uma fonte
de Halloween para um convite de festa infantil.
Pode ser que funcione, mas pode ser que dê muito errado.
Então é sempre bom pensar no conceito do que você quer passar para a pessoa e
depois escolher a fonte que você vai utilizar.
Agora a gente vai falar sobre outra parte da tipografia,
que são as famílias tipográficas.
Não tem como você falar tipografia e não conhecer as famílias tipográficas,
mas o que é a família tipográfica?
A família tipográfica é um conjunto de caracteres que possuem a mesma
característica, o mesmo desenho, só que têm algumas variações.
Então a família diz respeito às variações de uma mesma fonte,
como a espessura, a largura, por exemplo,
se ela vai ser mais bold, se ela vai ser pouco mais fina, se ela vai ser itálica.
Outros estilos que você pode encontrar também bastante são os estilos
condensados, que as letras ficam mais juntinhas,
ou os estilos que têm espaço horizontal maior, que são os estilos expandidos.
Então existem tipografias que têm famílias imensas, é tipo uma festa de Natal.
Você vai lá e tem uma família super extensa, são todos da mesma família,
mas têm características diferentes.
Então tem contraste diferente, alguns são mais bold, outros não são tão bold assim.
Têm outras famílias que já são mais moderadas, têm ou dois, três pesos,
no máximo.
É bem importante considerar também essa parte da família tipográfica,
ver se ela tem todos os pesos que você vai precisar no futuro porque pode ser que
você escolha uma tipografia que só tenha dois pesos e no futuro você
precise adicionar mais contraste no seu texto,
e aí você não vai ter esse outro peso, essa outra variação.
Então é legal ver se essa tipografia tem uma família mais extensa que vai
te proporcionar uma variedade maior de utilização no seu projeto.
Outro conceito que você vai escutar muito é o conceito de caixa alta de caixa baixa,
mas o que é isso?
Como assim, caixa e tipografia?
Mas faz todo o sentido.
Historicamente, quando o Gutemberg criou a prensa,
eles costumavam guardar as tipografias que eram maiorzinhas.
Sabe quando você digita e parece que você está gritando na internet,
todos com caixa alta?
Ali é chamado de caixa alta.
Esses moldes tipográficos ficavam na caixa de cima,
na gaveta de cima, e os moldes com as fontes menores,
as tipografias menores, eram guardados na gaveta debaixo.
Então é nome que a gente herdou lá daquela época.
Como a gente já falou das outras características, esse estilo, a utilização
dele vai depender muito do formato que você está utilizando e você tem que
tomar muito cuidado porque ele pode deixar a leitura bastante cansativa também.
Então imagina você ler livro inteiro que foi escrito em caixa alta,
todas as letras maiúsculas.
Seria bem mais difícil, não teria aquela continuidade que por exemplo a serifa tem.
A caixa alta, quando você escreve um texto todo em letra maiúscula,
não dá essa continuidade porque todas as letras são da mesma altura.
Então é bom ter essa variação, usar caixa baixa, primeira letra maiúscula se for
textos longos porque você tem essa mudança no formato da
letra e te ajuda a ler mais rápido e mais confortavelmente.
Outro ponto interessante é sobre os espaçamentos.
Então existem três tipos mais conhecidos.
O primeiro é o kerning.
O kerning basicamente é o processo de adicionar ou remover espaço entre os pares
de caracteres.
Então ele tem o objetivo de ajustar visualmente.
Pode ser que a sua tipografia, uma letra e outra,
talvez a letra L e a letra I, elas estejam muito separadas,
são dois caracteres bem finos, então talvez eles fiquem um pouco mais separados.
Algumas fontes precisam desses ajustes, não são todas.
Então é bom também, quando você escolher uma fonte, tomar cuidado com isso,
ver se ela é uma fonte legal, se todos os espaçamentos estão legais,
se você não vai ter que ficar ajustando porque se você tiver que ajustar isso
texto enorme vai dar mais trabalho também.
O kerning também é muito importante porque se ele for
utilizado de uma forma errada, se ele for mal utilizado,
ele pode mudar completamente o contexto e o significado da palavra.
Em exemplo que a gente que trabalha nessa área brinca muito é o tal do keming.
Se você juntar o R e o N do kerning, ele acaba parecendo M.
Então quando você usa o kerning de uma maneira errada,
pode ser que você mude completamente a palavra.
Então o R e N, que eram letras diferentes acabam, juntos,
formando a letra M e muda completamente o sentido que você queria passar.
Existem até alguns jogos que te ajudam a ir treinando os espaçamentos entre uma
letra e outra porque pode parecer bastante difícil, mas você pode ir treinando e eu
vou deixar link também de alguns jogos que você pode ir treinando esse espaçamento.
Existe também o tracking,
que é o espaçamento entre letras e entre palavras do texto como um todo.
Então diferente lá do kerning,
que a gente ia separar os pares de caracteres, aqui não.
Aqui você vai separar como um todo as letras e os espaçamentos entre palavras.
Ele também ajuda se você precisar ocupar um espaço na página
que o seu texto talvez não ocupe, ele vai ajudar também a fazer esses ajustes.
O último é a entrelinha, que é o espaço entre duas linhas de texto.
Então normalmente ela é automatizada digitalmente,
cerca de 20% a mais do que o tamanho da tipografia.
Se você utilizar uma tipografia de tamanho dez, o espaçamento talvez seja entre
12 e 15 e quanto mais a gente aumentar a entre linha, mais espaçado
vai ficar o texto; quanto mais você diminuir, ele vai ficar mais juntinho.
Também é uma coisa que tem que ser utilizada com cuidado.
Às vezes a gente nem precisa ajustar esse tipo de coisa, mas é sempre bom ficar
atento porque todas essas dicas, todas essas coisas que a gente
consegue fazer com a tipografia pode ajudar bastante na leitura.
Ela pode melhorar, mas ela também pode tornar a leitura bem mais difícil.
Explore nosso catálogo
Registre-se gratuitamente e obtenha recomendações, atualizações e ofertas personalizadas.
O Coursera proporciona acesso universal à melhor educação do mundo fazendo parcerias com as melhores universidades e organizações para oferecer cursos on-line.
© 2018 Coursera Inc. Todos os direitos reservados.
