Tipografia: Guia sobre Tipos - Aula 01 - Curso de Design

Oi e aí tudo bem Aqui é o David arte bem-vindo a mais uma aula sobre conceitos de design nessa hora a gente vai falar sobre um assunto tão importante tão querido que assunto tipografia e porque falar de tipografia é porque é a discografia está em toda parte ela tá em todo lugar a gente liga para tipografia a todo momento então se você vai no supermercado por exemplo Lá tem muita tipografia tem nos produtos têm nas ofertas tem no caixa tem toda a parte é um se você for no supermercado é uma tempestade de fotografia que

você vai ver e também a gente tem tipografia em sinalizações em placas e sistemas ela é importante também para nos orientar e também para se comunicar então a gente lida com a tipografia todo momento e a gente nem percebe então Porém quando você tá lá no Whats manda sua mensagem quando você tá no Skype Você tá lendo um artigo de um blog você tá usando o app e jogando algum game também lá tem fotografia porque a tipografia é essencial para nosso dia a dia e mais essencial ainda para gente que trabalha com comunicação um design

com criação a e pega na etimologia da palavra fotografia vem do grego tipos formas grapher igual a escrita escrita é o sistema que a gente utiliza para expressar graficamente o pensamento humano e grafia a tecnologia que a gente usa para registrar um suporte a escrita então na escrita o sistema que a gente utiliza signos para expressar graficamente um suporte nosso pensamento pensamento humano e a tipografia é a mecanização da escrita que é feita através de uma tecnologia para reprodução de texto se insere a gente vai ver isso um pouquinho mais à frente mas antes a

gente vai falar um pouco sobre escrita é bom então homem desde os primórdios em buscou por mês de se comunicar e se expressar e fazer isso através de gestos desenhos pinturas esculturas e após o desenvolvimento da fala surgiu a necessidade de criar registros de preservar a memória já que a gente infelizmente não tem um HD na cabeça e a consequência disso foi invenção da escrita então escrita um Marco importante na história porque ela de marca a história da pré-história iniciando assim o registro doce acontecimentos EA escrita Como já disse é um sistema que utiliza signos

para expressar graficamente que a gente fala o que a gente pensa em um suporte mas não foi só a necessidade de guardar esses registro também surge a necessidade de reproduzir esses registros inserem e daí começa a história da tipografia às vezes foram os primeiros a criar um sistema tipográfico bem antes do pai da tipografia que é algo themberg então Claro os asiáticos aí pela frente e eles faziam isso através de argila cozida esperavam os tipos né através de argila cozida madeira bronze e colocava numa tábua o nome do cara que entrou isso daí foi pysheng

eu espero que tenha falado o nome do Falecido corretamente mas foi esse chinesinho esse asiático e cria um sistema tipográfico aí por volta de 1.400 depois de Cristo mas o grande inventor da tipografia o pai das fotografia como a gente conhece é o bottenberg então luttenberger lá pelo século 15 ele inventou a tipografia Ele criou uma Bíblia de 42 linhas o primeiro livro impresso na história esse livro que era composto por 642 páginas com uma tiragem aproximada de 200 exemplares E com isso com essa e menção a invenção da tipografia o botão Bergamo do mundo

porque porque antigamente a cultura o conhecimento não era tão acessível como hoje né a reprodução de livros a reprodução de livro ficava exclusivamente para os monges copistas estavam lá nos Mosteiros então com essa invenção da tipografia caiu monopólio dos Mosteiros e se hoje a gente tem essa informação é pensar que acontecer se vo essa enxurrada de informação o presente tente conhecimento que a gente pode obter deve ser muito também a Gutenberg e com a tipografia conseguiu socializar socializar um pouquinho aí o conhecimento e agora que a gente vai ver um pouquinho sobre a história a

gente vai cair na anatomia da tipografia portanto a primeira coisa que a gente tem que falar é sobre e os grifos as letras né são signos alfabéticos projetados para reprodução mecânica e aí a gente cai na família tipográfica família tipográfica o conjunto de caracteres que possuem as mesmas características independente das suas variações a gente vai ver mais à frente o que são essas variações Mas saiba que família tipo gráfico Mas sabe que o família tipográfica um conjunto de caracteres que possuem as mesmas características e aí a gente tem vários tipos de famílias a gente tem

