Criar uma escala de tipo (Bootcamp, Semana 5)

1. Introdução: Neste vídeo, neste breve curso, estaremos construindo um sistema tipográfico. Primeiro, falaremos e aprenderemos sobre por que a parte mais importante da nossa grade de design é a grade vertical, especialmente com design responsivo. E, portanto, nossa topografia vai ditar tudo. Usaremos esse conhecimento para construir uma escala tipográfica onde apenas nos preocupamos com o tamanho dos diferentes títulos e os espaços, as paddings e margens em torno desses vários títulos e parágrafos. Veremos algumas das outras coisas que constroem hierarquia visual em um sistema tipográfico. E veremos alguns dos recursos avançados que podemos usar para tornar nosso sistema tipográfico um pouco mais interessante. Então, finalmente, vamos juntar tudo isso com nosso projeto esta semana para criar um sistema tipográfico simples como o que você pode ver atualmente na tela. Seu sistema tipográfico é seu primeiro bloco de construção a construir um sistema de design completo. Vamos resolver isso. 2. Grid vertical: Há muitas razões diferentes pelas quais a primeira coisa absoluta que vamos fazer ao projetar um aplicativo é escolher a topografia corporal. A escolha do tipo de letra para os textos corporais influenciará a altura da linha do texto corporal. E a altura da linha do texto do corpo vai influenciar o ritmo vertical para toda a página, todo o design de todo o site ou aplicativo. Se olharmos para algumas linhas de corpo de texto na minha página do Facebook, podemos ver exatamente a mesma grade de linha de base usada em outro lugar para elementos de interface do usuário ou todos os tipos de partes diferentes do design desta página, incluindo ícones, fundos, mas também tamanhos diferentes de tipografia. Agora isso nos dá uma aparência mais unificada, o que é claro que é bom para o design, tendo uma boa grade de linha de base uniformizada na página. Mas também ajudará na legibilidade. Como um usuário lê diferentes áreas de texto de tamanhos diferentes. Quando eles fazem esses movimentos oculares sacádicos de volta, eles têm um entendimento subconscientemente de onde está a grade da linha de base. É por essas razões que eu pessoalmente acredito que a primeira coisa absoluta que você precisa fazer ao projetar um aplicativo é escolher o tipo de letra do corpo. O traço da fonte ditará o tamanho da fonte do corpo. O tamanho da fonte do corpo ditará o comprimento da linha. E todas essas coisas combinadas ditarão a altura da linha, que dita o ritmo vertical para todo o design da página. Se o Facebook de repente decidisse remarcar e usar Garamond, eles teriam que redesenhar tudo na página, em cada margem, cada pedaço de preenchimento, porque a altura da linha seria precisa mudar para o texto. O termo grade de linha de base pode ser um pouco enganoso. Provavelmente deveríamos chamá-lo de grade vertical. Acabei de pegar esse botão bem parecido com o que acabamos de ver no Facebook. E acabei de te mostrar com uma linha que vem bem no ver mais na grade logo abaixo da parte inferior das letras. Realisticamente a grade no Facebook e eu não sei, não trabalhei no Facebook. Provavelmente parece algo semelhante a isso. Na verdade, vemos que mais não se senta na grade da linha de base. E se eu dividir isso em pedaços menores, esta é uma grade de quatro pixels. Esta é uma grade de 16 pixels. Acho que provavelmente se parece um pouco mais com isso. O texto fica no meio disso. Essencialmente, as alturas da linha de Seymour são 16 pixels, em vez de estar sentada com as letras apoiadas na parte inferior da grade. Agora, as várias razões pelas quais realmente o usuário grelha semelhante a esta. E o primeiro é assim que você traduz isso para o japonês, ele não vai mais ficar na parte inferior da grade. E é claro que mudaríamos o tamanho ligeiramente para o japonês de qualquer maneira, mas não se sentará nessa linha de base confortavelmente. Vai ficar no meio. A altura da linha é baseada na grade, não na linha de base do texto. Um erro incrivelmente comum que eu vi designers com um fundo impresso que começaram a fazer web design fazer é nos dizer qual é essa margem. A margem da linha de base de um texto para a parte superior do cabeçalho do próximo texto. Agora, como sabemos, não é assim que medimos a altura do texto, mas quando viemos escrever CSS, isso é absolutamente impossível implementar o que nossos desenvolvedores precisam. Ou, se somos desenvolvedores de front-end, o que precisamos é conhecer essa margem. Esta é a margem da parte inferior da caixa de limite. Se eu selecionar esse texto de cabeçalho, você poderá ver a caixa de limite. E se eu clicar duas vezes aqui e selecionar o texto, você poderá ver onde a altura da linha termina na parte superior deste texto. E se eu clicar aqui e selecionar algum texto, você poderá ver onde está a altura da linha. Agora, em CSS, podemos implementar isso se soubermos esse tamanho aqui, podemos implementá-lo. Isso, não podemos porque, à medida que esse texto muda, à medida que essas margens mudam, à medida que nossa grade vertical muda e, à medida que esse imposto muda, esse espaço também mudará. Portanto, um problema muito comum em novos designers ou designers que tiveram um plano de fundo impresso é pensar que o espaço da grade de linha de base é útil para nós. O que estamos sempre interessados é o espaço real da caixa de limite e, portanto, estamos mais interessados na altura da linha. Eu trouxe de volta nossos dois favoritos, Garamond e Verdana. E como já falei anteriormente, estou usando esses dois como exemplos porque eles são tipos de letra muito diferentes, eles têm alturas x muito diferentes. Agora já sabemos que, para tornar o EB Garamond legível, idealmente queremos com um tamanho de tipo de 17,5 pixels de referência de altura. E por causa disso, fiz a altura da linha cerca 1,25 vezes o tipo de letra, parcialmente porque este é um comprimento de linha bastante longo. Diz 75. Caractere por linha, comprimento da linha. E como você pode ver agora, 75 caracteres por linha não são muito longos. Agora, o que temos com essa altura de linha de 24 pixels, temos uma boa altura de linha conveniente para criar uma grade vertical. Acabei de criar uma grade de pixels completa. E podemos ver que todas as alturas da linha se encaixam bem nisso porque são todas alturas de linha de 24. Eu criei um cabeçalho que se encaixa nisso também. E um botão com um preenchimento, margens e coisas que se encaixam confortavelmente nisso. Na verdade, se eu sobrepor esse espaço entre eles, podemos ver que as lacunas entre cada bloco de texto também se encaixam muito bem nessa grade de quatro pixels. Então isso está tudo bem e bom para Garamond. E quanto ao DAWNA? Agora sabemos que verdana tem uma altura x maior, para que possamos tornar o tipo de letra um pouco menor, mas idealmente queremos uma altura de linha um pouco maior. Vejamos como Vedanta parece. Acho que está muito bonito aqui. Você saberá dos vídeos anteriores que, para Donna, idealmente queremos uma altura de textos de pixel de referência de 12,5. E se colocarmos isso direito ao máximo, até 150 por cento de altura da linha, isso nos dá 18,5 pixels de referência. Agora não podemos desafiar isso em uma grade vertical agradável e confortável com tanta facilidade. Eu o dividi em uma grade vertical de três pontos sete. E, por favor, não se esqueça de que você pode ter uma fração de um pixel de referência. Alguns desenvolvedores, designers e até mesmo software não permitem que você use frações de um pixel de referência. Frações de um pixel de referência foram completamente aceitáveis desde a primeira versão do CSS. E não há razão prática para que seja um problema quando você leva em consideração que um pixel de referência raramente é divisível pelos pixels reais na tela. De qualquer forma. Em vez disso, dei para Donna uma grade de linha de base de 3,7 pixels de referência em vez de quatro. E foi assim que escolhi a altura da linha do texto do cabeçalho, que é 48,1 pixels de referência, altura da linha e o botão e o espaçamento. Agora, é claro, isso está tudo bem em um mundo perfeito, mas você raramente está trabalhando em um mundo perfeito. Normalmente, você precisa obter seus designs rapidamente e precisa traduzi-los para outros idiomas com bastante rapidez. O que muitos designers farão e o que você provavelmente acabará fazendo. E o que eu vou fazer principalmente pelo resto deste curso. Vamos arredondar os números um pouco. Por exemplo, sabemos que as alturas perfeitas para o nosso texto Vedanta são de 12,5 pixels. Mas talvez nós apenas arredondamos isso para 13 e acabamos de fazer a altura da linha um pouco maior para que ela se encaixe mais bem em uma grade de pixels de referência completa. E isso facilitará muito o uso de software de design para nos comunicar com outros designers e comunicar quais desenvolvedores. E vamos tirar nossos projetos mais rapidamente, não vamos fazer projetos melhores. Mas no mundo real, você normalmente precisa fazer os pequenos compromissos. E da mesma forma, muitos designers, quando o traduzem para o japonês, por exemplo, ignorarão o fato de que você quer fazer com que ele seja cerca de 110% a 115% do tamanho do texto, porque eles vão precisar em seguida, altere bastante essa grade de linha de base, o que é potencialmente punir os usuários japoneses. Mas se tomarmos isso para Donna, por exemplo, não estamos dificultando o uso de nossos leitores japoneses. Estamos dificultando o uso de nossos leitores em inglês porque já estamos arredondando o tamanho do texto. Mas não são apenas traduções com as quais precisamos nos preocupar. Também é capacidade de resposta. Agora, se eu olhar para esta bela e prática página Garamond, tenho com uma grade vertical de quatro pixels. Assim que eu transformar isso em celular, vamos reduzir a altura da linha porque o comprimento da linha não é tão longo. E então isso mudará completamente minha grade vertical. Figma nem me deixa ter uma fração no tamanho da minha grade vertical. Eu tive que criar minhas próprias grades com caixas. E você pode ver aqui que o tecido ainda se encaixa muito bem na minha própria grade feita sob medida desenhada com caixas. E todas as margens também se encaixam perfeitamente nessa grade. Mas, como vimos, sutilmente mudado da visualização de desktop para a visualização móvel, precisaremos mudar essas margens um pouco. Altere esse botão um pouco para garantir que não perdemos o ritmo vertical descendo a página. Por causa disso, nunca podemos realmente confiar em nossa grade vertical, sendo um número redondo agradável e confortável, como quatro pixels. Novamente, nessa situação, você provavelmente fará um pequeno sacrifício para seus usuários móveis ou talvez otimizado para dispositivos móveis e fará um pequeno sacrifício aos usuários do desktop. Normalmente, no interesse de algo tão importante quanto realmente cumprir o prazo. No web design, a ideia de uma grade de linha de base é impossível. Temos uma grade vertical. A linha baseada em texto nunca é colocada na grade. Isso seria impossível escrever o CSS e elaborar as traduções. A grade de linha de base ideal para um aplicativo web é a altura da linha dos textos corporais. Agora, a altura da linha dos textos corporais pode realmente mudar. Por exemplo, quando olhamos para o aplicativo em seu celular ou se mudarmos o texto para japonês foram possíveis, queremos algumas regras CSS em vigor que possam atualizar isso. Veremos isso muito mais no estágio de implementação por enquanto. Uma vez que conhecemos nosso tipo de letra e conhecemos o comprimento da linha, e conhecemos a altura da linha. Agora temos uma boa ideia de qual será a nossa grade de linha de base. Podemos começar a elaborar uma escala de tipos e eventualmente, elaborar todo o design para nossa aplicação. Altura fora dessa linha. 3. Hierarquia visual: Claro, quando estamos trabalhando em nosso sistema tipográfico, queremos construir uma hierarquia visual nisso. Sabemos que a hierarquia visual é de vital importância porque o usuário precisa saber o que ler primeiro, o que ler segundo e o que ler. Em terceiro lugar, conhecemos o conteúdo no site. Eles ainda não. Cabe a nós dizer a eles a importância de cada peça de tipografia. Agora, todos sabem a antiga regra de que texto mais importante é maior e texto menos importante é menor. Mas há várias outras coisas que podemos fazer para criar uma hierarquia visual em nosso sistema tipográfico. Eu tenho este site aqui , pense global health.org. Na verdade, nunca vi este site antes, mas vou usar isso para identificar alguns exemplos de hierarquia visual na topografia. A primeira coisa é que os grandes textos de cabeçalho no topo, são grandes, mas na verdade não são muito maiores do que os textos corporais. Há um salto e tanto, mas não é muito maior. É pedregulho. Mas, o mais importante, é centralmente justificado. É a única coisa. Este e o menu abaixo é a única coisa centralmente justificada. Tudo o resto fica alinhado, todos os outros textos instantaneamente ele aparece. Parece que é mais importante porque está no centro da página e, claro , na parte superior da página. E eu meio que me pergunto se fizemos este texto ainda menos negrito são um pouco menores, mas ainda parece muito importante. Agora, outra coisa que dá a algo muita hierarquia visual é ter muitos espaços em branco ao redor dele. Muitas vezes, não precisamos necessariamente aumentar o texto, só precisamos aumentar o espaço que ele ocupa. Essa caixa de saúde global pensa no topo, tem uma margem bastante grande em torno dela. E se você incluir o bloqueio com o menu, porcentagem significativa da página é ocupada por esse texto de cabeçalho. Without Think Global Health foi que muito maior do que um tamanho não se encaixa tudo claramente tem muito mais importância devido à quantidade de espaços em branco que existe ao seu redor. Agora percebo que cada notícia nesta página tem um pouco de pobreza sobreposta, governança, esse tipo de coisa para dizer em que categoria ela está. E isso surgiu de uma certa maneira porque está em todas as tampas e está em uma cor diferente. Então, há duas outras coisas lá que ajudam a dar hierarquia, que ajudam a diferenciá-la e dizer que é algo diferente. As únicas coisas na página nesta cor laranja, que é obviamente uma das cores de destaque da marca, é o botão de inscrição e esses botões de categoria. Agora, outra coisa que eles usaram para identificar a hierarquia é o tipo de letra. Quando chegamos aos títulos de artigos individuais, eles estão neste tipo de letra serifa, enquanto os títulos principais pareciam estar neste tipo de letra sans serif. Podemos perceber instantaneamente que isso significa coisas diferentes. Ao rolar a página para baixo, você verá que existem divisores com uma borda superior escrita em um texto em negrito. Eles obviamente dividem a página e são um nível diferente de cabeçalho. Este divisor também é, certa forma, um mecanismo de hierarquia visual tipográfica. E se eu rolar para baixo um pouco mais, você verá que há textos de suporte de tempos em tempos escritos em itálico, o que novamente nos diz que significa algo diferente do outro texto da página. É um nível diferente na hierarquia. É claramente algumas metatags ou alguma descrição do que se trata esta série. Agora, algumas outras coisas que eles não usaram neste site, embora eu ache que eles usaram maioria das técnicas de hierarquia visual que eu posso pensar com a tipografia é ter uma cor de fundo embora eu saiba que é aqui onde diz se inscrever e usar escrita menor e bastante grande. Como obviamente você quer que vejamos que isso tem um fundo preto com texto branco. Então, instantaneamente, se destaca e parece bem diferente do outro texto da página. É claro que poderíamos ter um bloco colorido atrás alguns textos ou algo assim para criar um, para criar uma hierarquia visual sem colorir o texto em si, mas dando-lhe um plano de fundo, um modo geral, textos com maior contraste entre o fundo e a cor do primeiro plano são considerados mais importantes. E não pude deixar de notar que essa cor do texto aqui é um cinza um pouco mais clara do que os títulos. E, na verdade, bem no topo, Pense que a saúde global parece ser um preto um pouco mais escuro quando esses subtítulos também. Por fim, outra ferramenta de hierarquia visual é o rastreamento. Na verdade, este texto laranja que diz pobreza. Os cabeçalhos das categorias parecem ter uma certa quantidade de espaço ao redor das letras, é claro, porque eles estão escritos em todas as maiúsculas, então eles aumentaram o rastreamento. Mas cada vez mais espaçamento ou rastreamento de letras pode novamente fazer com que um bloco de texto pareça mais importante na hierarquia visual. Acabamos de examinar esse site de saúde global porque ele tinha muitos exemplos de hierarquia visual na tipografia. modo geral, os sites de notícias um modo geral, os sites de notícias fazem porque eles têm muitos textos sobre eles. Mas algumas das técnicas que podemos querer pensar sobre nossa cor, fundo, cor, espaçamento ou rastreamento das margens, a quantidade de espaços em branco ao redor do texto. Usando todas as maiúsculas, a justificativa, poderíamos recuar o texto ligeiramente usando itálico ou minúsculas ou diferentes estilos de texto. Poderíamos ter uma textura sobre o texto se fosse um texto de cabeçalho especificamente. Veja se há mais alguma coisa que eu não pensei que você possa pensar literalmente nos céus, nos limites, mas esses são os que parecemos usar principalmente em sistemas tipográficos. 4. Escala de tipos: Uma vez que tenhamos todas as dimensões para o nosso corpo de texto, podemos descobrir o tamanho textos do título e dos textos da legenda, etc. Ao chegar a uma escala de tipo, queremos o título, um, textos de cabeçalho, o que era do mesmo tamanho. Você quer que todas as nossas legendas sejam do mesmo tamanho. Mas também queremos que eles sintam fazem parte da mesma composição, se você quiser, como o corpo do texto, queremos que eles se encaixem em uma escala. Agora, às vezes, as pessoas podem realmente usar uma das escalas musicais porque sabemos que elas naturalmente se sentem certas para nós. Eu costumo usar a proporção áurea ou a sequência de Fibonacci principalmente porque uso essa proporção em outro lugar do meu design. E, possivelmente, dá algum tipo de campo uniforme a tudo usando a mesma proporção para a escala de tipos. Não tenho 100% de certeza. Eu defini a altura do meu corpo do texto como 16 pixels de referência de altura. E você pode ver que é decidido que, se você estiver usando a escala de terços principais e seu corpo de texto tiver 16 pixels de referência, os textos de cabeçalho devem ser 48,83. Pixels de referência. Como pixels de referência não são exatamente a mesma coisa que os pixels. Você pode ter um ponto ou uma fração de um pixel. Então, é perfeitamente bom para você usar algo assim. E esses números serão um pouco diferentes. Você terá que usar um pouco seu olho e ver como ele funciona com outras partes do seu design e se encaixa no ritmo vertical do seu design, todo esse tipo de coisa. Mas eu acho que este é um bom lugar de partida para encontrar o que poderia ser um bom tamanho de título para esse corpo de texto. Agora, como acabei de dizer, costumo usar a proporção áurea. E a outra vantagem disso é que esta calculadora, G R T calculator .com, acho um pouco melhor de qualquer maneira. Agora eu coloquei no EB Garamond, que é um Google Fonts, uma versão gratuita do Garamond disponível no Google Fonts. E podemos ver que, na verdade, a proporção do EB Garamond é um pouco maior que o Garamond. A versão do Google tem uma altura x ligeiramente maior do que o tipo normal Garamond padrão. E se eu dividir sete pixels de referência por zero, 0,4, Sete pixels de referência foram aproximadamente nove minutos de arco. Vou obter 17.517.5 é um bom tamanho de fonte para tornar Garamond, para torná-lo mais legível para a maioria das pessoas, defini a largura do conteúdo para 700 pixels de referência por enquanto. E você pode realmente ver se você olha aqui para baixo, a escala, sugeriu a escala de proporção áurea. Na verdade, ele arredondou meus 17,5 pixels de referência. Não gosta de frações de um pixel neste aplicativo, mas você pode ver que ele me deu os tamanhos de fonte para as diferentes alturas, bem como a altura da linha. Agora, se eu alterar a largura do conteúdo aqui, você pode ver que ele realmente atualiza a altura da linha como falamos anteriormente. Se tivermos textos mais longos, queremos uma altura de linha ligeiramente maior também. O que eu gosto nessa calculadora é, na verdade, se eu descer, posso ver alguns exemplos de todos os diferentes tamanhos de texto e como nossa lista pode parecer e todo esse tipo de coisa usando isso tipo de letra com essa escala de tipo. Se eu mudar isso para Verdana porque já falamos sobre Dinah um pouco. Agora sabemos que para Diana pode ser um pouco menor que Garamond. Vou definir isso como 12.5, que é a melhor altura de leitura para Verdana acordo com nossos cálculos anteriores. E você verá que, na verdade, a altura da linha que é dada, é um pouco maior e, na verdade , dá uma altura de linha um pouco maior, mesmo que a façamos do mesmo tamanho Garamond porque é calculou que ele tem uma altura x ligeiramente maior e, portanto, precisa de um pouco mais de espaço ao redor. Esta calculadora pode ser um bom lugar para obter alguns números básicos antes de começarmos a tentar descobrir nossa escala de tipos. Nunca queremos apenas pegar esses números e colocá-los em nosso design e esperamos que ele fique bom. Vamos ter que ajustá-los um pouco porque tudo isso se baseia praticamente em alguns números básicos em torno desses tipos de letra. Podemos ver muito mais com nossos olhos do que essas calculadoras podem ver com esses números. Nós só queremos levar esses números lá fora e possivelmente usá-los como ponto de partida antes de ajustar aparência dessas escalas de tipo. Uma vez que soubermos qual é a fonte do nosso corpo, podemos usar isso para sabermos qual é o tamanho do nosso texto corporal, e então sabemos qual altura de linha nossos textos corporais terão. E podemos usar isso para identificar duas coisas. Qual é a grade de linha de base que vamos usar para todo o aplicativo. E qual é a escala de tipos? Quão grandes serão nossos títulos e subtítulos? 5. Crie escala de tipo: No último vídeo, aprendemos a usar uma calculadora de escala de tipo on-line para obter algumas alturas básicas para nossos títulos de um a seis e nosso texto de parágrafo, e também ter uma ideia sobre o altura inicial da linha. Agora, o que eu fiz aqui na minha tela no momento é que coloquei algum texto na Figma. E se você usar um software de design diferente, isso é absolutamente bom. Só vou demonstrar na Figma porque é isso que eu uso. E eu tenho seis textos para diferentes tamanhos de cabeçalho e um para o tamanho do parágrafo. Agora, eu fiz duas coisas para cada uma delas. Depois de decidir o tamanho do texto, também decidi uma altura da linha. Você pode ver se eu amplio, tenho uma grade vertical de quatro pixels ativada. Você pode ver que a altura da linha se encaixa perfeitamente nessa grade de quatro pixels porque eu tenho uma altura de linha de 64. Mas também escondi uma caixa cinza, que é o que seria a margem. Agora, se você não estiver familiarizado com o modelo de caixa CSS, você teria sua altura de linha e seu preenchimento, etc, dentro da caixa, que estaria dentro dessa área, então você teria algumas margens fora da caixa. Agora eu não vou entrar muito nos detalhes do que é o modelo de caixa CSS. Mas tudo o que você precisa saber agora é que essa área cinza é o espaço adicional que vamos adicionar ao redor do cabeçalho. E isso também precisa estar em vermelho. Portanto, a altura de toda a área para as etiquetas de cabeçalho é de 132, que também se encaixa muito bem em nossa grade de quatro pixels. Agora, o que eu fiz foi que eu fui na caixa NAT escondida para que você não possa realmente vê-lo. Mas você pode ver que cada título não tem espaço entre eles. E isso porque, para cada um dos títulos, adicionei essas caixas de margem para que possamos ver como elas se encaixariam. Isso porque, para cada um desses títulos, adicionei essa caixa de margem cinza e a escondi. Podemos alinhá-los facilmente e ver como eles se encaixariam com suas margens. Agora, o que eu fiz foi e fiz isso para todos esses seis elementos de cabeçalho. E uma vez para o parágrafo, o parágrafo, como você pode ver, tem apenas uma margem de quatro pixels na parte superior e inferior. Talvez esteja tudo bem. Talvez não seja. Vamos descobrir agora. E agora eu os criei como componentes Figma, mas se você estiver usando softwares de designs diferentes, sinta-se à vontade para fazê-lo como quiser. O que posso fazer agora é ter uma página de exemplo e arrastar meu componente de cabeçalho para fora, encaixá-lo nas minhas grades, arrastar um parágrafo para fora e alinhá-lo para que arrastar um parágrafo para fora e alinhá-lo possamos ver que eles tocam cada outro. Se eu diminuir o zoom, eu deveria ser capaz de começar a uma ideia de que eles parecem bem, se eu tiver um cabeçalho número um e, em seguida, alguns textos de parágrafo, isso está tudo bem? Agora, o que eu quero fazer nesta página é ter certeza de que experimentei todas as combinações para que vejamos como elas se parecem agora, em vez de tentar criar toda a nossa aplicação e depois perceba que algo não funciona. Talvez eu tenha uma direção para a rubrica três. E quando eu tiver o título três seguido de caminho para? Agora, eu já estou começando a pensar que talvez o espaço no topo do título três, a margem não seja suficientemente alta e a margem na parte inferior talvez seja um pouco pequena demais. Então o que posso fazer é voltar aqui e no meu componente, posso mover a margem. E então ele vai atualizar tudo isso e eu posso redefinir minha página. Agora acho que provavelmente ainda precisa de um pouco de ajustes, mas uma vez que eu tenha uma aparência razoavelmente boa, quero experimentar isso com alguns textos melhores do que apenas cabeçalho um, cabeçalho dois, na primeira oportunidade possível quando estamos criando um sistema de design ou uma escala de tipografia, queremos colocar conteúdo real lá, porque queremos ver como ele se parece com o real conteúdo que pode realmente se encaixar no design. Cabeçalho. Um deles é um cabeçalho muito curto. Provavelmente nunca teremos isso. Agora vou aparecer no site da BBC News e pegar algum texto. Então agora eu tenho um novo texto no cabeçalho um, e podemos realmente ter uma ideia muito melhor de como a altura da linha está funcionando porque ela está indo para uma segunda linha e podemos ver como o margem em torno dele funcionando. Agora, idealmente, queremos atualizar nossos textos de título dois e nosso título três também. Então, podemos começar a ver como isso se parece com texto real nele. Agora imediatamente, vou dizer que talvez este cabeçalho esteja um pouco longe demais deste texto aqui embaixo. Então, talvez reduzimos a margem entre o título um e os textos do parágrafo em quatro pixels. E em algum momento, talvez quereremos dizer, bem, você sabe o que, não há realmente definição suficiente entre. O cabeçalho três e o cabeçalho do texto. Acho que preciso tornar o título três textos um pouco maior ou o texto completo do cabeçalho um pouco menor. Bem, podemos fazer isso em nosso componente e ver como ele se parece em toda a nossa página de amostra. E não importa se não se encaixa nessa calculadora de escala de tipo com a qual começamos originalmente porque nosso olho é muito mais importante do que a matemática se ficar bem na página e pudermos veja facilmente a hierarquia visual e a diferença entre os títulos. Isso é o que é importante. Então, usamos essa escala do último vídeo como ponto de partida, mas vamos ajustá-la agora e encontrar algo que funcione melhor para nós e para esse tipo de letra. Quando você está fazendo esse exercício, quando você está fazendo isso com sua escala de tipo, uma coisa muito importante a lembrar sempre é que há uma grade de quatro pixels que eu criei. E você pode escolher uma grade de seis pixels ou escolher uma grade de 3,5 pixels. Estou usando quatro pixels ou estou usando um número completo de pixels porque é mais rápido configurar a grade na Figma, vou usar a grade vertical de pixel de referência A6. E lembre-se se, em algum momento, parece melhor se algo não estiver encaixando nessa grade, então não o encaixe na grade. Usamos a grade vertical como diretriz é ajudá-la a parecer mais agradável sem muito esforço assim que achamos que é melhor ignorar a grade ou quebrar a grade, então devemos absolutamente fazer que quando estou ajustando bem. Se eu decidir que esse título três deve ter margem de três pixels na parte superior em vez de uma margem de pixel completa, então é absolutamente isso que devemos fazer. A grade vertical, o ritmo vertical da página está tudo lá para nos ajudar. Não está lá para ditar completamente como trabalhamos. Então pegue um dos tipos de letra com os quais você está trabalhando e abra qualquer software de design que você usa. Comece com uma dessas calculadoras de Escala de Tipo. Se você achar um ponto de partida útil e criar seus textos de cabeçalho de um a seis e seus textos de parágrafo como uma caixa invisível em torno dele, que será usada como uma margem e, em seguida, experimente-os ordens diferentes. Como parece se você tem um cabeçalho três com um cabeçalho para baixo e depois cinco parágrafos de texto. Como vai parecer? Parece muito condensado? Parece muito espalhado? É óbvio que o cabeçalho se relaciona com o texto abaixo dele não está acima dele. Possivelmente algo em que este título três está falhando agora e possivelmente precisa uma margem um pouco maior no topo. E, em seguida, uma técnica que é frequentemente usada por designers de tipos é apertar os olhos ligeiramente ou salvá-lo e colocá-lo no Photoshop ou algo assim para que você possa usar um desfoque. Agora, quando colocamos o borrão nos textos corporais, queríamos ter uma boa cor cinza claro consistente que ela não pareça muito pesada para nós. Mas outro bom ponto é ajudar nossa hierarquia. Idealmente, queremos que a densidade ou a escuridão do cabeçalho principal pareçam muito mais escuras do que o texto do parágrafo. Se você apertar os olhos, você terá uma consistência ligeiramente diferente para o texto do cabeçalho e os textos de parágrafo que devem pelo menos dizer que há diferenciação suficiente. Lembre-se, as pessoas não estão se concentrando em toda a página de cada vez. Eles só estão se concentrando onde o centro morto absoluto de seus olhos está olhando para aquele momento, é chamado de fóvea. Tudo o resto na página parece desfocado para eles e eles precisam ser capazes de identificar onde os títulos estão imediatamente. Se a página estiver desfocada ou se forem consistências diferentes no cinza para os diferentes cabeçalhos. Eu quero que você vá em frente e escolha um tipo de letra aleatório ou um com o qual você tem trabalhado e tente criar essa escala de tipo muito simples. Coloque algum texto real lá e experimente o máximo de layouts possível com o título para o cabeçalho três, cabeçalho quatro para garantir que ele fique bom. Agora, antes de começar a criar o resto do seu sistema de tipos, seu sistema de design e, em seguida, projetar o aplicativo. 6. Crie uma escala de tipo 2: Nos últimos vídeos, criamos uma escala tipográfica, que podemos começar a usar para nosso sistema de tipos e nosso sistema de design. Até agora, estabelecemos hierarquia visual usando apenas o tamanho da fonte. Agora na tela aqui, eu fui e fiz o mesmo exercício. Criei cabeçalhos de um a seis e algumas tags de parágrafo. Tentei criar uma hierarquia visual onde não altero o tamanho do tipo, alto. Eu fiz os textos de parágrafo meio grandes porque sei que estou usando isso por toda parte. Portanto, tem 18 pixels de referência de altura. Mas eu fiz o tamanho do tipo quatro, todos os textos 18 pixels de referência. E tentei criar uma hierarquia visual. Apenas algumas ideias de outras coisas que podemos fazer para criar algum tipo de hierarquia visual com nossos textos. O primeiro, provavelmente, o mais importante é quão grande é essa margem em torno do texto é o título um, não precisa necessariamente ser muito maior, mas se tiver um grande espaço em torno dele, ele instantaneamente parece mais importante e se encaixa mais alto em nossa hierarquia, geralmente em uma escala de tipos, em um sistema de tipos, título seis nem será maior que o texto do parágrafo. Há muitos sistemas de tipo que estamos a título seis é realmente menor do que o texto do parágrafo, mas talvez esteja em negrito estão em todas as maiúsculas, ou tenha algo sobre isso que o faça se destacar. Às vezes, isso pode ser que ele tenha mais espaço ao redor. Agora, acho que esse cabeçalho seis ainda parece um cabeçalho. Algumas outras coisas a considerar. Título um aqui, tenho um **** de muito rastreamento. Há muito espaçamento entre as letras. Enquanto no momento em que eu desci para a cabeceira seis, estou esmagando alface bem perto. Obviamente, há cor nos dois primeiros títulos e , em seguida, algum outro indicador visual nos próximos dois títulos e nos títulos finais que eu tenho itálico apenas para dar a eles algo que chama a atenção para eles e os faz parecer um pouco mais como um título. Eu usei os brancos um pouco. Este é muito pesado no topo, e quando chegamos ao fundo, é um texto bem fino. Poderíamos, potencialmente, recuar um. Isso pode ser recuado ligeiramente ou mesmo recuado negativamente. Então, ele entra na margem e isso vai instantaneamente fazer com ele se destaque e tornará o destino óbvio mais importante. E, na verdade, simplesmente não se encaixa na grade, seja vertical ou horizontal, vai dar importância. Portanto, é possível que possamos criar uma hierarquia visual para alguns textos simplesmente fazendo com que ela não funcione naquela grade vertical que criamos. Agora, eu quero que você vá com isso também. Veja se você pode encontrar duas maneiras diferentes identificar títulos para o que eu tentei, você nunca fará isso na vida real. Isso é puramente para prática, mas vamos ver se podemos criar uma hierarquia visual, uma escala de tipos sem tocar no tamanho da fonte. E então, assim como no último vídeo, vou criar uma nova visualização da área de trabalho. Vou ver como esses elementos se parecem se eu colocá-los um em cima do outro, como parece se eu tiver o título um e depois o texto do parágrafo? Como parece se eu tiver o cabeçalho dois, seguido do título três, seguido de mais texto de parágrafo. Agora, na verdade, não tentei isso. Tudo bem agora, mas posso ver imediatamente que isso está muito esmagado aqui. Eu gostaria de adicionar uma pequena margem no topo desse cabeçalho dois, por exemplo. E possivelmente que essa linha vermelha passando por todo o caminho pode ser um divisor um pouco demais para ter no meio de um artigo. Semelhante ao último vídeo. Em algum momento, vamos querer editar esse texto para ser algo um pouco mais realista. Basta ver se você pode criar uma escala de tipo, uma hierarquia visual que parece boa e funciona, mas sem ter que tocar no tamanho do texto porque há tantas outras coisas que podemos fazer. Não tenho certeza se consegui totalmente aqui ainda, mas tenho uma brincadeira com ele. Não vai ficar ótimo e não vai ser perfeito. Mas é um exercício muito bom fazer com que seu cérebro pense outras coisas além do tamanho do texto antes de seguirmos em frente e criar um sistema de tipos real. 7. Sistema de design: Uma grande diferença entre a topografia impressa e tipografia da web geralmente é com uma revista ou um livro. O tipo será escrito primeiro. O tipográfico receberá todos os artigos e todos os textos prontos para criar um sistema tipográfico. Enquanto muitas vezes com um aplicativo da web ou um site, os artigos e o conteúdo virão muito mais tarde. Quando estamos lidando com tipografia na web, precisamos de um sistema muito mais sólido de como as legendas , como as citações, como todas essas coisas se parecem, porque não sabemos qual será o conteúdo. Não sabemos se o jornal é algum dia vai ter uma direção muito longa e outros dias terão uma muito curta. Precisamos de uma série de regras porque como designer ou mesmo desenvolvedor de front-end, não estaremos disponíveis quando cada artigo for publicado. Trabalhar em um sistema tipográfico sólido é uma parte muito importante do nosso sistema de design. E vou começar com um pouco de inspiração novamente, se você vier para projetar sistemas repo.com, você realmente vê links para centenas e centenas de sistemas de projetos diferentes. Adeus, às vezes grandes empresas, Uber, IBM está bem aqui. Muitos Audi, muitas grandes empresas estão publicando suas diretrizes de design que projetam sistemas para que todos possam vê-los. E podemos olhar para alguns deles para obter alguma inspiração para criar nosso próprio sistema de design. E uma grande parte disso é que eu tenho sistema tipográfico. Vou olhar para um agora porque é um dos, provavelmente um dos mais famosos. É o Google, design de material do google, sistema de design. E estou apenas olhando para a seção de tipografia agora. Agora, a principal coisa que eles têm é a escala de tipos. Já falamos sobre isso um pouco e vamos ajustá-lo nesta seção. Você verá que eles têm uma escala de todos os títulos e todo o corpo do texto e o texto inferior, e como todos eles vão ficar. Na verdade, temos uma pequena mesa prática aqui mostrando que existem dois tipos de corpo de texto. Este é um botão. O botão está em todas as maiúsculas. E isso nos diz não apenas o tipo de letra usar, onde, seja leve, regular ou médio. Ele nos diz o tamanho e os pixels de referência, se o botão ou o sobreposto estão em todas as maiúsculas. E, na verdade, nos diz o menor espaçamento também porque esses títulos são bem grandes, então vamos querer apertá-lo um pouco. Enquanto este texto de botão, embora os botões, temos imóveis limitados, é em todas as maiúsculas. O espaçamento entre letras ou o rastreamento aumentou um pouco lá. Podemos dar uma olhada nisso, nos dar uma ideia de como o Google está usando isso. Algumas coisas interessantes a serem observadas são antes de tudo, embora este gráfico tenha pixels de referência nele, eles sugerem usar unidades de RAM mais sobre isso mais tarde. Mas se descermos um pouco, eles têm algumas coisas sobre como aplicar a escala de tipos. Estas são regras escritas no sistema de design para que, quando as pessoas o usam, elas possam ver Exatamente algumas idéias de como usá-lo. Agora, uma coisa que eu acho que é bastante interessante com design do material do Google é quando eles substituem o tipo de letra do cabeçalho. Você deve ter notado que eles usaram Roboto para cabeçalhos e corpo de texto. Mas eles sugerem que, ao substituir o tipo de letra do cabeçalho use exatamente os mesmos requisitos, exatamente o mesmo tamanho de tipo. E eu assumiria o mesmo rastreamento, altura da linha e tudo mais. Então, apesar do fato de que neste projeto eles têm um tipo de letra muito, muito pesado. E este, eles têm isso para um script leve com uma altura x muito alta. Eles estão sugerindo usar exatamente o mesmo tamanho de tipo que você usaria com o Roboto. Agora, no entanto, se eu rolar para baixo um pouco mais, isso sugere que, para coisas como as legendas, está dando um pequeno aviso dizendo, você não quer usar um para expressar um tipo de letra para as legendas. Eles fazem. Tente restringir as regras quando você chegar ao corpo e ao texto de título menor. Mas, no geral, este é um lugar muito bom para se inspirar em como um sistema de tipos vai olhar agora nos próximos vídeos, certamente até o final desta seção, teremos um sistema de tipo muito sólido para nossas próprias aplicações em que estamos trabalhando. Uma maneira pela qual a tipografia da web difere massivamente topografia impressa é muitas vezes com a tipografia da web, precisamos elaborar o sistema de tipos muito antes que muito do conteúdo seja escrito. Um sistema de tipo web precisa ter muito mais regras antes de completarmos nossos próprios sistemas de tipo, vale a pena inspirar um pouco de inspiração ao dar uma olhada em como o Google sistema de tipo funciona, ou Uber ou qualquer outra empresa bastante grande que você acredita ter um design muito bom. 8. Figma: Neste vídeo e nos próximos dois vídeos, mostrarei como usar alguns dos recursos avançados de tipo aberto para diferentes partes de software. Este vídeo, vou falar sobre Figma. Se você não usar o Figma , pule para o do Adobe XD ou no Sketch para ver como habilitar esses recursos nesses aplicativos. Agora, na Figma, escrevi uma linha de textos que diz Figma, e está escrita em Roboto. Roboto tem alguns recursos de tipo aberto que podemos ativar. Se eu clicar nesses três pontos aqui embaixo. Na verdade, Figma é absolutamente o mais fácil de trabalhar com essas coisas porque quando clico nesses três pontos, ele vem com este menu muito longo com todas as coisas que estão disponíveis para esse tipo de letra. Só, para um exemplo rápido, posso ligar as ligaduras. E o que isso vai fazer se você olhar o F e o I de Figma, para o F e o I de Figma, vai apenas conectá-los muito bem lá. Então, embora estejamos usando um tipo de letra bastante padrão, Roboto, um tipo de letra bastante usado. Podemos mudar essa foto de façanha e isso vai dar um pouco mais de caráter, o que é muito bom para nós. E depois há outra chamada ligaduras raras. Vai dar uma olhada no porquê mudar para eles mais tarde e todos os recursos disponíveis para diferentes tipos de letra. Mas só para você saber, se você é um usuário da Figma, é assim que você acessa os recursos de tipo aberto de um tipo de letra. Se algum dos recursos estiver acinzentado como os mostrados na parte inferior da tela agora. Isso significa que o tipo de letra específico, o texto específico selecionado atualmente, não tem uma opção para esse recurso de tipo aberto. Agora, se você não sabe o que tipo aberto significa, não se preocupe, vamos falar sobre isso ao longo desta seção. 9. Esboço: Agora, se você é um usuário de esboço, em algum momento vamos querer ativar os recursos de tipo aberto para alguns textos no esboço. Acabei de escrever o esboço 50 aqui porque essa é a versão do sketch que estou usando. Eu não pago pelo esboço há um tempo. Então você pode ver as coisas um pouco diferente se você tiver uma nova versão do sketch, eu escrevi este texto na exibição da Playfair. Agora, se eu selecionar isso, posso chegar a Exibir fontes. E isso vai me mostrar todas as fontes diferentes disponíveis para mim agora. E se eu clicar na engrenagem na parte superior e selecionar tipografia. Esses são todos os recursos de tipo aberto disponíveis para exibição da Playfair no momento. Se eu apenas mover isso para cá, agora se eu apenas selecionar esse texto, talvez eu queira mudar esses números para textos minúsculos porque ele está em linha. Também o texto minúsculo é chamado de figuras de estilo antigo. Falaremos sobre isso mais tarde. Mas se eu selecionar isso, você verá que ele transforma esses números em minúsculas. Agora, se você ver diferentes recursos de tipografia aqui para os que eu tenho atualmente. Isso provavelmente porque você selecionou um tipo de letra diferente. Se eu, por exemplo, selecionar Roboto, e você verá que tenho opções diferentes disponíveis. Agora, se você não entende que números de estilo antigo ainda são , tudo bem. Vamos ter um vídeo sobre isso em breve. Mas agora você sabe como acessar todos os recursos de tipo aberto no Sketch. Então é simplesmente visualizar, mostrar fontes e clicar na engrenagem na parte superior aqui e clicar em Topografia. E isso vai trazer essa janela para cima. 10. Outro software: Passei algum tempo tentando descobrir como ativar recursos de tipo aberto no Adobe XD ou no InVision Studio. E com toda a honestidade, se você quiser fazer isso, talvez seja necessário escrever algum código que possa ficar incrivelmente complicado. Minha opinião pessoal é que, se você não estiver usando o Sketch ou o Figma para fazer designs de UI, agora pode ser um bom momento para aprender a usar Figma. Porque para ser perfeitamente honesto, adobe XD e o InVision Studio nunca atualizaram totalmente seu sonho de ser um concorrente totalmente esboço. E acho que a falta de suporte para recursos de tipo aberto é apenas uma das muitas razões pelas quais esses softwares talvez não possam ser usados para design de interface do usuário ainda. Claro, isso pode não ser possível dependendo de onde você trabalha, mas mesmo se você for forçado a usar um desses softwares para trabalhar, talvez aprenda um pouco sobre Figma ou se você escolhe esboçar apenas para que você possa brincar com os recursos de tipo aberto sobre os quais vamos falar ao longo deste módulo. 11. Produção: Para o resto desta seção, teremos alguns vídeos rápidos sobre como adicionar estilo e interesse visual para ajudar sua hierarquia visual a converter sua escala tipográfica em um sistema de tipo completo pronto para ser usado em um aplicativo ou em um site. Neste primeiro vídeo, quero falar sobre o que comumente chamamos de estilo de tipo, que é negrito e itálico. Há algumas regras rápidas que eu quero definir em uma dessas é que se você tiver um texto de cabeçalho muito pesado, você não quer torná-lo ousado . Se eu mudar o título para Montserrat, Montserrat tem um preto extra ousado mesmo que eles chamam de opção Black. Agora, tornar seu título número um tão grosso é bastante intenso. Está exigindo um pouco de atenção demais. E, para ser honesto, esse tipo de letra, Montserrat não tem o tipo de detalhe para trabalhar nessa escala e que espera, ele não se adapta bem a esse tamanho, mas também é incrivelmente denso e incrivelmente punchy. Uma coisa que você poderia fazer se tivesse que fazer isso é que você poderia realmente baixar a cor tão ligeiramente. Se eu fizer isso um preto um pouco mais claro, realisticamente, ele vai parecer da mesma cor que o resto do texto porque é muito mais denso, ficará mais preto de qualquer maneira. Às vezes, se as pessoas tiverem uma área muito densa de textos, elas podem reduzir um pouco essa cor para ajudar a contrariá-la. Mas realmente você não deveria estar fazendo isso. Claro, poderíamos ter nosso título principal para estar em um Montserrat preto, mas não tão grande quanto introduzimos novos estilos para nos ajudar com nossa hierarquia visual, não precisamos confiar no tamanho muito mais. Por razões semelhantes, se eu tiver esse título seis ou mesmo algum dos meus textos menores. E eu fiz esse monstera também. E estou escolhendo Montserrat porque sei que tem muitos brancos. Se eu fizesse o Montserrat mais leve, ele simplesmente não funcionará neste título seis, dependendo de quão boa qualidade os monitores de alguém, eles podem nem ser capazes de ver isso corretamente. Ele pode não ser renderizado corretamente na tela. As linhas são muito finas. É claro que, quando nos certificamos de que não estamos colocando nosso maior título e os textos mais ousados e nosso menor título no texto mais leve, isso não vai funcionar. Você deve estar ciente enquanto ainda estiver no estágio de design, se você tiver um tipo de letra que não tenha um arquivo de fonte em negrito ou não tenha um arquivo de fonte itálico. Alguns navegadores corrigirão isso para você. Não lhe dirá que você não tem um arquivo de fonte itálico. Na verdade, inclinará as letras, itálico não são versões inclinadas das mesmas letras. Eles são um penhasco original totalmente novo para ter o estilo de um itálico. Não é apenas inclinar a letra, mas o navegador fará isso por você em algum recurso horrível que alguns navegadores têm, onde eles simplesmente inclinarão o texto para você. E, ocasionalmente, alguns navegadores são conhecidos por Bolden o texto para você sem realmente ter o tipo de letra em negrito disponível. Queremos ter cuidado se tivermos pesos bastante pesados de texto em um tamanho bastante grande que também não o tornamos bastante ousado, será um pouco demais. E da mesma forma, se tivermos um texto bem pequeno, não queremos torná-lo muito fino. Se alguma vez fizermos alguns textos um pouco densos demais na página, podemos ajustar a escuridão ou leveza da cor tão ligeiramente. E quase será perceptível por nossos usuários porque o texto mais denso parecerá mais escuro de qualquer maneira. Então, estamos apenas corrigindo para isso. E se estamos usando texto em itálico ou uma ponderação específica de texto em negrito, queremos ter certeza de que temos o arquivo de fonte correto porque às vezes ele pode passar despercebido se o navegador corrigir para o fato de não termos. 12. Ligaduras: Vamos dar uma olhada em alguns desses recursos que acabamos ver como habilitar na Figma e no esboço. Vou selecionar esse cabeçalho Tipo II. Eu mudei para areias mais justas. Estou usando o medo uma sensação pelo motivo de que existem muitas alternativas aos estilos de tipo aqui. Se eu apenas escrever FF, FF II até você verá como o F meio que entra em conflito com os pontos do olho. Agora, você pode potencialmente querer estilizar isso que f não trave no ponto do I. Ou você pode querer que ele apareça assim. É aí que as ligaduras são úteis. Acabei de selecionar FI e, no painel Detalhes do tipo, vou ligar as ligaduras. E você verá que o I e o F Now se combinam em uma única letra. E, na verdade, esse tipo de letra também tem algo chamado ligaduras raras, onde se eu quiser que o FF seja combinado, posso ligar isso também. E isso agora se juntou a um único glifo de três caracteres. Agora vale a pena olhar um pouco quando você estiver selecionando seu tipo de letra. Porque às vezes essas mudanças sutis podem realmente fazer com que um tipo de letra pareça bem diferente. E então ele lhe dá algumas opções potencialmente mais interessantes. Você pode querer que as ligaduras apareçam apenas para partes dos textos, mas não para outra. Ou talvez você não queira usá-los, mas vale a pena dar uma olhada. Agora, os sons de Farah realmente tem algumas outras coisas. Por exemplo, esses símbolos interessantes aqui que podem ser ligados e desligados. Sinceramente, não sei o que isso acontece. Ou talvez, por exemplo, eu precise usar a abreviação para o número como não. Se eu ligar isso, posso escrever N O ponto e ele irá convertê-lo automaticamente neste símbolo aqui. Se estivéssemos criando um aplicativo ou um site que tenha muitas coisas matemáticas acontecendo provavelmente queremos tomar notas de que existem certos símbolos matemáticos que algumas fontes vão permitir nós para ligar ou desligar. Também temos variações estilísticas aqui também, onde quer que seja uma forma muito tradicional aqui. Mas se quisermos, podemos tornar isso mais simples como este semelhante com o G. Você pode ver como há uma Você pode ver como há pequena modificação é que você pode fazer em um tipo de letra para criar mais interesse, para potencialmente crie alguma variação. Mas certamente isso, alguns desses serão símbolos matemáticos que você pode realmente precisar para o aplicativo que você está criando. Agora, se você estiver usando algum software e estiver usando um tipo de letra e tiver certeza que ele deve ter essas opções, mas você não as está vendo. Vale a pena notar que depende do tipo de arquivo de fonte que você tem. E falaremos um pouco mais na fase de implementação. Mas, às vezes, eles são chamados recursos de tipo aberto. O tipo de arquivo de tipo aberto permite que você os tenha, assim como o tipo de arquivo W OFF. Se você estiver usando um arquivo de fonte de estilo antigo, talvez não tenha necessariamente as ligaduras disponíveis para esse tipo de letra. E, claro, isso significa que queremos ter certeza de que estamos carregando o arquivo de fonte correto em nossos sites também. Isso é ligaduras e alternativas estilísticas onde quer que você esteja lidando com y-naught, veja se existem alguns glifos adicionais para combinar algumas das letras ou alternativas para algumas das letras que podem funcionar melhor com os designs que você vai criar. Desde que estejamos usando uma fonte de tipo aberto e um arquivo OTF ou um arquivo de formato de fonte aberto na web e um W0 OFF, temos acesso aos recursos de tipo aberto como ligaduras e alternativas estilísticas. Vale a pena dar uma olhada no que está disponível lá, porque alguns deles ajudarão nosso tipo de letra a transmitir a mensagem que queremos transmitir. E às vezes haverá alguns tipos de símbolos que realmente precisamos usar para o nosso texto. 13. Pequenos Caps: Às vezes, você vê isso em livros escritos e às vezes você pode ver em sites, mas iniciar um parágrafo ou uma seção de texto com algumas palavras de small caps pode nos ajudar a nos levar dentro e meio, um pouco de interesse visual no início do texto. Então, na verdade, vou mudar esse tipo de letra. Atualmente é mais tarde, e eu vou mudá-lo para alegoria ou isso é porque você notará que o tipo de letra agora está completamente alterado. E vou apenas selecionar as três primeiras palavras. E isso vai voltar a funcionar, lembre-se que isso funcionará de forma diferente no esboço, mas vou clicar aqui em baixo. E eu vou vir aqui e há um estilo aqui para pequenos bonés. Agora o que temos é que temos esse pouco funky onde o parágrafo começa com três palavras em letras pequenas. Agora, há várias razões pelas quais podemos optar por ter pequenos acampamentos no início ou no meio, mesmo de uma frase, ou possivelmente para nossos títulos. Agora, se alguma vez quisermos usar dois tipos de letra no mesmo parágrafo e ter o outro tipo de letra de minúsculas em linha com as letras minúsculas desse outro tipo de letra. Vamos querer tentar alinhar as pequenas tampas com a altura x. Na verdade, parece que já estamos bem perto aqui. Podemos querer aumentar uma pequena quantidade de rastreamento para ajudar a diferenciar esses elementos. Só vou colocar dois espaços por enquanto. Só para garantir que estamos separando-os um pouco. Poderíamos usar small caps para um dos títulos ou algo assim, mas é mais comumente usado como um pequeno começo para um parágrafo de texto. Poderíamos potencialmente usar uma fonte diferente para as pequenas tampas se a que estamos usando não tiver pequenas tampas, por exemplo, quando queremos alinhar a altura x com a parte superior das pequenas tampas. E como estes são limites, podemos querer aumentar o rastreamento tão ligeiramente e possivelmente ter um pouco mais de espaço no final da seção de small caps. 14. Espaçamento entre letras: Vamos espaçar, espaçamento de caracteres e rastreamento são três nomes diferentes para essencialmente exatamente a mesma coisa. Se você verificar isso, a quantidade de espaço entre cada letra individual. Se eu tiver um grande cabeçalho na parte superior da página, esse é talvez o motivo mais usado para rastreamento. Se eu tiver um cabeçalho de grandes dimensões, um cabeçalho bastante grande, vou reduzir o rastreamento um pouco abaixo de 0. Então, vou tirar um pouco do excesso de espaço entre as letras. Os vários motivos pelos quais você pode fazer isso em um cabeçalho de grandes dimensões. Uma é que é maior, então há mais espaço disponível para esmagá-lo. Claro, você provavelmente tem uma quantidade limitada de espaço na tela, especificamente no celular. Portanto, pode haver vários motivos pelos quais você precisa reduzi-lo. Portanto, a tela inteira não é ocupada por um título. Mas também a maioria dos outros sites está removendo algum rastreamento dos grandes títulos de grandes dimensões. Então, pode parecer um pouco estranho agora, quando as pessoas veem grandes títulos que não têm rastreamento reduzido. De um modo geral, para o nosso título principal, vamos reduzir um pouco o rastreamento. E então, para dois e três, potencialmente, você vai ter um pouco menos de rastreamento a cada vez. Quanto mais você descer, mais espaço você terá entre essas letras. Agora, se em algum momento você tiver um cabeçalho que esteja em todas as maiúsculas ou mesmo bastante ousado, muito pesado, então ele vai começar a parecer um pouco amarrado demais. Então você vai querer rastreamento adicional em torno dessas letras. Novamente, podemos fazer isso borrando a página ou apertando os olhos e vendo se ela tem uma cor cinza razoavelmente consistente sobre ela. Não queremos blocos grandes e densos de cor escura. E assim, o rastreamento pode nos ajudar a garantir que os removemos. Quando se trata de UI, botões de texto e menus e coisas assim, provavelmente há um motivo para às vezes expandir o rastreamento e, às vezes, reduzi-lo. Você pode ter ido para todas as maiúsculas no texto da interface do usuário. Poderia ser potencialmente pequeno ou bastante vidas, dependendo do que você buscou. Se for bem pequeno e estiver tudo em maiúsculas, você precisará espaçá-los um pouco. Você quer que seus elementos de interface do usuário se destaquem e sejam fáceis de identificar. Mas por outro lado disso pode ser por esses motivos, você fez o texto um pouco maior como eu. Talvez você faça tudo em letras maiúsculas e, em seguida, você só poderá encaixar tantos itens de menu na tela. Portanto, você pode querer reduzir um pouco o rastreamento e esmagar esses elementos da interface do usuário juntos. Portanto, o rastreamento é uma maneira muito boa de reduzir a densidade ao redor da página e também reduzir a quantidade de espaço que alguns bits de textos menos densos podem ocupar, mas também pode ser usado para a hierarquia visual. Por exemplo, tenho meu texto sobreposto aqui, que pode ser uma cor diferente acima de alguns textos. Veremos algumas das outras opções mais tarde. Mas talvez eu queira que esse texto se destaque e pareça bem diferente. Então talvez eu apenas coloque uma espécie de quantidade ridícula de rastreamento. E isso criará uma hierarquia mais visual porque instantaneamente parece bem diferente dos outros elementos. Além de precisar de rastreamento para controlar a densidade na página e nosso uso do espaço. Também pode nos ajudar a estabelecer uma hierarquia visual mais interessante. Podemos usar espaçamento entre letras, espaçamento de caracteres ou rastrear o que você quiser chamá-lo para aumentar ou reduzir a densidade de diferentes blocos de texto. Mas também podemos usá-lo para nos ajudar a estabelecer nossa hierarquia visual e criar elementos de textos com um pouco mais de interesse visual. 15. Kerning: Acabamos de olhar para o espaçamento entre letras ou rastrear quanto espaço existe entre cada letra. Mas kerning é qual é a diferença entre o espaço de certas letras. Por exemplo, não queremos que isso eu e este d sejam muito próximos porque são letras bem grandes, mas algo assim e isso pode ficar um pouco mais perto porque eles têm essa borda arredondada e há menos da densidade do personagem na borda do glifo por esses motivos, quando estamos descobrindo quanto espaço há entre cada letra. Não estamos preocupados com isso. Não estamos preocupados com a lacuna. Estamos preocupados com a área. Estamos preocupados com isso. Deixe-me deixar o texto branco para que você possa vê-lo mais fácil. Essas duas áreas amarelas têm aproximadamente a mesma área de superfície? A forma à esquerda parece um pouco maior, mas isso provavelmente é mais porque desenhei linhas retas na borda do E e do a. Podemos ver os espaços entre essas letras. A área entre eles é aproximadamente a mesma. Bem, se você tiver a sorte de trabalhar com um tipo de letra com alguns recursos de fonte abertos. Podemos voltar aqui e podemos ativar pares de kerning. Na verdade, já está ligado para isso. Mas se eu desligar, você pode ver que, na verdade, isso adiciona ainda mais espaço entre isso H e E. Certas letras são bastante difíceis para o software ou o navegador identificar o tamanho desse espaço ser. O que acontece é que quando as pessoas estão criando o tipo de letra, quando estão criando os arquivos de fonte, elas adicionam em uma tabela de kerning para que possam identificar quais as lacunas devem ser entre específico letras problemáticas quando elas andam juntas. Quando você pensa em todas as combinações de todas as letras diferentes e verifica se elas ficam bem. Isso pode ajudá-lo a entender por que os tipos de letra levam literalmente anos para serem criadas. Também possivelmente ajuda você a entender algumas das diferenças entre as realmente caras e as que as pessoas dão de graça. Problemas entre uma letra maiúscula e uma letra minúscula são sempre um problema. E assim o arquivo de fonte tem alguns dados de kerning lá para nos dizer que este E deve estar mais próximo do que este h. Agora, seu software ou seu navegador às vezes tenta descobrir isso sozinho. Faz alguns cálculos especiais para descobrir como isso deve ocorrer nas letras, quais devem estar cada vez mais distantes? Na verdade, o software que estou usando edição completa de vídeo agora faz isso. Então, se você olhar para as telas de título dessas palestras, você pode notar alguns kerning obscuro ocasionalmente. Muitos softwares não consideram isso muito importante, e muitos navegadores ainda não consideram isso. E, no entanto, é realmente muito importante quando você pensa em quanto do seu site é tributado e como você precisa que ele seja confortavelmente espaço, para ser fácil de ler, confortável de ler e não parece estranho para seus usuários. Kerning é uma parte incrivelmente importante do web design e, no entanto, você não pode fazê-lo corretamente. A maioria dos navegadores não vai corrigir isso, e a maioria dos tipos de letra também não vai fazer muito. Mas está melhorando. E veremos isso quando analisarmos a implementação. Mas existem algumas bibliotecas JavaScript que podemos usar, que realmente farão um pouco de kerning óptico para nós e descobrir alguns desses números. Se tivermos um tipo de letra que não tenha uma boa tabela de kerning. Este, estou usando uma fonte gratuita do Google chamada Laura. Eu diria que parece muito bom. E você vai precisar treinar seu olho nisso. Novamente, eu realmente encontrei um jogo muito legal chamado método de tipo, onde você tem que tentar e Kern as letras você mesmo, então ele lhe dá as letras na tela. Tenho que tentar descobrir se o espaço entre cada uma dessas letras é igual, não do ponto ao ponto, mas a área real entre elas. Então eu acho que há V precisa estar um pouco mais perto disso. Quando você está feliz com isso, você acerta em comparar. E você verá que eu realmente fiz muito, muito mal. Sou web designer durante a maior parte da minha carreira. E o kerning é algo que realmente não foi possível em sites ainda recentemente. Nunca fui bom em kerning. Mas siga o que eu digo, não o que faço e comparo e experimente porque isso é algo que agora é possível. Certos tipos de letra agora têm essas tabelas de kerning nos recursos de tipo aberto. Existem alguns recursos JavaScript para nos ajudar forma realista quando estamos pensando sobre isso em nossos designs. Tudo o que precisamos estar cientes é que há limitações massivas com os tipos de letra e os navegadores. E queremos ter certeza de que somos minimamente alguns dos problemas de kerning que podemos ver. Kerning é o espaço entre letras específicas. Então, ajustamos as letras que parecem mais próximas porque elas são mais densas em peso ou têm linhas retas próximas umas das outras. Um tipo de letra de boa qualidade terá uma tabela de kerning embutida para ajustar algumas das letras problemáticas. Desde que tenhamos um arquivo de fonte OTF ou W OFF, podemos ativar esses pares de kerning. Caso contrário, podemos querer treinar nossos olhos um pouco para detectar mais problemas de kerning, porque agora podemos usar JavaScript para corrigir alguns problemas de kerning. 16. Alinhamento de parágrafos: Nós simulamos uma pequena área do nosso texto aqui usando nosso sistema de design atual aqui, eu simulei uma pequena seção de como nossos textos seriam com dois títulos e alguns parágrafos. Uma coisa com os parágrafos on-line que geralmente se mantiveram bastante curtos em comparação com dois parágrafos em um livro, as pessoas têm muito menos pacientes quando chegam ao computador. Os cérebros se adaptaram desde que começamos a usar computadores. E se virmos dois blocos maiores de texto que são muito assustadores, ficaremos assustados e paramos de lê-lo. Geralmente mantemos nossos parágrafos bem curtos, mas também com texto impresso, você normalmente tem um pequeno recuo no início do parágrafo como este. Há um pequeno indicador de que o parágrafo começa lá. Você nunca vê isso online. Não é assim que fazemos isso. O que tendemos a fazer é colocar um pouco de espaço em torno dos parágrafos. Já fizemos isso com nossa margem, mas vale a pena notar que isso tem mais a ver com a forma como lemos online. Geralmente, um parágrafo de texto em um aplicativo da web ou em um site é escrito de tal forma que possa ser lido fora de contexto porque as pessoas geralmente deslizam para baixo, talvez encontrem um título que parece Rafael como o que eles queriam reler e ocasionalmente pular um parágrafo. Normalmente, os parágrafos são escritos para serem um pouco mais autônomos do que fariam em um livro. Eles são menos propensos a seguir o que foi escrito antes, são mais propensos a ser um bloco de texto autônomo em si mesmos. Se você fosse escrever algum texto e quisesse que ele fosse lido em um estilo semelhante a um livro, pode ser um indicador visual bastante útil para metade dos recuos em vez das margens entre os parágrafos. Outra coisa que você raramente vê online são textos que justificam o corredor da esquerda para a direita, você sempre tem esse pano na extrema direita. Existem algumas regras CSS para fazer com que os textos se estendam por todo o caminho e apenas aumente o espaçamento para que todas as linhas de textos terminem no mesmo espaço. Infelizmente, essas regras CSS não são suportadas por quase nenhum navegador. E eu não tenho certeza por que você faria isso. De qualquer forma. Ele cria rios de espaço horríveis no meio de seus parágrafos. Parece feio e não tem uma vantagem muito grande. Outra coisa que você geralmente nunca veria na impressão é ter uma palavra órfã na parte inferior assim, normalmente empurraríamos algumas palavras intencionalmente para criar um pano mais agradável uma palavra órfã na parte inferior assim, normalmente empurraríamos algumas palavras intencionalmente para criar um pano mais agradável o lado direito aqui. E para garantir que temos pelo menos duas ou três palavras na nova linha. Novamente, essas coisas não são necessariamente tão possíveis online, então normalmente aceitamos que temos que lidar com isso. Há novamente algumas bibliotecas JavaScript por aí, ou podemos escrever algum JavaScript para cuidar das palavras órfãs e contabilizá-las. Mas é um trade-off muito ruim quando está diminuindo o seu site ou que tipo de coisa você tem para decidir o quão importante isso é para você. Algo que você raramente veria alguém fazer é alinhar centralmente ou justificar centralmente os textos como este. Para algumas linhas, tudo bem, mas lembre-se de como seu olho precisa aprender a saltar de volta ao início da próxima linha. E quando isso começa se moveu, fica mais difícil para blocos maiores de textos normalmente apenas justificariam centralmente o texto se for um pedaço de texto muito curto. Uma razão pela qual você pode essencialmente justificar o texto de tempos em tempos é que ele parece mais autorizado. É uma reminiscência de folhetos de estilo antigo e outras peças gráficas que têm texto alinhado centralmente normalmente seria algo bastante autoritário. Analisamos um site de notícias anteriormente e ele tinha um logotipo alinhado centralmente no meio. Isso faz com que o jornal pareça um pouco mais autoritário. Para nossos textos de parágrafo, quase nunca vamos justificá-lo centralmente. Quando estamos colocando parágrafos de textos, queremos estar cientes de que as pessoas não lêem online da mesma forma que lêem em um livro. Portanto, não temos as mesmas regras. Adicionamos margens entre parágrafos e não recuamos porque eles não seguem tanto um do outro. Se estivermos tentando fazer uma declaração e incentivar as pessoas a ler de forma linear. Podemos querer ser mais influenciados pelo design de impressão. Na maioria das vezes, não nos preocupamos com coisas como palavras órfãs no final de um parágrafo ou coisas como o pano do lado direito de um parágrafo é muito difícil para nós colocar regras em nosso sistema para garantir que isso não aconteça. E nós apenas justificamos centralmente um pedaço de texto se for muito curto, eu cito ou possivelmente o cabeçalho principal, pode parecer um pouco mais autoritário, parecer mais importante quando fazemos. E certamente faz com que ele se destaque. 17. Números e dados: Um ponto muito importante ao selecionar um tipo de letra e ao selecionar os estilos e como eles usam através nosso sistema tipográfico são números e dados. Porque há todos os tipos de coisas diferentes a serem consideradas com nossos números e nossos dados. Já falamos um pouco sobre como, na verdade, com seu tipo de letra, você quer ter certeza de que você tem acesso a todos os símbolos matemáticos que você gosta. Alguns tipos de letra têm glifos para frações ou para certos símbolos matemáticos que possivelmente outros não têm. Você não precisa lutar ou encontrar substitutos. Você precisa encontrar um tipo de letra que tenha todos os glifos que você precisa. Agora, uma coisa que eu toquei anteriormente também é que, se eu colocar alguns números no meio deste texto, esses são números maiúsculos. Estes provavelmente parecem bem no cabeçalho, mesmo que seja um cabeçalho minúsculo, mas no meio de um parágrafo isso é meio estranho ter esses grandes números grosseiros, é bastante distrativo mesmo, e parece um pouco estranho. O que queremos fazer aqui é para nossos parágrafos, queremos ativar o que às vezes é chamado de números de estilo antigo, mas você pode pensar em números minúsculos. Você pode pensar em maiúsculas como números de revestimento. Se eu mudar isso, agora você pode ver que os números no meio deste parágrafo em nossos números minúsculos, eles agora se sentam confortavelmente nessa linha de base. Eles têm que nos enviar da mesma forma que algumas das letras minúsculas fazem. Claro, se você estiver lidando com chinês, japonês, coreano, onde não há conceito de números minúsculos. Isso não é algo com o qual você vai precisar se preocupar. Depois vem a questão de quando os dados estão em uma tabela. Agora, isso é algo que ainda não analisamos uma ferramenta, mas, claro, às vezes seus dados estão em uma tabela. Agora, a regra mais comum que você provavelmente já ouviu é que, embora você tenha deixado alinhar todas as colunas de textos, você deve escrever uma linha. As colunas numéricas. Você normalmente teria algo assim. E parte do motivo é que é um pouco mais fácil ver o que é certo desse ponto decimal. Este número superior que eu dei aqui, 1,27 é um pouco mais fácil compará-lo com o número abaixo quando os pontos decimais estão alinhados. Mas à medida que esses números ficam maiores e você já pode ver algum tipo de diferenças ter um aqui em vez de um 0, esses pontos vão perder uma linha. Idealmente, o que você gostaria é poder alinhar o tipo de letra ao ponto decimal em vez de à esquerda ou à direita. Bem, isso seria muito difícil, mas temos um sistema para contornar isso. E é semelhante ao tipo de letra monoespaçado é, falamos sobre o tipo de letra monoespaçado é um pouco mais cedo. É quando cada caractere tem a mesma largura com números, normalmente não usamos a palavra monoespaço, normalmente usamos a palavra tabula. Mas se eu selecionar tudo isso, há outra opção para ter um monoespaço ou números Tabula que também são maiúsculas e forradas. Se eu clicar nisso, agora, muitos números eu chegue à esquerda aqui e quaisquer que sejam esses números, esses pontos decimais vão se alinhar realmente com esse tipo de letra mais tarde, não parecem fazer uma diferença muito grande. Nessa nota. Eu gostaria de salientar que mais tarde realmente tem algumas opções muito legais para os números e funciona muito bem em uma tabela. Portanto, esse é um tipo de letra muito bom para usar para dados de tabela. Então, na verdade, há três coisas para pensar com números e dados. E o primeiro é garantir que o tipo de letra que você está usando tenha todos os símbolos matemáticos que você pode precisar. Se você estiver usando muitas frações, certifique-se de que o tipo de letra tenha glifos para frações. Em seguida, se você souber que vai usar números muito no meio dos parágrafos. Verifique se há uma opção para números minúsculos ou antigos. E se você estiver usando muitos números em tabelas, certifique-se de que há uma versão monoespacial dos números, também chamada de versão tabular dos números. 18. Sistemas tipográficos: Nesta etapa, temos absolutamente muitas informações sobre como tomar uma boa decisão, escolher um tipo de letra em vez de outro para nossa marca e para o projeto que estamos criando com essa marca, aprendemos absolutamente sobre como obter os tamanhos e os comprimentos da linha, etc, corretos para uma boa legibilidade. Em seguida, analisamos como olhar para os vários tamanhos de cabeçalho diferentes e criamos uma boa hierarquia visual usando outras técnicas que não sejam apenas tamanho, a melhor maneira de trazer todos essas habilidades juntas é criar um sistema de design tipográfico que usaríamos ao longo de um aplicativo quando o criarmos. Agora, eu fui em frente e criei três desses como exemplo, e vou falar sobre eles. Agora. Em todos esses três exemplos, peguei uma página da Wikipédia não completamente aleatoriamente. Eu queria comprar alguns bem diferentes, mas quase completamente aleatoriamente. E eu tentei colocar para fora usando meu novo sistema tipográfico. Talvez não estejamos realmente em uma posição em que temos um layout para a página ou sabemos exatamente qual é o conteúdo. Mas quando começamos a tentar criar nosso sistema, queremos pensar sobre as possibilidades e queremos usar conteúdo do mundo real. Não queremos usar texto de espaço reservado. Vai parecer diferente e não vamos entender completamente como a coisa acabada funcionará. É claro que, à medida que realmente começamos a criar um aplicativo, à medida que começamos a projetar todas as várias páginas e elementos diferentes, vamos perceber que havia diferentes estilos tipográficos que precisamos mudar um pouco. Mas enquanto tivermos nosso sistema de design, temos uma única fonte de verdade que podemos compartilhar com todos os nossos autores, desenvolvedores e outros designers. O primeiro exemplo é que tomei este sobre engravidar um iate, e eu escolhi, você deve ter notado, eu também tomei algumas decisões iniciais sobre cores e coisas que não são necessariamente que estamos falando neste curso, mas vale a pena jogá-lo enquanto você tenta criar esse sistema de design, porque ele lhe dá uma ideia muito melhor sobre tamanhos e opções de letra. Se olharmos para o sistema, você verá que eu não parei com o nome do título um para o cabeçalho seis. Eu fui em frente e dei nomes a eles dependendo de como eles realmente seriam usados em todo o aplicativo. E não temos uma tela super grande no cabelo que possa aparecer na página inicial ou algo assim porque ela simplesmente não é usada na página. Em seguida, passei a criar para esse tipo de sistema. Se eu tivesse algum título de exibição, esse é o estilo com o qual fui, com as ligaduras e tudo mais. Mas eu não o usei no design, então acabei de retirá-lo do sistema tipográfico porque se não for usado, não quero isso no sistema. Tudo o que temos neste bloco à esquerda tem todos os tamanhos corretos com as alturas da linha, os comprimentos da linha e as margens ao redor deles. Como eu acho que eles vão funcionar bem em uma página. E então eu fui em frente e criei uma página. Na realidade, você criará vários diferentes e verá como isso pode funcionar em diferentes partes do seu aplicativo ou site para garantir que meu sistema tipográfico seja algo que eu sou feliz agora porque é uma espécie de coisa exótica e tradicional, fretando um iate. Tem um tipo de sensação muito, muito tradicional de classe alta. Eu fui para um tipo de letra estilo Baskerville, que como sabemos, é um serif tradicional. E acho que se encaixa muito bem com a forma como acredito que a marca seria de quatro páginas sobre fretar um iate. Se olharmos para o meu segundo exemplo, fui para o Blockchain. Eu peguei a página da Wikipédia para blockchain e procurei algo que parece um pouco mais técnico, um pouco mais técnico, é claro, cores um pouco mais técnicas. Este tipo de letra aqui é Mary Weather, e tem um Serif um pouco mais moderno. Algum contraste interessante na topografia e algumas formas bastante interessantes sem estar realmente lá fora e bizarras. Parece muito moderno, sem ser estilístico demais. Parece muito moderno. E acho que para algum tipo de tecnologia de ponta, essa é uma escolha particularmente boa. E você pode ver que adicionei algumas camadas na minha hierarquia tipográfica que vez, tente colocar em uma página, minha página inicial e ver o quão bem a altura da linha parece caindo. Possivelmente tem um visual um pouco mais oficial, o tipo de coisa que um diário pode parecer porque provavelmente é bastante informativo e falando sobre tecnologia de ponta e possivelmente tentando para convencer as pessoas sobre algumas novas evidências científicas sobre o quão bom blockchain é ou algo assim. Então eu coloquei um pouco mais como um diário, mas com algumas coisas que tornam um pouco diferente mostrar que é uma espécie de tecnologia de ponta. E, finalmente, procurei algo com um pouco de dados sobre ele. Eu fui para esta página sobre o PIB da Wikipédia. E para isso, eu centralmente alinhei aos títulos, como eu disse antes, isso sempre dá às coisas um tipo de sensação mais autoritária quando estamos falando de algo como dados do que talvez texto alinhado centralmente seja uma boa ideia. Os títulos e o corpo do texto estão todos em Roboto. Agora o roboto é uma boa escolha para este estilo de lista de páginas de todos, porque ele tem todos os números de estilo que precisamos para garantir que ele esteja corretamente alinhado possamos ler nosso números corretamente. Mas uma razão pela qual eu acho que Roboto é muito bom para esse estilo de página é que esta é uma página que será lida por pessoas que são analistas e gostam de estilos sem sentido. Sem realmente admitir isso no fundo, eles são tão influenciados pelo estilo visual quanto todos os outros. Eu acho que Roboto tem um tipo de estética sem sentido, embora ainda seja bastante amigável, tem bordas e coisas arredondadas bastante agradáveis. E então eu acredito que descreveria essas fontes não têm uma personalidade bem acolhedora, mas é sutil o suficiente que analistas de dados e pessoas que não acreditam que há emoções ou que isso os afeta. Outras pessoas que talvez deixem esse pequeno estilo deslizar. É claro que é bastante irônico sugerir que algumas pessoas seriam completamente lógicas. Apenas acredite que eles querem ler um artigo apenas para obter os dados quando você está falando sobre algo como comparar números do PIB em todos os países, o que é quase completamente ilógico porque o caminho nós medimos o PIB é ridículo agora. Mas algumas pessoas gostam de ver números e ter fé ilimitada nos números. E é meu entendimento que esse tipo de pessoa vai querer esse letra muito mais simples, sem sentido porque o roboto tem personagens bem espaçados com bons x- balcões de altura e grandes, como por exemplo, no sistema operacional e outras coisas, consegui torná-lo um pouco menor enquanto ainda era bastante legível. Se acabarmos de chegar ao lado aqui, você pode ver o sistema tipográfico por conta própria. Agora, quando você está usando, eu estou usando o cabelo Figma, como eu disse antes, estou usando Figma e quando você está visualizando-os na página, você quer lembrar que para definir a vista para um 100% quando você está decidir se você acha que é um bom tamanho e legível agora na minha tela. E pode ser diferente com o tamanho da tela e como as dimensões do vídeo são diferentes. Mas agora na minha tela, estou olhando para isso em 100%. Portanto, esse é o tamanho exato que ficaria na tela se criássemos esse design exatamente o mesmo. Mas isso vai mudar um pouco quando você quiser criar seu sistema tipográfico responsivo. Então, apenas para esse sistema, criei a versão móvel. Esta é uma página móvel da mesma página da versão móvel criada. E este é o sistema móvel. São todas as margens e tamanhos de tipos para dispositivos móveis. Agora, uma coisa que você notará é se você estiver procurando, se suas dimensões são parecidas com a minha tela, isso parece muito pequeno para ler. Mas isso é claro, porque você não segura seu celular tão longe do seu rosto. Quando estamos usando software de design e queremos realmente ter certeza de que entregamos nossos projetos aos nossos desenvolvedores ou compartilhá-los com o resto da nossa equipe nos tamanhos que realmente estarão no tela e as dimensões físicas reais. Então, é assim que gostaríamos de criar nosso sistema de tipos e nossos projetos. Mas quando o visualizamos em nosso monitor de desktop, se estivermos sentados em um laptop ou em um computador desktop, queremos ter certeza de que quando olhamos a versão móvel que estamos ampliando que insira 200 por cento para compensar o fato de que a tela está muito mais longe do nosso rosto do que normalmente seguraríamos nosso celular. Agora, como eu disse, estou usando Figma e vale a pena notar, se você também estiver usando Figma, que existe um aplicativo móvel chamado Figma mirror, onde uma vez que você fizer login, qualquer que seja, qualquer que seja a prancheta que você tenha selecionado no aplicativo para desktop será espelhado em seu celular. Você pode olhar confortavelmente para o seu telefone e ver exatamente como esse ver exatamente como esse design ficará em um telefone celular, que é uma maneira muito melhor de avaliar se achamos que os tamanhos do tipo são bons e, em seguida, apenas ampliando para 200%. Já vi outros designers antes fazerem coisas como simplesmente fazer a placa de arte para a visualização móvel duas vezes maior do tamanho na trabalho para que eles estejam vendo tudo o dobro do tamanho para obter uma ideia de como ele vai parecer em comparação. Acho que sempre queremos lidar com o tamanho físico real que tudo será quando lidamos com os arquivos de design, de modo que seja menos confuso quando o compartilhamos com o resto do nossa equipe. Apenas alguns ponteiros lá que, quando você está verificando a visualização móvel, você está jogando com seus tamanhos de tipo. Não se esqueça de ampliar ou apenas ver o design diretamente em um telefone porque ele não terá a mesma aparência que parece em uma visualização de desktop. O grande desafio, este é o grande e grande desafio de design é que eu quero que você crie um sistema de design. Agora, usando o aplicativo que você criará, seja um aplicativo da web ou seja um blog ou uma revista. E pense em todas as coisas que já aprendemos sobre como escolher o tipo de letra. Já tivemos uma chance nisso. Obtendo os tamanhos de tipo corretos, alturas de linha e todas essas coisas a ver com a legibilidade. E agora comece a pensar sobre a hierarquia visual e todas as coisas que podemos ajustar para obter uma boa hierarquia visual. Seja cor, seja em letras pequenas, seja usando vários tipos de letra, criando margens maiores em torno coisas para decidir o que cria uma boa hierarquia visual enquanto trabalha com o conteúdo que você tem e o branding que você tem. Novamente, quanto mais vezes você completar esse desafio, melhor. Então, por que não fazer o que fiz e apenas obter uma página da Wikipédia e ver se a página de fallback da Wikipédia, você pode encontrar tipos de letra que você sente que comunicam a mesma mensagem. Descubra como fazer com que esses tipos de letra sejam de bom tamanho legível e, em seguida, crie uma hierarquia visual apenas para aquela página da Wikipédia. Quanto mais vezes você fizer isso, melhor será a criação de sistemas tipográficos. 19. Resumo: Estilizar e formatar nosso texto tem várias vantagens. Podemos usar ligaduras, por exemplo, para criar combinações únicas em nossos textos que lhe dão mais personalidade. Mas também poderíamos usar algo como números minúsculos dentro um parágrafo e números de largura fixa dentro de uma tabela, onde isso será muito mais útil. Se escolhermos um tipo de letra gratuito, talvez nem sempre tenhamos essas opções. Isso pode ser um fator decisivo quando estamos escolhendo o melhor tipo de letra para o nosso projeto. Podemos usar estilos mais óbvios, como cor e texto em negrito, para ajudar a criar uma hierarquia visual em todo o nosso design, queremos que nossos usuários identifiquem instantaneamente onde eles deveriam olhar primeiro e tem muito poucos itens lutando por nossa atenção a qualquer momento. Poderíamos começar isso criando uma escala tipográfica usando a sequência de Fibonacci ou uma escala musical se quisermos garantir que tenhamos proporções consistentes em todo o nosso design, dependendo da natureza do aplicativo que estamos projetando, podemos querer que o tamanho do tipo aumente menos drasticamente para o texto maior. Portanto, não é tão grande. Não precisamos necessariamente de um outdoor em todas as páginas, mas sempre precisamos tomar as decisões finais sobre dimensionamento sem olhos. Existem diferentes ponderações ópticas e cores diferentes que podem fazer com o tamanho pareça um pouco diferente. Precisamos treinar nosso olho. Qualquer coisa que possamos usar para diferenciar um cabeçalho, posição de cor, cor de borda de cor de fundo, margens podem ser usadas para converter a escala de tipo simples no sofisticado sistema tipográfico Sway. Assim que tivermos o IVA, estamos prontos para finalmente escrever algum código.