Anatomia do tipo - @Curso em Vídeo HTML5 e CSS3

Já chegamos aqui a mais um vídeo sobre tipografia esse assunto que está abordado no nosso Capítulo 14 [Aplausos] E aí [Música] o Olá tudo bem com você seja bem-vindo seja bem-vinda a mais um vídeo aqui de HTML e CSS que a gente está na sequência aqui no capítulo 14 no vídeo anterior a gente viu a primeira parte de teorias sobre tipografia espero sinceramente que você tenha visto o que a gente falou sobre o surgimento da tipografia o que que é esse termo não é de onde veio quem foi que inventou e qual é a necessidade

de se estudar tipografia Qual é a cidade que nós que vamos desenvolver site porque a gente tem que escolher bem os tipos né as fontes e também falei sobre as emoções das fontes a gente assim como as cores transmitem emoções as fontes também fazendo isso vamos diretamente com os slides e vamos continuar nossas estudos vendo a anatomia dos tipos de é o recado de hoje dessa aula aqui é da hostnet que é uma das patrocinadoras do nosso curso e o que eu vim trazer hoje aqui não é um serviço pago da hostnet é algo que

a empresa está oferecendo gratuitamente para você não sei se você sabe mas aqui no canal do curso em vídeo existem playlists específicas que são 100 porcento patrocinadas pela empresa ela tá trazendo para vocês cursos com amor princípios básicos de marketing digital construção de sites WordPress otimização de sites WordPress para deixar eles mais rápidos mais Espertalhões criação de loja online e automação de marketing utilizando o balde tudo isso sem por cento gratuito e utilizando ferramentas gratuitas você não vai precisar ser um assinante da Rosinete para fazer esses cursos tudo ensinado para qualquer tipo de pessoa e

é claro que quando você fosse profissionalizar Você vai precisar de um local para hospedar o seu site utilizando WordPress utilizando o começo utilizando o malte e a partir daí a opção mais sábia eu você já sabe é um grande abraço aqui pela Rússia net Obrigada pelo Patrocínio constante e agora vamos dar continuidade à nossa aula 1 e eu estamos aqui de novo nós vamos falar sobre o estudo básico da tipografia Essa é a parte 2 não perca a parte um Não esqueça de fazer suas anotações E se prepara agora que tem bastante coisa para você

anotar nesse exemplo então basicamente o que a gente vai falar agora é sobre a anatomia dos tipos basicamente que quer um tipo o tipo lembra que a gente falou lá no vídeo é cada uma das Letras né É como eu vou desenhar cada uma das Letras então coloquei algumas letras aqui aleatória são são grifos aleatórios a gente vai falar sobre isso é e eu vou analisar nós vamos analisar partir de agora as partes a anatomia dessas letras Então essa fonte aqui é uma fonte muito conhecida na verdade é a fonte padrão da grande maioria dos

navegadores que atraem New Roman ela é uma fonte serifada subclasse Romana perto basicamente toda a fonte quando ela é desenvolvida a gente tem que em primeiro lugar nos tamanhos quase tamanhos lá amanhã o tamanho da letra não quando você a letra a letra minúscula tem um espaço a letra maiúscula tem outro espaço e nesse espaço vertical o espaço horizontal quantos passos vai ocupar o mesmo minha letra aí cê sabe que o l minúsculo são bem fininhos quanto vai ocupar esse L preocupar letra M que é bem grande quanto o Palito aqui que tá aparecendo aqui

embaixo de mim E ela é bem grande também isso tudo são medidas e quem vai construir uma fonte tem que saber para você que vai usar no site você tem que saber as medidas para ver se eles se encaixam simetricamente na sua parte aí na parte que você quer utilizar essa fonte qual seria a melhor fonte para aplicar em um determinado local Então vamos começar a ver algumas medidas em primeiro lugar não sei se você sabe a letra x é uma letra muito importante ou até dar um destaque nela aqui a letra x ela é

o ponto de partida para a construção de todas as fontes se você sabia isso talvez uma curiosidade é quando você vai construir uma fonte nova quando alguém vai construir uma ponte nova em primeiro lugar eles desenham um X minúsculo dessa fonte porque Guanabara porque existe é uma métrica chamada altura x que é basicamente Qual é a altura dos seus minúsculos nessa suas fontes ela vai definir qual é a altura base de todas as letras minúsculas sem seus ascendentes e descendentes já já vai falar maior Então vamos um com resumir aqui visualmente eu tracei duas linhas