essa daqui que é a mais famosa uma das mais queridas que é a helvética Então a gente tem helvética tem a família real tem a família time então família tipográfica é isso é bem simples entender né que a gente vai para fonte fonte é o conjunto de grifes que compõem uma família tipográfica são um arquivo que a gente usa o computador Aquilo é considerado uma fonte e as letras são compostas por um conjunto de elementos e e tem vários elementos a gente tem orelha junção espora sim abertura incisão barra perna haste e o principal que

a gente tem que saber que a serifa a gente vai falar um pouquinho mais sobre a serifa Mas seria essa perninha e assim risquinho que a gente tem nas fontes então por exemplo uma fonte serifaria times a gente está usando fonte serifada aqui no título você pode ver que ela tem essa perninha aí na na letra bom então mais à frente a gente vai ver como funciona e porque ou não usar serifa mais é é importante saber que as letras são compostas por um conjunto de elementos ela não é feita se por acaso até por

isso conte é caro você comprar uma fonte até por isso é difícil você construiu uma fonte e você nem precisa saber todos esses elementos de cabeça mas é importante você saber que não é feita assim por acaso e que tem todo o estudo Por Trás uma fonte agora a gente tem as ligaduras né brigadeiro é só conexões de dois ou mais caracteres e o que é essa ligadura tá vendo essas duas letras UFF ue pois bem o s o s s a linha ascendente aí que ela vai caindo né que é um pouquinho é uma

fonte mais humanista Então ela tem esse esse essa caidinha aqui a letra aí Claro ela tem o Pingo do I só que quando vou em suas letras o Pingo do I mais ascendente e isso atrapalha a leitura legibilidade então para corrigir isso criou-se a ligadura você não vai encontrar ligadura em todas as fontes inclusive talvez só em Fontes bem mais trabalhadas bem mais feitas você vai encontrar isso e também não é toda ponte que precisa disso claro que uma fonte mais geométrica Muito provavelmente não vai precisar disso são fontes mais humanistas meses que precisam disso

então É como se você juntar essas duas letras para melhorar a leitura e continuando aqui na anatomia dos chips a gente tem altura de X a linha x EA linha base então a linha Base São onde as letras são assentadas ok uma a gente pode ver aí não exemplo a linha x é linha do topo das Letras Não ascendentes são as letras minúsculas ou Caixa Baixa e altura da letra é altura de x é a distância então da linha base até a linha x bom então a gente tem os ascendentes e Os descendentes e o

que são isso as partes de cima das Letras B Dr que KLB que se estendem acima da autora de X são considerados ascendentes Os descendentes é o contrário Então na letra g j p q y que se estendem abaixo da autora dx6 vendeu na altura de X né então Os descendentes ficam abaixo da altura de X os ascendentes acima da altura de x é Oi e a gente tem a Caixa Baixa e a caixa alta então Caixa Baixa são os caracteres minúsculos e caixa alta são as letras são os grifos maiúsculos portanto se você for

trabalhar e alguma agência algum lugar é esse foi nosso quadrado fica lá é caixa baixo caixa alta você já sabe quer tem uns cara que fala só de metido tá então de mencionar é mais um super falam caixa alta e com muitas vezes nem sabe da onde vem esse termo caixa alta que derivam daquele processo de impressão antigo onde as letras maiúsculas ficavam em caixa alta você pode ver aí na imagem na caixa exterior e as letras minúsculas ficavam na caixa de baixo então na Caixa Baixa portanto esse sistema aí de organização e que os

tipógrafos usavam para construir os textos e é daí que direi lá esse termos a esses nomes caixa alta e Caixa Baixa eu a gente tem o corpo o corpo é o tamanho no ponto mais alto da linha ascendente até o ponto mais baixo da descendente então a gente pode ver que o corpo se mete no no ponto mais alto da ponte seria a linha ascendente ou dá ou da letra caixa alta até o ponto mais baixo se eu ponto da ascendente tudo isso é o tamanho total é o corpo da fonte diferente da altura de