paralelas aí e elas são exatamente no tamanho da letra você percebe que esse tamanho é o mesmo tamanho de todas as letras minúsculas lá não mas olha só a letra B minúscula a letra g minúscula e a letra k minúscula vazaram a b e a cara vazaram para cima e a gema azul para baixo Relaxa já vai entender mas a essência de todas as letras a dentro dessa gente paralelas essa distância entre essas duas linhas paralelas ela se chama como eu disse altura x ela é baseada na letra x minúscula de todas as letras todas

as letras minúsculas de uma fonte são baseadas no tamanho da letra x e assim como existe a altura das letras minúsculas que é baseado no X proporcionalmente é criada a altura das letras maiúsculas que não necessariamente o grande tamanho daquele vazamento além das minúsculas nesse nosso caso aqui o ar e o que são maiores Então eu tenho as peças linha aqui que vai formar esse tamanho desse tamanho que tá lá do lado esquerdo da tela esse tamanho a gente chama de altura das maiúsculas o nome bem criativo que altura do tamanho das letras maiúsculas Enfim

uma outra altura que existe que às vezes é igual a altura das maiúsculas em várias Fontes é esse vazamento que a gente as minúsculas tiveram a gente viu lá a letra b a letra k minúscula vazar um pouquinho para cima essa altura do vazamento que a gente chama né essa altura aqui ó que eu vou terminar essa altura ela se chama ascendente que é o tamanho só do que vazou para cima e existe uma altura do que vazou para baixo por exemplo ali tá G minúscula vazou né a calda a gente chama de cauda nele

Depois você vai ver na anatomia das fontes EA letra que também deve rabinho ali a gente chamou de cauda e ele tem uma altura que a gente chama vi descendente cartão tem altura das maiúsculas altura X acendem e a descendente altura total altura de todas as letras maiúsculas minúsculas essa altura aqui ó tudo tudo tudo com tudo somando todas as alturas a gente chama de corpo então quando a gente vai definir uma fonte a gente tem que saber a altura do corpo dela porque a altura do corpo que eu configuro lá na CSS certo então

altura do corpo é o somatório entre altura x as descendentes ascendentes e a diferença assim a largar altura das maiúsculas fechou vamos falar sobre o outro e tem anatômica esses itens que estão aí na tela são os itens métricos são aqueles itens que a gente precisa medir todos os outros são itens anatômicos eu gosto de separar na minha cabeça de usar atômicos geométricos e os anatomicos corporais mesmo porque os nomes que parecem partes de corpo vamos falar sobre os anatomicos geométricos começando a falar sobre um dos elementos mais importantes da fonte que é esse negocinho

aí esse pezinho da ponte prolongamento que existem algumas Fontes é importante dizer o seguinte a partir de agora nem todas as fontes têm todos esses componentes que a gente vai explicar aqui a ponte que não tem por exemplo esse componente daí que é muito importante que a gente chama de serifa você vai entender Qual a função de uma série fica dentro de uma fonte vou te marcar algumas outras saliências a desse lado também tem uma serifa aqui ó embaixo do carro embaixo doendo também tem serviço não gosta marca aqui ó em cima do carro em

cima do X Essa serifa é um pequeno tracinho que gera no final de algumas Fontes tá nem todas as fontes sem serifa a gente vai ver na classificação das fontes aqui mas por seria a importância de uma seresta cara só é muito engraçado como nosso logo o nosso cérebro funciona É eu já vou te mostrar aonde fazer um teste vou por teu cérebro a prova vamos ver se você vai conseguir passar essa mas basicamente para que que serve uma serifa ela cria uma linha imaginária que o nosso cérebro percebe sem contudo olharei fazem palha serifa

basicamente ele vai gerar essa linha pontilhada aqui ó o nosso olho vai ser enviado por essa linha pode tirada isso Vai facilitar a leitura das palavras quem não tem essa o nosso cérebro vai lendo letra por letra aí é que você se engana nosso cérebro não lê as coisas letras por letras aí eu vou demonstrar para você que você consegue ler coisas mesmo que as letras não sejam aquilo que você tá esperando o teu cérebro consegue completar magistralmente as coisas então é só eu vou dar uma pausa vou ficar em silêncio algum tempinho eu vou