x que altura de x é somente o tamanho das letras em minúsculo em Caixa Baixa sem contar as ascendentes são sem contar essa perninha para cima aí do F sem contar o pingo doer e só encontrar o a acha e do H Ok então e a gente tem a ver Salete é o conjunto de caracteres em maiúsculo altura de minúscula então você pode ver que as letras estão todas em maiúsculas só que altura estão todas nem a altura de x é então estão todas na altura das Letras minúsculas esse efeito você pode usar para um

título né É difícil você usar isso em texto corrido porque deve ficar muito ruim de ler mas em título assim por exemplo este offline daria para usar esse tipo de efeito a gente também tem os numerais em numerário a gente tem alguns estilos então primeira old Style que são quando os números eles ultrapassam a altura de X seja para cima seja para baixo Então como no exemplo a gente pode ver aí a letra o número três quatro cinco até Honório eles ultrapassam altura DX ainda enumerar eles têm O que são os numerais que tem um

mesmo tamanho de uma caixa alta elas não possuem ascendentes nem descendentes Mas eles têm o mesmo tamanho de um de uma letra maiúscula e por fim os numerais em esmaltes então eles não têm ascendentes nem descendentes e são da mesma altura DX ok e ainda em anatomia a gente tem os eixos dependendo do tipo da família a gente pode ter um eixo humanista um eixo racionalista ou sem está que aquela coisa mais geométrica e se diz respeito à inclinação principalmente das Letras b c e g o p e que então esse humanista é um eixo

mais oblíquo que simula se condiz com a inclinação na escrita manual então se você pegar uma uma fonte aqui simula uma escrita manual ela provavelmente vai ter uma um eixo humanista e um eixo racionalista um esse na vertical né que tem aí tem que no caso tem mais a ver com as formas Neo clássicas e românticas da Rommanel clássicas e românticas no aqui no que se refere aos movimentos artísticos Ok e os em Esse é a fonte aí pra o usa no computador OK tá então por exemplo are All é uma fonte sem eixo limpeza

da ponte de desrespeitar a espessura dos tipos a gente tem Light média Roman bold Black tudo isso diz respeito ao peso da fonte e além do pênis também tem a postura a postura se refere à inclinação do eixo das letras a gente possui Uma postura oblíqua quando é os caracteres são inclinados EA gente tem uma postura regular quando o eixo é Central EA vertical e não aumente esses caracteres oblíquos a gente chama de Itálico né mas na verdade eles não são metálicos o nome certo seria oblíquo mais esse nome Itálico vem justamente do grifo né

Francesco griffo então tem toda uma história por trás desse nome da like na verdade se a gente tivesse que chamar de Itália que seriam as fontes cursivas e não e as fontes inclinada sobre coisas mais a gente usa o termo em Itálico aí no nosso dia a dia e agora falando sobre classificação ficou gráfica nas famílias são classificadas de acordo com suas características existem vários tipos de categorização tipográfica você vai se você pesquisar na internet tem várias Fontes mais todas praticamente vão em uma direção todas tem algumas coisas em comum e são essas coisas em

comum que eu trouxe para essa classificação tipográfica Então dentro de todas as classificações elas meio que concordam em alguns sentidos então o primeiro é com serifa família com serifa e são aquela perninha para a gente tem na fonte você pode ver que todas aí tem essa serifa e dentre os tipos mais conhecidos conseguir fazer estampa times O que foi a família criada para o jornal inglês the times of London a gente mais abaixo tem atrás de um pro a gente mais abaixo tem a fonte aí trajan pro e atrás é o próprio deriva da da

coluna foi inspirada na Coluna de Trajano que ela ficou Luna que narra a história e a Vitória Épica e nem na guerra essa coluna Romana e que até até o vídeo você procurar na internet tem um vídeo que fala sobre essa fonte e dos filmes assim descartáveis de filme que usa essa fonte Talvez até por por ter se lado a histórico de guerra de Vitória de batalha muito ciúmes usaram trajes em prol Fontes parecidas e interessante nessa Coluna de Trajano é que o primeiro ela contempla todas as letras né lá você encontra todas as letras