pedir para que você nem é um texto que vai aparecer na sua tela o mais rápido que você puder ler assim Pode tranquilidade mas tem talento de uma maneira bem assim fluida sem ficar prestando atenção nas coisas beleza vai aparecer esse texto em 3 2 1 já E aí E aí E aí Oi e aí conseguiu Espero que tenha conseguido nesse tempo em que eu dei aí foi para você ler esse texto e eu vou ler agora olha isso não importa em qual ordem as letras de uma palavra estão a única coisa importante é que

a primeira e a última esteja no lugar certo isto é porque nós não Lemos cada letra isolada mas a palavra como um todo cara Provavelmente você percebeu que as letras estavam bagunçadas Mas isso não entendi o que você lesse Deu para perceber que já deve ter tentado ler um texto e no meio de uma palavra escrita de um jeito e você leu outra palavra porque ela se pareciam tipo o corretor automático porque o nosso cérebro ele não percebe letra por letra e forma uma palavra o simplesmente bate o olho existe um banco de dados interno

na tua cabeça e você vai lendo Provavelmente você quando deu uma travada e uma palavra outra mas tem palavra que você leu que você nem sabia que ela tava bagunçada as únicas palavras que não consegui bagunçar por nós palavras de uma duas ou três letras né porque não tem como bagunçar o meio de uma palavra de três letras pela só tem uma letra no meio em todas as outras teve umas que você leu e provavelmente não achou que ela tava bagunçada dando uma olhada Agora você vê que todas as palavras acima de quatro letras quatro

letras ou mais elas estão efetivamente bagunçadas e o teu cérebro conseguiu ler perfeitamente é assim Inclusive a utilizei aí uma fonte com serifa uma fonte serifada verdade eu usei uma fonte serifada em molho de passada deve a gente vai falar sobre essas características então quando a gente vai estudar esses fenômenos você consegue perceber como nosso cérebro funciona e como é maravilhoso essa máquina que a gente tem aqui na cachorra Fechou então você a serifa ela vai guiar a sua leitura que Vai facilitar esse trabalho teu cérebro não significa que se não tiver seria para você

não vai conseguir fazer isso consegue principalmente porque seria faz elas surgiram mas para conteúdo impresso no papel na tela já existem estudos Como disse tudo está em mudança de que fontes sem a serifa na fonte com algumas características diferentes da serifa também facilitam a leitura em tela é mas a seguinte eu também é muito importante para uso em papel já gente vai falar sobre fontes serifadas e não se ele fadas com certeza Existem várias maneiras de você apoiar o canal do curso em vídeo mais uma das mais importantes é entrando no site do curso em

vídeo pensa que tá aparecendo aqui do lado e clicando na parte de cima do link seja um apoiador você ajuda muito projeto a se manter gratuito e como recompensa a gente oferece alguns vídeos exclusivos alguns vídeos de backstage alguns cursos exclusivos como um curso básico de programação usando Portugal estúdio algumas aulas adiantadas do curso de html que você tá vendo aqui e de quebra muito em breve também vamos oferecer certificados para quem é apoiador então não perca tempo se você pode ajudar a gente acesso a curso em video. Com e clica no link que está

na parte superior do site Seja um apoiador um continuar analisando anatomia dos tipos aqui vou começar as anatomias a parte geométrica da coisa Existem algumas partes geométricas vou começar com a letra K Lyon eu vou marcar uma parte dela Essa parte a gente chama de haste haste Existem várias letras vão marcar outra letra tem haste na verdade a letra tem duas hastes tem essa do lado direito e tem outro lado esquerdo e a gente vai falar agora agora não tem só letra não tem duas só tem três tem a do lado esquerdo tem lado direito

é aquela deitadinha aquela deitadinha uma arte deitada que une duas Artes a gente dá um outro nome que é o nome de filete por exemplo a letra é minúscula também tem excelente um filete ele une duas hastes ou um ou mais assistir arcos e por falar em Arco olha só a letra N ali ó a letra N tem um arco né quando eu pego duas hastes também o ele tem duas partes e essa barriguinha para cima é um arco A gente vai ver que existe também um conceito de barriga tá próxima parte desse próprio vídeo