essas essas ceifas que foram criadas Elas têm uma função na coluna porque quando chovia a intenção era não acumular água na letra que era Talhada se você procurar ele Coluna de Trajano você vai ver então quando chovia para não acumular água eles encontraram a solução foi inserir E essas ervas para a água escorrer então a água não ficava acumulada nas letras e por que a gente tem a Museu da Museu que a fonte serifada aí do nosso século né a fonte ser fada mais geométrica ela tem um um ar mais moderno eu até usei ela

não é book de html então é uma fonte aí que é muito usada muito querida aí pelos designers sem serifa fonte sem serifa Tem uma função importante na tela a gente vai ver se mais para frente mas as fontes sem serifa são as fontes aí de tela basicamente e a gente tem Areal que a clássica foi criada justamente para isso a gente tem a elegante Futura é uma fonte lá de 1930 na década de 30 final de 20 início de três o criado por Reiner e é uma fonte bem geométrica ela foi inspirada ela é

da época da bahaus da escola alemã de design Ah e por que a gente tinha the best a fonte mais querida por Inúmeras pessoas talvez a mais usada no mundo que é a helvética é a gente também tem o tipo cursivo na fonte cursiva que Aquela fonte que imita a escrita humana que imita a escrita é de mão escrito humana Então a gente tem tem a lúcida e tem a great bytes também que é muito usada se você vê aí ela é um monte de propaganda de pedir anúncios a gente tem um tipo de fantasia

também eu tipo fantasia um tipo de fonte que o principal objetivo dela essa é uma fonte visual vai ser uma fonte de impacto usa para ver e não para ler né então ela é boa para ti tu para chamadas mas não é muito bom em texto corrido dentro da classificação a gente também tem um tipo gótica que eu tipo que imita a fonte glótica e da Fonte dos monges copistas também então os monges copistas antes da tipografia usavam escreviam desse tipo nesse formato ela tem esse a dance né mais pesado mais sério até mais medieval

agora a gente tem um tipo de Imbé são esses tipos que usam símbolos né na verdade os caracteres eles são símbolos não são letras e que é claro e tem a função aqui mais visual Ok e agora a gente cai em unidades de medidas unidades de medidas servem para determinar o tamanho do cor também da fonte o tamanho das entrelinhas Ah tá está as unidades físicas que a gente tem ponto tem a pai tem uma polegada então 12 pontos e que vale é uma paica que é igual a quatro, por cima da mente tá 4,23

m m que é igual a um cesto de polegada E por que que a gente tem que saber disso porque se você for criar uma peça para impressão você vai usar Pontes né você não vai usar pixels para impressão. É a medida tipográfica né estabelecida pelo francês de dó e a gente tem a placa tem uma medida usada aí nos países de língua inglesa como Estados Unidos e Inglaterra e corresponde a um cesto de polegada que é o presente tá vendo aí na tela então antigamente as pessoas então Antigamente os designers temos que mais trabalho

nessa nessa questão da unidade você tinha que fazer cálculos os a régua Hoje em Dia com software a gente não precisa mais de tanta preocupação mas é bom saber disso e também bom saber que como a maioria dos programas são nos Estados Unidos então a referência que os programas usam é a Piper a gente tem uma outra unidade de medida e essa unidade de medida que a gente tá vendo agora na tela que é a Pixel é o primeiro Pixel seria esse quadrado aqui menor em branco composto por três elementos três cores que o RGB

que a gente vai ver mais para frente mas uma unidade Pixel pode mudar de tela para tela E aí que a gente vai falar sobre Pixel física e pixel de referência note nesse exemplo existem dois tablets e tamanhos praticamente iguais só que eles renderização de forma diferente o mesmo tamanho de pixel Então a gente tem o tamanho físico e também da tela mais a resolução então por exemplo se eu pego duas máquinas do mesmo tamanho só que uma uma resolução melhor e a outra com a uma resolução um pouquinho inferior a qual a resolução maior

é vai usar mais pixels para renderizar um mesmo tamanho então quando a gente usa a unidade de medida Pixel quando a gente trabalha com tipografia para a web a gente tem que testar você tem que garantir a leitura e o envio da mensagem para o maior número de pessoas que vocês tem que atingir o maior número de dispositivos possíveis e conheci a gente encerra a primeira parte sobre tipografia eu te vejo na próxima aula um forte abraço e até mais