a gente vai falar sobre barriga também mas isso dali É um arco existe também um outro elemento visual dá uma olhada nele kabelle ó a letra B tem aquele parece com saltinho de sapato e as letras possuem esse saltinho ele serve para visualmente segurar criar base da letra para não parecer que ela vai cair perto esses saltinho a gente chama de esporão algumas Fontes utilizam esse elemento Às vezes o bebê tá só redondinho ali e a gravidade que segure às vezes bota um esporão ele em algumas letras para isso uma outra coisa que a gente

tem dá uma olhada na letra Alia a letra A Tem a parte de cima a letra V tem esse mesmo elemento na parte de baixo que é o vértice um outro elemento que existem algumas letras ó dá uma olhada na letra R ali ó a letra R ela tem esse componente ali você falar é um filete não é um filete porque ele não tá baseado entre duas "dois Arcos na verdade esse aqui a gente chama de terminal que quando eu tenho um elemento e que ele não está preso em outro lugar tem que tomar cuidado

para você não confundir isso com braços ou pernas também então falar em braços e pernas Esses são os componentes que estão aí na tela que a gente chama que eu chamo basicamente componentes anatômicos geométricos lá vão falar sobre os componentes anatômicos que dizem respeito à parte do nosso dá uma olhadinha ali na letra k vou marcar ele vai pagar os outros e vou marcar na letra k essa letra k ela tem uma base ela tem um elemento que sai de uma haste e que você leva para cima a gente chama isso de braço na própria

letra k existe também um elemento que sai do braço às vezes sai da arte mas às vezes sai do braço que vai para baixo esse elemento a gente chama de perna falta agora agora você tem perna tem perto exatamente ali embaixo da perninha do carro a gente tem o pé vamos marcar o pé de outra letra dá uma olhada na letra alho isso daí é um pé tá um pé é um de Existem os serviços Às vezes tem fonte que não tem serviço mas tem pé que é a base que segura a fonte eles também

um componente que só existe na letra S isso essa escovas essa curva da letra S também tem nome na verdade o s tem duas dessas coisas não é uma pro lado outra pro outro a gente chama isso de espinha E como eu disse alguns minutos atrás a letra B dá uma olhada na letra B ali existe uma haste e nessa arte está em dois Arcos o barco juntos formam que a gente chama de barriga gata barriga mesmo tá então algumas Fontes também possuem barriga quando eu criei a barriga do lado do da letra dele percebe

que surgiu uma área fechada certo aquela área lá um buraquinho dentro da letra isso também existe na letra e dá uma olhada aí na letra g tem dois Buraquinhos na nossa letra g aqui em times New Roman também existe na dentro aqui um Buracão esse buraco na letra essa área interna de uma letra fechada por todos os lados a gente chama de olho e o outro componente visual que às vezes aparecem assim como o esporão lá do beco eu falei é o dá uma olhada ali na letra g a gente tem uma parte de cima

nessa parte de cima a gente chama de orelha Às vezes tem às vezes não tem também e por fim ainda na letra g dá uma olhada Eu já falei esse nome também a parte de baixo que parte na parte da descendente da fonte a gente chama isso de cauda Como eu disse anteriormente também a letra que também tem uma calda Beleza então Esses foram os componentes anatômicos de letras de fontes eu lhe fiz faculdade isso que é grifo grifo é uma dessas letras Pois é é um grifo dessa fonte times New Roman e a Fonte

times New Roman pode ter conjuntos pode ter família então por exemplo que é basicamente vamos vamos voltar aqui tão grifo é uma letra cada uma das Letras de um alfabeto de uma fonte são um livro que eu representei alguns livros mas eu nem espaço aqui na tela a b c d e f g tudo maiúsculo são glifos letras minúsculas também são mitos diferentes das letras maiúsculas quando eu quero todos esses grupos o conjunto de todos os grupos em uma determinada família a gente chama isso de fonte fonte também pode ser o arquivo que você baixa

para poder utilizar essa letra no seu computador a gente vai aprender como colocar fonte estão instaladas confrontos que podem ser instalados no computador e fontes que podem ser utilizadas através da internet fica ligado fica ligado aí na aula porque esse capítulo tá caprichado Tem coisa que eu falei que nem tá escrito no material em PDF para quem gosta de ler o pdf fica pulando os vídeos fica atento ficar então esses serviços também são conhecido o Perez ou letras e o conjunto de como de caracteres ou de letras de um determinado um conjunto de glifos a

gente chama de fontes existe também uma outra característica é assim que eu vou mudar esse a essa fonte times por uma outra fonte a gente chama de roupas infantis você vê que ela já é completamente diferente essa mudança já ocorreu aí é completamente diferente essa fonte eu pensando ela é mais simples ela tem - elementos visuais você consegue perceber o vértice dela tem um cortezinho a parte de baixo os pés não tem ser hifas mas ele tem as duas hastes e tem o filete ali embaixo também só que é o seguinte algumas Fontes além de

somente os glifos ele tem várias formas de representar o mesmo grifo esquisito isso né vou dar um exemplo aqui essa fonte eu pensando que a gente tá precisando ela tem vários formatos de ar vários formatos é uma olhada no primeiro e no último a esses formatos é o que a gente chama de família tipográfica todas esses as todos esses são tentantes só que o primeiro é o open Sans light o segundo é uma pensante normal no terceiro é o pen sans-semibold o próximo é o balde e o último é um extra bold certo então existem

conjuntos de glifos para diferentes famílias Como eu disse e se chama família tipográfica nem toda a fonte tem uma família tipográfica gigante às vezes só tem um tipo de fonte mas às vezes tem famílias tipográficas isso você vai ver também que eu que o Google fonte chama de variações certo nem toda a fonte tem Light nem tenho Teu telefone tem extranegrito geralmente toda a fonte tem normal e nem toda a fonte aqui algumas que nem Tem é só normal mesmo toda a fonte tem normal só que algumas outras tem essa variação de famílias tipográficas aí

beleza já nós aí também e por conta disso surgem as categorias categoria de fonte uma coisa muito importante até porque na hora de escolher você vai escolher pela categoria Como eu disse não sei se nesse vídeo no vídeo anterior quando você escolher a categoria vamos imaginar o seguinte se inscrever por exemplo olá mundo vai escolher lá olar muito essa fonte aí é a times New Roman que a fonte padrão do navegador Só que as vezes não quer usar a fonte padrão você quer usar outra aí você vai começar a perceber que você vai encontrar inúmeras

formas de escrever uma mundo vários tipos de fonte é desde o mais simples ao mais elaborado ou mais esquisito e aí você vai conseguir classificar essa fonte das categorias das fontes são essa primeira fonte essa primeira coisa que eu escrevi olá mundo ela é uma time Romano mas ela classificação dela categoria dela é uma fonte serifada ama porque ele é uma fonte da família serifada categoria perdão ele tem que ser isso é isso acabei de marcar uma série falei com ele tem uma basezinha ali inclusive SM ele tem duas cervejas de um lado que ele

apoiado no vértice também né então responde você me fala só acho que tem seria fazer aí vem a seria fazendo elas que eu expliquei que facilita né guia nosso cérebro na hora de ler essa segunda forma que eu escrevi ela não tem serifa então era conhecida um sancerre do francês Que chique já falei Alemão no vídeo anterior agora tô falando em francês são serviço quer dizer sem serem fã tá sem serifa é porque ele não tem serifa dá uma olhada no m de baixo e Noemi de cima o m de baixo não tem serifa o

Mc cima tem que ser isso você vai escolher a qual a diferença da fonte com serifa e sem serifa não tem serviço hoje em dia a recomendação é de que você use em textos muito longos para impressão em tela Não tô falando em papel papel recomendado é serifada para textos muito longos em sites de preferências as fontes não serem fadas Mas cuidado com as fontes serifadas por exemplo com o espaço lateral muito curto né são fonte muito apertadinhas vai dificultar a leitura o seu objetivo é o seguinte você bateu o olho no site bater o

olho na tela e consegui ler comodamente isso vai da escolha da fonte e da escolha do contraste Nunca use cores não contrastantes tá na hora de leitura você precisa de e dentários lembra que cumprimentar basicamente na hora de ler eu já te dei a dica já te deu não é nem complementar é branco no fundo e preto na letra perto Três Fontes para textos muito longos a gente viu isso no vídeo eu analisei parte do site da Netflix eu te mostrei Netflix usa muito fundo preto letra branca para daquela idade Sala fechada escurinho para ver

o filme só que quando ela tem que mostrar um contrato ela joga fundo branco letra preta porque assim que a gente está acostumado a entender tá não tenta Reinventar a roda tu vai criar um site porcaria você vai ter um ótimo conteúdo mas ninguém vai ler porque ninguém tem paciência para a gente o site tem fundo verde letra amarela cuidado aí a terceira forma eu faço a terceira forma não tem serifa então é uma fonte sem serifa ótima é uma fonte sem serifa só que ela tem uma diferença você percebe que ela tá ocupando espaço

maior porque que ela tá quando espaço maior tamanho de todas as letras aí está o mesmo tamanho as fontes é o tamanho do corpo tá o mesmo assim você me envia aí o corpo é o mesmo corpo de todas elas esse olá mundo o terceiro ele é uma fonte além de eu poderia ter serifa também a gente usou ela é uma fonte monoespaçada Eva Simone passado sem serifa e consegui foi entendi mas que diabos é monoespaçado toda a fonte monoespaçada ela pode ser com ou sem serifa certo aquela parte do vídeo que eu te mostrei

um texto lá doido que você conseguiu ler ela era uma fonte mo noite passada e com serifa essa semana passada sem serifa como que eu classifico uma fonte monoespaçada uma olhada aqui ó considera o terceiro lá mundo e pega a letra A aquele track tem uma senta ali ó pega o tamanho lateral da letra certo esse tamanho aqui ó essa certa que eu tô fazendo essa largura na letra pega agora ali a largura da letra Ele nessa fonte Wellington exatamente a mesma largura do a, o espaço antes do mundo Todos eles têm o mesmo espaço

Por isso que ele monoespaçado tá problema mas toda fonte assim né não dá uma olhada no lá mundo de cima a letra L né do Olá ela ocupa um espaço lateral muito menor do que a letra a, também o espaço também a exclamação também no caso da fonte de by e passadas todas as letras todos os grupos inclusive os símbolos né que também são grifos você vai ter sempre a mesma largura de todos os livros a penúltima que a gente já viu lá com a palavra amor e tudo mais até citei é uma fonte Hand

Drive ou uma fonte chamada fonte de script Font escripta da por quê que é rede item ou script ou infectada por que ela tenta simular a escritura a mão você simula ou a caligrafia humana tá para dar aquela sensação de feito a mão certo então é uma fonte Hand with a última é a bagunça é o que a gente chama de fontes comemorativas ou Fontes display que confunde display como é que eu posso ficar um monte de spray é Aquela fonte e não tem nenhuma das características já de cima ela não se baseia nos tamanhos

ela não tem né a linha base ela não tem nada às vezes ela tem pouco a Mas ela não se preocupa em obedecer aquelas regras anatômicas elas são fontes comemorativas geralmente é são fontes que te levam ao em algum filme por exemplo essa fonte que eu escolhi aí do lá mundo essa última é a fonte que simula a fonte do Jurassic Park aquele filme lá do Parque dos Dinossauros Então tá pintada viu lá num parque dos dinossauros mais uma fonte de spray é justamente Inclusive a esse grupo de fonte de spray se adicionam algumas Fontes

góticas que são aquelas fontes antígona e também algumas Fontes que nem tem letras com a web jeans Slim jeans não sei se você já usou e tem bandeirinha desenho animalzinho esse tudo são fontes display Beleza então essas são as cinco categorias de fontes que a gente vai precisar saber para o próximo vídeo Fechou então é isso meu querido é isso minha querida terminamos a parte teórica que de fontes no próximo vídeo a gente vai colocar a mão na massa e vamos começar a aplicar fontes de forma sempre depois a gente vai avançando dentro dos nossos

documentos HTML utilizando as for existe um grande abraço e a gente se vê na próxima [Música] [Aplausos] [Música] E aí E aí [Aplausos] [Música]