Como selecionar o Typeface (Bootcamp, Semana 3) | Rob Sutcliffe | Skillshare

Velocidade de reprodução


1.0x


  • 0.5x
  • 0.75x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Como selecionar o Typeface (Bootcamp, Semana 3)

teacher avatar Rob Sutcliffe, UI Designer / Developer

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

    • 1.

      Apresentação

      0:46

    • 2.

      Inspiração

      7:01

    • 3.

      Como definir a marca

      4:48

    • 4.

      Lojas para fontes

      8:54

    • 5.

      Texto corporal

      5:58

    • 6.

      Rostos de tipo único

      3:32

    • 7.

      Texto de exibição

      3:59

    • 8.

      Informação de meta

      3:36

    • 9.

      Combinação de fontes

      10:15

    • 10.

      Prática de emparelhamento de fonte

      9:49

    • 11.

      Resumo

      1:50

  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

296

Estudantes

6

Projetos

Sobre este curso

O aspecto mais crucial para formar uma ótima experiência de usuário é ter uma interface de usuário lindamente trabalhada. Algumas pequenas alterações na sua estética podem ter um grande impacto ou experiência para seus usuários. Se
você estiver projetando em um aplicativo para web, você está tomando decisões sobre tipografia, cor e composição. Eles vão afetar a marca, estilo, usabilidade e experiência do usuário de seu aplicativo. Você já está tomando essas decisões, mas está ciente do impacto deles. O uso muito sutil da tipografia e cor pode ter personalidade suficiente para não precisarmos de qualquer outro visual. Podemos dar vida a um bloco de texto e pode tornar mais fácil ou mais difícil para nosso usuário ler. Como algumas opções simples podem fazer ou quebrar o aplicativo.

Semana 3: Como selecionar TypefacesTypography
é 95% do que vemos em um aplicativo na web, ele dita todas as outras decisões de design. ainda poucas pessoas realmente param de aprender como usar tipografia em sua vantagem.

Esta semana vamos aprender como escolher tipos para corpo e texto e como selecionar tipos complementares que funcionam bem juntos

Este curso é para me?Ideally
você já vai ter passado algum tempo projetando sites e/ou aplicativos. Cada aspecto do curso é criado com iniciantes em mente, mas você pode descobrir que você obtém mais o curso se já criou alguns projetos. Você também precisa saber como usar algum software de design. Eu recomendo Figma, mas Adobe XD, Invission Studio, Sketch ou algum software semelhante também vai ficar bem.

O curso é criado com designers em mente, mas também pode ser interesse para desenvolvedores front-end ou proprietários de produtos.

Conheça seu professor

Teacher Profile Image

Rob Sutcliffe

UI Designer / Developer

Professor
Level: Beginner

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui aulas curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Introdução: Esta semana vamos selecionar tipos de letra para um design de interface do usuário. Vamos começar falando sobre o que faz uma boa combinação de tipografia. O que faz um bom corpo de texto e o que faz um bom texto de exibição e tem que emparelhá-los. E então o projeto em que você trabalhará nesta semana será escolher um artista que você gosta. Pense sobre as características que o artista tem e, em seguida, encontre uma exibição e textos corporais que combinem com o estilo de arte, bem como combinam bem entre si. tipografia compõe quase tudo o que vemos na Internet e as habilidades que aprendemos esta semana nos ajudarão a escolher os melhores tipos de letra para nossos designs de interface do usuário. Vamos começar. 2. Inspiração: Agora, antes de podermos começar a selecionar qualquer tipo de letra, precisamos encher nosso cérebro com inspiração. Precisamos olhar para projetos de todos os setores diferentes e ter uma noção do que está por aí. Que tipos diferentes nos fazem sentir. Realmente, devemos gastar bastante tempo e provavelmente regularmente Olhando para outros trabalhos de tempo e provavelmente regularmente design e contemplando o que ele comunica, o que ele diz para nós e como nos sentimos sobre isso. Também nos dá ideias sobre como podemos usar o tipo de letra. Como disse Pablo Picasso, bons artistas copiam, grandes artistas roubam. Agora, não queremos necessariamente estar roubando diretamente o trabalho das pessoas, mas queremos nos inspirar por coisas boas que vimos lá fora na indústria do design. Agora eu sempre defendo olhar para tipos evitados de design, não web design, não design de aplicativos, mas olhando para o design como um todo para que tenhamos uma gama muito mais ampla de inspiração e possivelmente criamos algo um pouco mais único ou sabia que outros designers da indústria não são. Poderíamos chegar a um site como inspiração de design. Obviamente, há muitos sites de inspiração de design, mas poderíamos criar inspiração e procurar tipografia. E vamos ver muitas letras manuscritas, se eu for honesto ou bem descolado ilustrações usando letras. Mas todas essas cartas vão nos dar um sentimento. Eles vão nos dar uma sensação de que pertencem a alguma coisa. Esta carta aqui ou este número. Parece muito real, parece muito importante. Parece valioso. E parece um pouco delicado. E acho que é por causa da enorme quantidade de contrastes entre as grandes áreas grossas e as linhas muito finas. E possivelmente porque há apenas algumas áreas ligeiramente retas, parece e se estivéssemos procurando algo que comunicasse essas características, talvez estivéssemos trabalhando para uma marca ou marca de joias de alto valor , por exemplo, então podemos procurar um tipo de letra que tenha essas características, mas seja muito mais simples, mais claro e fácil de ler quando chegamos a escolher um tipo de letra. Agora você pode dizer, bem, isso está tudo bem e bom. Estou fazendo um aplicativo para um banco. Então, por que eu iria querer algo com esses tipos de características? Bem, na verdade, eu, o banco ainda terá muitas características muito específicas. E eu escolhi essas cartas aqui de uma partida de futebol pela aparência dela. Parece muito seguro, muito seguro, muito confiável e definitivamente funcionaria em um site bancário. E então minha pergunta é, por que isso? É porque são letras muito grossas ou é porque as letras não têm nenhum contraste? Tem a ver com o rastreamento desses um pouco de espaço entre cada letra. Tem mesmo a ver com o alinhamento, como isso é centralizado e o texto está alinhado centralmente. Há muitas decisões tipográficas que entraram neste pôster muito simples que o tornam meio plano confiável tipo de sentimento que funcionaria para um aplicativo bancário. Vamos tentar pensar sobre o que são agora para que, quando chegamos a escolher nossos tipos de letra, tenhamos algumas idéias do que estamos procurando. Agora, eu ainda poderia usar inspiração de design e próxima, e apenas procurar por tipografia na web. Então eu entendo coisas um pouco mais específicas e você começará a ver algumas ideias de aplicativos da Web reais começarem a aparecer. Mas talvez neste momento queremos mudar para uma galeria de inspiração diferente como esta, fontes em uso porque, à medida que nos tornarmos mais específicos, estaremos questionando quais são essas fontes? Posso acessá-los? Uma coisa que é muito boa com fontes e usos, vemos muitos designs diferentes, mas também descobrimos quais tipos de letra reais eles estão usando. Então, da mesma forma que acabamos de tentar nos inspirar em diferentes mídias. Poderíamos olhar aqui e a menos que vejamos muitas capas de álbuns e cartazes e todo tipo de coisas. Ou talvez neste momento queremos começar a filtrar com base em coisas que são bastante semelhantes a nós. Poderíamos olhar para sites, talvez pudéssemos olhar para a embalagem. Quero dizer, talvez haja alguma inspiração interessante que possamos obter da embalagem. À medida que pesquisamos aqui, podemos pegar quais são os tipos de letra. E às vezes esse tipo de letra pode não estar disponível para nós por vários motivos, mas saber o que vai nos ajudar a encontrar algo semelhante. Algumas outras galerias de inspiração úteis, temos lobo tipo. Agora, isso novamente tem alguns designs muito legais, mas também diz quais são os tipos de letra. Então isso é absolutamente brilhante e estes são um pouco mais simples e claros e um pouco mais parecidos com o que você realmente vai usar em seu site. Muito bom para alguma inspiração no estágio posterior. O que é muito bom com o site tipo lobo é como se eles estivessem escrevendo muitos posts também se você quiser realmente nerd out na tipografia, este é outro bom lugar para vir. E, por último, quero mostrar a exploração do tipo onde essas pequenas maquetes de ela poderia parecer em nosso site. Elementos de IU interativos em cabeçalhos e links. Assim, você pode ver exatamente como será se estivesse em um aplicativo da Web. Portanto, isso é muito mais útil depois de ter concluído sua inspiração e você realmente escolherá tipos de letra, especialmente porque novamente, ele está usando o Google Fonts. Então, se você está com orçamento limitado, maioria das coisas que eles zombaram aqui, nossos tipos de letra que são gratuitos para usar. Agora, semelhante a esta galeria de inspirações, há um aqui chamado par de fontes, onde você pode literalmente encontrar fontes do Google que combinam bem para poder filtrá-lo. Quero um san serif indo com um texto de corpo Serif. E isso lhe dará todas as diferentes fontes do Google que podem emparelhar muito bem. E você pode simplesmente olhar para baixo e ver qual deles tem esse tipo de sentimento que você queria ter como uma maneira muito rápida e fácil de escolher, mas também para que você possa se inspirar e ver como estes olham juntos. Por fim, eu só queria mostrar esse plugin do Chrome chamado type sample, que se você instalar no Chrome vai ajudá-lo a identificar que tipo foi usado em diferentes sites. Se você não é muito experiente em tecnologia, isso pode ser bastante útil. Há também um site chamado qual a fonte, onde você pode fazer upload de imagens e ele lhe dirá quais tipos de letra ele acha que está usando nelas. Apenas um takeaway deste vídeo realmente, que é garantir que você esteja enchendo seu cérebro com grande inspiração. Ao olhar através dessas galerias de inspiração, tente pensar sobre o que cada tipo de letra e a maneira como ele é usado está realmente se comunicando com você como isso faz você se sentir e qual é a mensagem que o tipo de letra tem. 3. Defina a marca: Antes de qualquer tipo de projeto de design visual, você trabalhará com seu cliente para estabelecer o que a marca significa, o que ela representa, o que ela deve comunicar. Diferentes agências de design usam técnicas muito diferentes são formas de falar sobre isso. Você pode ter se deparado com pesquisadores de mercado antes disso, como perguntas loucas como, que tipo de carro sua marca dirige? Eles estão tentando criar uma compreensão compartilhada do que é a personalidade da marca. Provavelmente, a técnica mais usada é tentar criar cinco adjetivos que explicam a marca. Como este curso não é sobre branding per se. Vamos usar essa técnica. Se você estiver trabalhando com uma equipe ou um cliente, você pode deixar algumas horas de lado e tentar isso. Basta reunir-se e brainstorm de todos os adjetivos que você sente, comunique a marca e colecione todos eles em um quadro branco ou em um grande pedaço de papel. Então, tenha uma discussão sobre quais palavras meio que significam a mesma coisa. Risque alguns, decida qual dessas palavras é a melhor. Então, a partir das palavras entre as quais você tem, você tem uma discussão para decidir qual dos cinco adjetivos que são únicos e melhor descrevem a personalidade da marca. Depois de ter esses conjuntos de cinco adjetivos, mude resumir o que é a marca. Isso ajuda com críticas de design mais tarde. Isso nos impede de ter uma conversa se gostamos da estética e, em vez disso, temos uma conversa sobre se o estilo estético comunica a personalidade da marca. Quando sua equipe se reúne para ver os designs, você pode lembrá-los dos cinco adjetivos que resumem a personalidade da marca e dizem: faz essa paleta de cores, essa tipografia, toda essa composição comunica a personalidade. E ninguém precisa dizer se eles gostam ou não. Fazer com que uma equipe de designers e o cliente gostem de um design é impossível. Conseguir que uma equipe de designers e o cliente concordem que um design comunica uma personalidade de marca é um pouco mais útil e possivelmente um pouco mais realista. Você pode, de tempos em tempos, ver as pessoas criarem cuecas de design com escalas deslizantes entre jovens e experientes, fortes e delicadas. Se você gostaria de sugestões para trabalhar os exercícios deste curso para cada módulo em que temos algumas atividades práticas. Então criarei cinco adjetivos de marca que você pode usar. Criarei diferentes para cada seção para que você tenha uma chance criar estilos bem diferentes para cada um desses módulos. Seu exercício para este vídeo é reunir-se com seus clientes, sua equipe de design ou ambos, e identificar cinco adjetivos que resumem sua marca. Alternativamente, se você estiver trabalhando sozinho, você pode criar cinco adjetivos que você acha que soam legais. Ou vou anexar cinco aos recursos deste vídeo. E à medida que você escolhe seus tipos de letra em todo o resto deste módulo, tente ter esses cinco adjetivos em mente. Basta fazer os tipos de letra que você está escolhendo ajudam a comunicar esses adjetivos de marca. O objetivo deste vídeo é garantir, você sabe, trabalhar apenas no trabalho de design estético quando você sabe o que a marca está tentando se comunicar. Se você não estabeleceu qual a personalidade da marca, pois não pode escolher um tipo de letra que comunique isso ou faça qualquer um dos outros tipos de atividades de design. Se você estiver trabalhando em um projeto do mundo real, sente-se com seus clientes, caso contrário, escolha outro designer ou você poderia fazer isso sozinho apenas para praticar pela primeira vez. E entre você brainstorm e descobrir quais são seus adjetivos de marca. Cinco adjetivos que comunicam qual é a personalidade da sua marca. A maioria de vocês trabalha com uma marca real ainda. Então, apenas para praticar, talvez escolha uma marca existente ou um site existente com o qual você trabalhe ocasionalmente. E pense no que os cinco adjetivos que descrevem sua personalidade. 4. Lojas de fontes: Obviamente, em algum momento você precisará encontrar algumas fontes. Claro, encontrar alguns tipos de letra para usar. Você tem sua inspiração. Você sabe quais são os requisitos, onde você vai procurá-los? E, na maioria das vezes, será o Google Fonts. Isso porque eles são gratuitos, são fáceis de implementar e há muitas fontes potencialmente boas aqui. Primeiro de tudo, vamos dar uma olhada rápida no Google Fonts. Podemos pesquisar se soubermos o nome dele ou podemos digitar algum texto aqui se quisermos que ele diga alguns textos diferentes aqui nos pequenos bits de exemplo e tudo, podemos filtrá-lo por categorias. Agora, essas categorias não serão um pouco diferentes categorias diferentes que você encontrou em sites diferentes. Todos eles os categorizam um pouco diferente, mas sabemos o que é um serif. Sabemos o que é um sans serif. É se tem os pezinhos não são. Display significa apenas um tipo de letra projetado especificamente para cabeçalhos. caligrafia significa que ele tem um tipo de sensação manuscrita humanista? E o monoespaço, é claro, significa que as larguras de cada personagem ou o mesmo normalmente usado para codificação. Agora, uma coisa que não falamos muito é se você selecionasse um idioma diferente, como digamos, por exemplo, selecionamos japonês. japonês tende a ter suas próprias classificações, mas o Google Fonts, só vai classificar as mesmas imediatamente. Se você está procurando por um tipo de letra japonês, por exemplo, será um pouco mais difícil encontrar um que atenda aos seus requisitos exatos nas fontes do Google porque elas não estão classificando-as de uma forma que as pessoas podem esperar que letra japoneses sejam classificados. Mas também podemos ver que há basicamente oito para escolher. Então você tem que escolher o que você quer. Agora, uma coisa que é particularmente boa sobre as fontes do Google também é que podemos selecionar algumas das propriedades da fonte. Por exemplo, talvez queiramos que seja bastante estreito porque estamos criando painéis para um site de UI muito pesado, que talvez não tenha muitas postagens de blog e outras coisas onde focando puramente no que se encaixa bem em menus e botões. Vamos querer que seja um tipo de letra bastante estreito para possamos filtrar que possamos filtrar o cabelo liso e isso reduzirá o número de opções disponíveis. Idealmente, uma grande coisa sobre a escolha de um tipo de letra é apenas descartar todos os que não se encaixam. E então você vai ter um punhado para escolher. Por fim, um recurso muito bom que o Google Fonts tem, que é um recurso bastante novo. Falaremos mais sobre fontes variáveis mais tarde. Mas se eu clicar nesta caixa de seleção aqui mostre apenas fontes variáveis. Atualmente, existem 34 fontes variáveis no Google e há uma variável. Vou te mostrar com laje Roboto. Se você olhar aqui, há se você estava importando isso e falaremos muito mais sobre isso na fase de implementação. Mas se você estivesse importando isso, talvez fique tentado a importar esses nove arquivos de fonte diferentes, então você tem todos os pesos diferentes. Bem, na verdade, você poderia apenas importar este arquivo de fonte. E tem 900 pesos diferentes, que você pode controlar com uma variável em seu CSS posteriormente. Isso é particularmente bom para obter os brancos exatos corretos, especialmente quando estamos lidando com design responsivo, onde pode haver vários tamanhos diferentes para o tipo de letra. Vamos querer que haja vários pesos diferentes também. E agora podemos controlar isso em um nível muito mais granular, cada vez mais com a tipografia da web, estaremos procurando fontes variáveis. E como acabamos de ver, o Google Fonts já possui 34 fontes variáveis. Fontes variáveis diferentes têm outras variáveis que não sejam brancos. Mas o Google Fonts atualmente só os tem com as variáveis brancas. Então isso é muito bom. Agora, o próximo local a ser mencionado é apenas para pessoas que têm uma conta da Adobe Creative Cloud. Porque se você tiver a Adobe Creative Cloud, seria louco ir a qualquer lugar que não seja fonts.adobe.com para tentar encontrar seus tipos de letra. Em primeiro lugar, e isso ocorre porque a Adobe tem uma coleção realmente impressionante que está disponível para usuários da Creative Cloud. Mas você quer uma pergunta se a pessoa que está publicando o site também tem uma licença para usar o tipo de letra também. O que quero dizer com isso é que se você estiver fazendo trabalho do cliente e tiver pessoalmente a conta da Creative Cloud, eles precisam de uma licença diferente para que eles usem o mesmo tipo de letra no site do cliente. Agora, com as fontes da Adobe, você já notará imediatamente que as classificações são maiores aqui. Na verdade, a caligrafia e o script são separados em duas classificações diferentes. Temos uma carta negra sobre a qual falamos anteriormente, que seria muito estranho usar isso em um site, mas talvez você o faça. E Slab Serif. Então, já temos uma escolha mais rica de classificação é escolher. E podemos selecionar essas propriedades não exatamente em uma balança deslizante como no Google, mas poderíamos escolher uma que seja mais estreita ou, ou mais pesada, ou até mesmo selecionar uma com bastante alta ou baixa altura x. E já sabemos que isso poderia ser bastante útil. Agora, novamente, outra coisa que é muito boa com o Adobe Fonts é se eu fosse selecionar japonês e eles escolheram japonês aqui um pouco. Você notará que as classificações realmente mudam. Se você estiver lidando com tipos de letra japoneses, pode ser mais fácil encontrar um que se adapte sua classificação exata no Adobe Fonts. Mas, novamente, vale a pena notar que existem apenas sete fontes japonesas. Então, quão útil é poder filtrar as diferentes classificações. Não tenho muita certeza. O Adobe Fonts é absolutamente incrível se você tiver uma licença da Adobe Creative Cloud. Agora, o próximo casal, vou mostrar rapidamente nossa fonte shop.com e não mentir nenhum tipo. E estes são sites que coletam fontes de todas as fundições de tipos diferentes. E eles os posicionam em seu site para que você possa pesquisar facilmente um grande número de fontes compráveis compradas de diferentes designers. Voou para fora deste curso, estou usando a marca com tipo para os tipos de letra são usados lá. Relativamente acessível e gosto muito do estilo deles. Você quer ter cuidado ao comprar aqueles de designers individuais que você entende qual é o licenciamento. Por exemplo, se eu olhar branding com licenciamento de tipos, podemos ver que, na verdade, há uma licença totalmente diferente para a qual precisamos usá-la em aplicativos móveis se estivermos usando em um site. Portanto, precisamos estar cientes de onde podemos usá-lo na licença que temos porque pode ser muito fácil errar o licenciamento. Eu vou mostrar rapidamente algumas pessoas um pouco mais caras. Este é o tipo de jogo. Na verdade, oferecem um design de tipo baseado em comissão , onde você pode ir até eles com seus requisitos e eles realmente criarão o tipo de letra para você se você estiver trabalhando em um projeto com um orçamento muito grande, este é Hoefler and Co, e eles têm alguns tipos de letra muito legais aqui. Uma coisa que você notará é que parece muito bom valor porque diz noventa e nove dólares para o tipo de letra. Mas, na verdade, se você quiser usá-lo na web, o que, claro, você faz do que a licença. E vai subir bastante com base em quantas impressões que estão no site e por quanto tempo você o vive para todo esse tipo de coisa. Portanto, não se deixe enganar com o que parece ser um preço bastante baixo de primeiro lugar, este é um projeto interessante que encontrei recentemente chamado protótipo, onde você pode projetar seu próprio tipo de letra. Você pode escolher as alturas de serif, e provavelmente está funcionando com fontes variáveis de alguma forma, você pode escolher a largura do Serif e o contraste. E há todos os tipos de escalas deslizantes diferentes onde você pode controlar exatamente a aparência do tipo e possivelmente projetar o seu próprio com algum esforço mínimo. Neste vídeo, falei principalmente com você sobre onde você vai encontrar seus tipos de letra, seus arquivos de fonte? E, de forma realista, se você tiver uma conta da Adobe, você quer ir direto para as fontes da Adobe agora mesmo e usá-la para encontrar suas fontes. Caso contrário, dependendo do seu orçamento, estaremos principalmente nas fontes do Google. Então, se você tiver um pouco de dinheiro extra, talvez queira começar a olhar para alguns desses sites onde você pode comprar um tipo de letra especificamente. Caso contrário, vou passar o resto deste curso usando o Google Fonts puramente porque acredito que é aí que cerca de 90% de vocês vão gastar cerca de 90% do seu tempo. 5. Texto do corpo: Se 95% da nossa aplicação for topografia, então talvez algo como 85 a 90% seja topografia corporal. O corpo do texto, o texto nos parágrafos nas postagens do blog, os textos em descrições em torno de infográficos, áreas de texto explicando como você usa o aplicativo. Todo esse texto de estilo corporal é a maioria de qualquer site. Portanto, a maioria dos tipógrafos ou maioria dos designers escolhe a topografia corporal primeiro. Vou sugerir isso agora e vou sugerir novamente mais tarde, mas por razões muito diferentes. Agora, algumas coisas para pensar ao escolher sua topografia corporal. Não queremos escolher algo muito louco. Por exemplo, não vamos escolher nosso tipo de letra manuscrito para compor a topografia corporal de nosso aplicativo web. Poderia estar em grandes parágrafos longos de texto, os termos e condições. Talvez queiramos que seja individual e único. Queríamos comunicar quem é a marca e a personalidade da marca. Mas queríamos fazê-lo da maneira mais mínima e sutil possível. Aprenderemos mais tarde, quando analisarmos a legibilidade, queremos que nossa fonte de corpo tenha idealmente uma altura de x. ligeiramente acima da média. Ou seja, se olharmos para o Roboto aqui, ele tem uma altura x razoavelmente grande e um tamanho muito bom. Olhamos para o tamanho das letras minúsculas. Eles são bem grandes em comparação com o tamanho geral. Então isso é muito bom para ler um tamanho pequeno. Mas também não queremos muito contraste. Algo como Baskerville provavelmente não é ideal para textos corporais, especialmente se fosse um pouco pequeno porque há muito contraste entre alguns dos traços finos e mais grossos. Aqui temos a tela Playfair e tem linhas muito finas deste lado da linha a e muito grossa nesse lado do a. Se isso fosse muito menor, começará a nos causar alguns problemas para diferenciar as coisas e garantir que possamos vê-lo corretamente. Agora, exibição Playfair, vamos falar sobre exibição em um pouco em seu próprio nome, sugerindo que o usemos como textos de cabeçalho e não como textos corporais. Mas uma coisa a ter cuidado é algo com muito contraste. Aqui temos o PT serif e isso tem algum contraste, mas muito menos do que as areias de exibição. Provavelmente poderíamos nos safar usar isso como textos corporais. Podemos querer torná-lo um pouco maior do que nossa topografia corporal média. Agora, a próxima coisa a pensar é que vamos querer várias vezes usar diferentes pesos de texto em negrito e possivelmente texto em itálico para chamar a atenção para as coisas dependendo do propósito de nossos textos corporais . Mas, certamente, se usássemos muitos textos em nosso site, vamos querer vários estilos que temos propriedades de fonte. Podemos realmente dizer que estamos procurando que ele tenha mais do que uma certa quantidade de estilos para garantir que só estamos vendo aqueles em que vamos ter opções em itálico e negrito também. Agora temos nossas especificações do nosso resumo. Se começarmos a descartar todos os tipos de letra que não podemos usar, só ficaremos com tantos para escolher. Se estivéssemos, por exemplo, escolhendo um tipo de letra para um banco e algumas de nossas palavras-chave de marca diziam coisas como seguras e seguras e confiáveis. Provavelmente vamos evitar algo como Poppins, que tem formas únicas muito interessantes em torno do G aqui, ou ferrovia, que tem esse crossover bastante extravagante com a WWE. E vamos escolher algo que pareça um pouco mais confiável do que barcos a remo criativos que podem realmente ser uma boa escolha para um banco. Mas se ainda quisermos que ele tenha algum tipo de personalidade, talvez não, talvez Morley seja uma opção mais interessante. Independentemente da nossa marca e palavras-chave, não queremos que o tipo de letra do corpo tenha muita personalidade. Quando o leitor chega aos textos corporais, eles já decidiram que estão interessados em ler o artigo. Eles já decidiram que vão usar o aplicativo. Já comunicamos a personalidade da marca e o que somos todos. Agora queremos tornar o mais fácil possível para eles lerem. Eu me defini o resumo de encontrar um para um banco seguro e seguro. Só vai ter Sans Serif. Não queremos que os textos splay lá dentro. E reduzimos isso instantaneamente para 139. Talvez eu queira que ele seja meio restrito porque vou usá-lo para meus elementos de interface do usuário também. E então fiquei com Sarah burn. Então, simplesmente definindo regras específicas com base no meu resumo de design, encontrei imediatamente um tipo de letra perfeito. Agora eu quero que você pegue o resumo que você criou, seja você mesmo ou seu trabalho, o cliente, para criá-lo. Quero que você passe algum tempo novamente olhando para as galerias de inspiração. Mas agora você tem uma ideia do que você está procurando. Então, vai forçar seus olhos a ver coisas que você não estava olhando antes. Então eu quero que você venha ao Google Fonts ou, se você tiver uma conta da Adobe, sinta-se à vontade para usar o Adobe Typekit e tentar restringi-lo e encontrar um tipo de letra que não tenha muito contraste. Não tem muita personalidade, mas tem a personalidade que você está procurando sutilmente lá que você acha vai funcionar bem para o seu projeto. 6. : Antes de começarmos a falar sobre tipos de letra correspondentes para usar vários tipos de letra em nossos designs e como encontrar esses tipos de letra que funcionam bem juntos. Vale a pena pensar um minuto, posso me safar com um tipo de letra? É totalmente possível criar um design muito bom com muito personagem usando um único tipo de letra. Pode parecer muito bom, pode parecer minimalista e será mais rápido e fácil para você criar. Possivelmente, a principal desvantagem com o uso um único tipo de letra é que os títulos, o tipo de exibição podem realmente ajudar a comunicar caráter, marca, personalidade e podem realmente atrair as pessoas. Mas também ajuda a criar essa hierarquia visual, fazendo uma distinção muito clara entre cabeçalhos e corpo de texto. E como falamos antes, por causa da forma como obtemos uma espécie de distorção visual, o texto não parecerá com o mesmo tipo de letra, um tamanho grande como será em um tamanho pequeno, pode parece um pouco como um erro. Na verdade, existem algumas soluções se você não escolher um único tipo de letra e usá-lo para tudo em todo o site. Existem certos tipos de letra na tela agora que temos laje. E você deve ter notado que há duas versões, uma chamada slab 013 pixels e outra chamada laje 027 pixels, que informam os tamanhos exatos para os quais elas foram projetadas para esses tipos de letra para serem usados. Podemos ver que aquele a ser usado maior é um pouco mais estreito, porque se você tiver títulos longos, ele ocupará muito espaço na tela. E eles provavelmente ajustaram a espera visual ligeiramente para os dois tamanhos diferentes. Agora, quando você olha ao redor, há vários tipos de letra em que uma fonte separada ou um tipo separado foi criado para exibir os textos do corpo e às vezes, até mesmo um tipo de letra separado para texto de legenda. Só vou te mostrar outro. Este é chamado DM serif text e DM Serif Display. Agora este é um verdadeiro peculiar, eu acho, porque o dM Serif Display obviamente foi projetado com um pouco mais de contraste nas letras, então você pode usá-lo em tamanho muito maior, mas texto dm serif provavelmente não funcionará particularmente bem se fosse em torno de 14 pixels, talvez 16, possivelmente até 18. Idealmente, este seria um texto separado para subtítulos dois cabeçalhos principais. Na verdade, mesmo quando clico nisso nas fontes do Google e procuro os emparelhamentos que ele recomenda, é quase consistentemente sugerindo o uso de texto de serif DM como na verdade o tipo de letra do cabeçalho até que eu chegue direto na parte inferior onde está dizendo que talvez eu poderia usar o display Playfair e o texto de serif DM. Eu nem acho que essa seja uma combinação particularmente boa sobre a qual falaremos mais tarde. Mas só para ficar claro, há muitas possibilidades em que um tipo de letra foi projetado com uma fonte separada para o texto de exibição e para o corpo do texto. Se você estiver interessado em usar um único tipo de letra, essa é uma opção bastante elegante. Outra coisa a olhar para nós, se você estiver usando para usar uma única fonte, certifique-se de que ela tenha muitas ponderações diferentes. Certifique-se de que ele tenha opções em itálico. Possivelmente pequenos acampamentos como poderiam ser usados para subtítulos ou legendas. Mas certifique-se de que ele tenha muita variação. Porque quando você vier para construir todo o seu sistema de design, você vai precisar de todos esses pedaços e peças extras. Veremos isso mais na seção de estilo. Mas esteja ciente agora que, se você for usar um único tipo de letra para tudo, você vai querer que ele tenha muito mais opções. Ok, agora em seguida, vamos ver emparelhamento com o nosso texto de exibição. 7. Exibição de texto: Antes de encontrarmos um tipo de letra para emparelhar com nosso texto corporal, para encontrar um bom texto de cabeçalho para combinar com essas tags de corpo, precisamos entender o propósito da topografia de cabeçalho. Às vezes, nos referimos a isso como texto de exibição. Quando estamos lidando com os textos corporais, estamos muito mais preocupados com os aspectos técnicos sobre como você pode lê-lo, a legibilidade que você lerá em grandes áreas de cada vez. Vamos analisar a legibilidade muito em breve. Mas os textos de cabeçalho servem a um propósito muito diferente. Ele precisa atrair as pessoas. Ele precisa fazê-los querer lê-lo, mesmo que seja algo que alguém precisa ler para o trabalho ou por outro motivo, eles ainda precisam querer lê-lo para se certificar de que eles se envolvem totalmente com o texto e tire o máximo proveito dele. Os textos do cabeçalho dão o tom. Ele nos diz se estamos falando em um tom lúdico ou um tom muito sério, ele nos diz com quem é a pessoa com quem estamos conversando. Qual é a personalidade que nos fala agora. Além disso, cria uma certa quantidade de interesse visual. Se nossa tipografia, se nosso tipo de letra comunicar emoção suficiente e comunicar o rebaixamento do crack, talvez não precisemos usar uma imagem ou outros elementos gráficos para definir o tom da página, nós pode realmente criar um design muito mais minimalista se formos melhores em selecionar um bom tipo de exibição. Porque quanto mais a personalidade da marca é comunicada através do tipo de letra, menos precisamos confiar em ilustrações, imagens ou texturas. Quando falamos sobre como alguma comunicação é não-verbal, este é o lugar onde você pode colocar a maior parte de sua comunicação não verbal no texto de exibição onde ela não interferirá na legibilidade. E isso vai definir o tom desde o início. Agora, o outro lado de tudo isso, se não colocarmos nenhum pensamento em nossa exibição, tipografia pode ser algo como você veria com Bootstrap antes de fazer qualquer edição no código, temos um lista de personalidade muito branda e sem graça indo aqui. E isso não cria engajamento, nem interesse. E já faz seu cérebro suponha que isso vai ser um texto sem graça, desinteressante e francamente, sem importância. E, sem dúvida, parece um erro. É como quando você encontra um ícone muito simples projetado para ter apenas 20 pixels de altura e você o explode para ser enorme. Parece errado porque não tem detalhes suficientes para ser tão grande. A topografia e o título aqui são claramente uma topografia corporal. Ele não tem detalhes e interesse suficientes para ser explodido até esse tamanho. Parece um erro. Na verdade, eu editei um pouco o CSS para criar esse cabeçalho bastante feio para este site, é impossível ignorar todas as vantagens na escolha de um texto de exibição eficaz para nossos títulos. Porque se não tivermos inadvertidamente todos os efeitos negativos do cabeçalho que está na tela agora. O objetivo do texto de exibição é muito mais sobre branding e definir o tom do que sobre legibilidade. Este é o lugar onde podemos realmente comunicar abaixo desse nível consciente. E ele age como uma espécie de imagem realmente atrai as pessoas e faz com que elas queiram ler, mesmo que alguém tenha que ler o texto na página, eles precisam querer lê-lo primeiro para ter certeza de que completamente se envolva com isso. E o cérebro deles está interessado no material, quer estejamos criando um jornal, um blog, todo o painel para um aplicativo bancário, que o texto de exibição de cabeçalho precisa para tornar as pessoas interessadas e também comunique a personalidade. 8. Meta informações: Vamos falar sobre emparelhar dois tipos de letra. Mas, claro, há muitas situações em que você pode escolher mais de dois tipos de letra. Uma coisa comum é para meta-informações para legendas, por exemplo, se você estava lidando com um aplicativo web muito pesado de conteúdo ou sites como potencialmente um site de notícias. Eu tenho o guardião na tela agora, então você naturalmente precisará uma hierarquia visual muito mais sofisticada. Existem muitos outros tipos e significados diferentes para o texto na tela. E, portanto, é um trabalho muito mais difícil para nós diferenciar entre coisas como a data ou a legenda de uma imagem que não são realmente importantes para muitos leitores, 99% das pessoas que lêem este artigo não precisa ler a legenda na foto. Não precisa saber a que horas foi postado, e não queremos interferir com esses noventa e nove por cento dos leitores. Também queremos tornar visualmente óbvio que a legenda é outra coisa, que a data é outra coisa. Podemos escolher um tipo diferente para ajudar a fazer essa diferenciação. Mas também porque sabemos poucas pessoas precisam ler isso, podemos realmente torná-lo um pouco menor do que o tamanho de leitura desconfortável, podemos deixar desconfortável ler. O The Guardian tornou a legenda desta imagem muito menor do que a fonte do corpo. Eles fizeram dele um tipo de letra sans serif, e também o tornaram uma cor mais clara, por isso tem menos contraste com o fundo, além de adicionar um símbolo ou um pequeno indicador visual de que é uma legenda e a forma de um triângulo. Parece um pouco com uma seta apontando para a imagem. Todas essas coisas combinadas deixam bem claro para nós que isso não é importante e não faz parte do artigo e podemos simplesmente ignorá-lo. Na ocasião muito rara em que alguém precisa saber quem foi o fotógrafo ou a hora exata em que o artigo foi publicado. E eles têm uma visão muito ruim. Eles podem pedir ajuda a alguém. Eles poderiam usar um leitor de tela, eles poderiam aumentar o zoom. Não precisamos nos preocupar muito com a legibilidade nesses casos de borda incrivelmente raros. Porque se o fizermos, isso prejudicará a legibilidade para os noventa e nove por cento que estão aqui apenas para tentar ler o artigo. Se estivermos em uma situação em que temos um aplicativo pesado de conteúdo, estamos projetando e decidimos que precisamos de um novo tipo de letra para as linhas do comprador, as datas, as legendas ou qualquer outra informação do Meta. O mais importante é que se o tornarmos incrivelmente pequeno, ainda podemos lê-lo? E além desses pontos únicos, as outras regras que estamos prestes a falar com o emparelhamento do tipo de letra do seu corpo com o tipo de letra do cabeçalho. Todos eles ainda se aplicam quando você está projetando em um terceiro tipo de letra para suas informações do Meta. Se estivermos trabalhando em um site muito pesado de conteúdo, como, por exemplo, um site de notícias ou um aplicativo com um painel com muitas visualizações de dados. Em seguida, a necessidade de um terceiro tipo de letra aumenta à medida que a complexidade do sistema tipográfico aumenta. Se estivermos escolhendo um terceiro tipo de letra para nossa meta-informação, nossas legendas são nossas datas para um exemplo, então o mais importante é que se o tornarmos realmente pequeno, ainda será legível? E além disso, todas as regras sobre a topografia de emparelhamento ainda se aplicam e veremos essas em seguida. 9. Combinação de fontes: Neste vídeo, vamos falar sobre como emparelhar tipos de letra. 99% do tempo em que estamos projetando um aplicativo ou um site, vamos escolher mais de um tipo de letra. Teremos um para os títulos e outro para os textos corporais, e potencialmente um terceiro tipo de letra para coisas como legendas. Agora temos algumas regras definidas. Existem algumas regras para nos ajudar a decidir se um tipo de letra funciona bem com outro. Infelizmente, existem muitas variáveis para que essas regras sejam confiadas. Você sempre terá que aprender a treinar seus olhos. Mas depois de ter treinado seus olhos para emparelhar tipos de letra que funcionam bem juntos, você pode fazer uma carreira inteira apenas a partir disso, se quiser, podendo emparelhar tipos de letra em combinações eficazes, mas também combinações únicas são uma pedra angular realmente vital para seus projetos. Agora, vamos supor que eu escolhi EB Garamond para ser meu tipo de corpo. E eu escolhi isso parcialmente porque vamos usar muito Garamond na próxima seção. Mas antes de tudo, algumas coisas que sabemos sobre esse tipo de letra. Então, sabemos que é uma fonte serifa tradicional. Sabemos que é um clássico absoluto. É um dos primeiros, além de talvez Jensen, que ainda está em uso hoje. Mas Jensen tem algumas características que o atraem um pouco demais. Enquanto Garamond ainda pode parecer um tipo moderno. E por essas razões, muitos advogados advogados e contadores gostam de usar Garamond. Isso faz com que as coisas pareçam bastante oficiais e clássicas. Eu estava trabalhando com um advogado recentemente e todos os documentos do Word que lhe enviei, ele mudou a fonte, o Garamond. Se assumirmos por um segundo que tenho um breve para criar um pedido para advogados ou outra pessoa com um histórico legal muito profissional, então Garamond pode ser uma boa escolha para os textos corporais. Ou se eu estiver projetando um aplicativo com um tipo de letra um pouco louco , posso usar o Garamond apenas para a página de Termos e Condições, por exemplo, onde eu quero que as coisas pareçam um pouco mais oficial. Então, como poderíamos emparelhar isso com um cabeçalho? Bem, podemos ver algumas dessas galerias de inspiração sobre as quais falamos como tipo Wolf. E outro lugar para procurar, obviamente, está na parte inferior da página de fontes do Google. Isso vai sugerir algumas coisas que são comumente emparelhadas com ele. Agora, eu apenas sugeri que meu resumo é fazer uma inscrição ou um site para advogados ou outros profissionais similares. Então, algo como lagosta definitivamente não vai funcionar. Poderíamos riscar isso imediatamente. Da mesma forma, um tipo de letra como o jogo, que é chamado de jogo, presumo porque tem uma reminiscência de jogos de computador de estilo antigo. Na verdade, parece que quase o monoespaço talvez esteja desenhando para um gênero muito específico. E, portanto, também podemos ignorar muitos que nos deixam. E, obviamente, ficamos com centenas de outras fontes de título, mas deixando-nos com três possibilidades que o Google diz serem bastante comuns, que são Roboto, Montserrat e Oswald. Agora o roboto é incrivelmente usado em excesso. Alguns designers de aplicativos usarão o Roboto. Então, sem sequer pensar nisso, eles vão apenas enfiar Roboto em tudo. Estou sempre relutante em usar algo assim porque a possibilidade de nosso usuário estar dormindo enquanto usa nosso aplicativo é incrivelmente alta com algo como Roboto. Agora eu realmente não sinto que Montserrat é tão bom parecer algo a ver com o uso especialmente do Montserrat Regular, talvez se eu fizesse isso médio ou ousado, mas algo para fazer isso tendo um tipo de traços estreitos, o que faz com que eu me sinta confronto um pouco com Garamond e falaremos sobre isso um pouco mais depois. Mas estou bastante atraído pela ideia de usar Oswald com Garamond. E uma grande vantagem imediatamente é que esse caminho é muito impactante. Você é atraído por isso tão rapidamente, é tão grande e denso e chama sua atenção quase como uma dessas serifas de laje. Mas sem ter conotações de cartazes vitorianos da Inglaterra. Sinto que há um nível muito bom de contraste entre esses dois tipos de letra. Vou levar isso para Figma agora, Oswald e Garamond. E vou explicar algumas das razões pelas quais essas fontes funcionam juntas. Aqui temos Oswald e Garamond como um bloco de texto como eles podem aparecer potencialmente em um site ou aplicativo da web. E você pode ver que eles ficam muito bonitos juntos. Eu acho que uma coisa que eu acho que é realmente útil sobre Oswald como textos de cabeçalho em uma nota lateral é porque ele se destaca tanto e tem esse impacto, você pode torná-lo um pouco menor como um título. E, portanto, talvez sejamos um pouco mais profissionais para nosso site de advogados ou aplicativo da web que estamos potencialmente fazendo. Agora, quando estamos emparelhando tipos de letra, o que não queremos são tipos de letra muito semelhantes, eles vão entrar em conflito. Vai parecer um erro. E vamos falar sobre isso mais tarde. Mas você tem uma distorção óptica quando aumenta um tipo de letra. E isso poderia potencialmente fazer com que pareça um tipo de letra diferente e como se estivesse entrando em conflito consigo mesmo. Portanto, mesmo se estivermos usando exatamente o mesmo tipo de letra para os títulos, pode parecer um pouco como se ele se chocasse. Queremos que ele pareça obviamente diferente. Queremos que pareça uma decisão intencional. E isso vai nos ajudar com nossa hierarquia visual também. Vai tornar mais distinguível que é um título. Então, nunca queremos ter um cabeçalho parecido demais com o corpo do texto. Agora, até onde podemos ver agora, estes parecem muito diferentes. Estou em roupas bastante largas, é um espaço bastante aberto e Oswald está muito condensado. Na verdade, isso seria muito bom para elementos de interface do usuário. Há uma versão condensada de Oswald também, mas eles realmente têm algumas semelhanças. não queremos que eles pareçam opostos completos. Se eles se parecem com opostos completos, eles se parecem com duas coisas de mundos diferentes que nós empurramos juntos. Eles precisam de algumas semelhanças. Queremos medidas iguais de personalidade. Se nosso texto de exibição, se eu encabeçar textos tiver muita personalidade, queremos um texto corporal bastante conservador e vice-versa. Agora vamos ver algumas das coisas que eles têm semelhantes, porque elas parecem bem diferentes agora. Uma coisa que sempre, sempre, sempre queremos que eles tenham pelo menos relativamente semelhante entre o texto de exibição e o corpo do texto é a altura x. Então aqui eu tenho um L maiúsculo e um par de x maiúsculas em Oswald e em Garamond. E podemos ver que Oswald tem uma altura x ligeiramente maior do que a peça, mas não é drasticamente maior. São cerca de 57% das alturas em Oswald e é cerca de 50% no EB Garamond. É um pouco menor em Garamond normal, há um pouco de espaço aqui, mas eles são relativamente semelhantes. Isso é muito importante e vamos falar sobre isso mais tarde. Mas sempre queremos que nossos textos de exibição e nossos textos corporais tenham uma altura x. semelhante. Nunca queremos um com uma altura x muito alta e outra com uma altura x muito baixa. Agora, a próxima coisa que eu quero olhar é se você olhar para este E de ambos, você pode ver como a ponderação é bastante semelhante. Não há uma grande quantidade de contraste em um serif tradicional como Garamond. Quando você olha para a pequena barra transversal do E e depois o lado do E. Você pode ver que o contraste na espera é quase o mesmo que o contraste eles esperam que Oswald tem. Eles são semelhantes a esse respeito. Se escolhermos um tipo de letra como a serif moderna, então ele parecerá drasticamente diferente de algo como Oswald. E vamos querer tentar encontrar outras maneiras de torná-lo semelhante. Talvez possamos encontrar um texto de cabeçalho com uma largura semelhante. O contraste no traçado é bastante semelhante entre esses dois tipos de letra. E, finalmente, a forma real. O Garamond obviamente tem aberturas muito maiores. Podemos ver como é muito mais amplo e esse espaço no E é muito maior e Garamond para Oswald. Mas a forma geral real das letras, por exemplo, a a é a forma tradicional em ambas. E eu olhei através do tipo de letra. A maior parte da rede tem formas semelhantes. E eu mencionei isso porque se eu troquei este Oswald por mais de dois, talvez um Futura a ou algo assim, você verá que ele tem uma forma completamente diferente. E mesmo que isso esteja relacionado e de todas as outras formas, isso criará contraste com isso. Existem semelhanças entre esses tipos de letra que os fazem parecer que pertencem ao mesmo tempo em que têm contraste suficiente para criar um interesse visual. Claro, combinar um serif com um sans serif sempre criará instantaneamente essa tensão que contrasta entre os dois. Mas também poderíamos fazer muitas coisas a ver com a modelagem do último, o contraste do traço, o quão humanista ele parece. Às vezes, algo como Futura parece geométrico, enquanto alguns Garamond quase parecem levemente manuscritos. Tem um golpe fluindo para ele. Podemos chamar isso de humanista e chamaríamos de racional futuro. E quando estamos escolhendo tipos de letra que vão bem juntos, queremos algum contraste e algumas semelhanças. Trata-se de equilibrar essas duas coisas. Mas a única coisa que não queremos comprometer nas alturas x. Ele sempre tem que ter uma altura x relativamente semelhante. Isso é um emparelhamento de fontes com Oswald e Garamond. Vá e veja se você pode encontrar um texto de exibição que atenda ao seu resumo e também corresponda muito bem ao texto do seu corpo. Lembre-se de que você quer que ele tenha uma quantidade significativa de contraste, mas ainda parece que ele pertence. O Idealmente deve haver algumas semelhanças e algum contraste. 10. Prática de emparelhamento de fontes: Antes de começarmos a praticar nosso emparelhamento de tipos, eu queria mostrar a vocês este jogo muito legal que achei que é chamado de conexão de tipo. E a conexão de tipo está brincando descrevendo-se como um jogo de namoro tipográfico. Para treiná-lo para ajudar a emparelhar tipos de letra. Vai nos dar cinco aqui para começar. E estou escolhendo Garamond porque já olhamos para Garamond. E então está nos dando regras completas aqui sobre como podemos escolher um bom parceiro para Garamond está sugerindo que poderíamos confiar na família, caso em que selecionar um outro tipo de letra da mesma família, outro tipo serif tradicional. Ou procurar algo que pareça bastante semelhante ou olhar para algo com contraste bastante gritante, ou encontrar algo com algum tipo de conexão histórica. Agora vamos dizer que eu queria encontrar algo que fosse bastante parecido. Vou clicar aqui e isso me dá três opções. E uma delas é a combinação correta de acordo com este site. E dois deles são Dodds, que não vão ficar bem com Garamond imediatamente. Sabemos que este é um serif moderno aqui, este Pm, e eu não tenho que pronunciar isso. Então eu diria que este provavelmente não é o dançarino de crack. E este parece bastante transitório, mas também serifas de laje muito fortes aqui. E se eu olhar para a descrição do script, ele diz que tem uma altura x alta, meio que me deixa com essa opção, que é que talvez esse tipo de letra seja a melhor combinação para Garamond. E o que é realmente legal aqui é que posso ver alguns dos recursos sobre como a barra transversal parece. Diz que tem um pequeno balcão SCOTUS sinalizado cabeça serif. E se eu ligar para o outro tipo de letra existe também tem uma cabeça em forma de cunha serif e um pequeno contador. Portanto, tem muitas semelhanças. E o que estávamos procurando era um tipo de letra semelhante, digamos. E diz: Muito bem, encontrei um tipo de letra que funciona bem em conjunto. Venha brincar com este jogo porque às vezes ele vai dizer que você está errado e isso vai explicar o porquê. E você pode ver alguns dos detalhes sobre o tipo de letra e isso realmente vai ajudá-lo com algumas dessas palavras de anatomia sobre as quais já falamos e coisas assim. Este pode ser um jogo muito divertido para passar dez minutos jogando. Agora, eu também muito rapidamente só quero lembrá-lo de alguns sites que vimos anteriormente quando falamos sobre o tipo de inspiração lobo, onde ele só mostrará tipos de letra, combinações e par de fontes onde ele mostra combinações apenas do Google Fonts. Agora, se você já escolheu seu tipo de letra corporal, pode ser meio útil apenas ver o que esses sites estão recomendando bem os pares, com esse tipo de letra já. E então, a partir das opções que se alimentam bem, você pode ver uma que se encaixa no seu resumo. Agora pode ser um bom momento para revisitar sua inspiração depois de você já ter escolhido um tipo de corpo. Em seguida, tenho um desafio para você que eu gostaria que você repita idealmente quantas vezes possível aprendemos fazendo, afinal, quero que você leve um designer ou artista ou músico famoso ou qualquer um realmente, e tente criar uma maquete muito simples de como uma página sobre eles pode parecer. Queremos que ele tenha um texto de exibição diferente para os textos corporais e, em seguida, possivelmente em camadas com uma imagem. Muito, muito simples. Antes de criarmos um sistema tipográfico inteiro, queremos ter algum tipo de brincar com ele para ver como ele pode parecer e funcionar em uma página. Eu realmente rapidamente fiz isso três vezes para Dieter Rams, Jackson *******, e Frank Gehry, onde escolhi tirar fontes para cada um. E então eu os coloco em uma página para que eu possa ver como eles se parecem. Agora, Dieter Rams para aqueles de vocês que não sabem, ele era um designer muito famoso que trabalhou na Braun. E eu escolhi dois tipos de letra, cabelo, Ubuntu e cabine. E eu os escolhi porque eles são muito minimalistas e muito modernos ou modernos em termos de Dieter Rams como o tempo. Mas ambos têm uma brincadeira muito sutil para eles. Quando olhamos para o trabalho dos dois Rams, vemos que ele usa um uso muito, muito sutil, muito simples de cor e padrão para torná-los um pouco brincalhões e ter certos personagens. E eu acho que esses dois textos abertos, o B é absolutamente perfeito da maneira como tem essa pequena curva para cima e curva para baixo logo sobre a linha de base e sobre a linha superior. E isso faz com que ele se afaste e pareça parecido com a forma como vejo que Dieter Rams vale a pena procurar. Achei o que acho que é um emparelhamento bastante razoável entre os dois. E novamente, se eu ampliar o texto do corpo, você pode ver que ele tem um certo nível de contraste, mas novamente, certo nível de semelhanças também. vez, tem uma pequena quantidade de brincadeira. Uma coisa que eu acho particularmente bom é que Dieter Rams diz, nova empresa é isso.Então , na verdade tem o glifo com o O e E juntos, que é absolutamente vital se eu estivesse indo para fazer uma página escrevendo sobre Dieter Rams. Então, tendo escolhido esse famoso designer e depois escolhido esses dois tipos de letra, e mais tarde em uma página, posso ver isso realmente comunicando a mensagem exata que eu quero. É mais um sentimento do que qualquer coisa. Mas essas duas fontes funcionam juntas. Eles são muito modernistas, mas têm o mesmo tipo de brincadeira que eu sinto Dieter Rams teria com seu trabalho. O segundo que escolhi foi Jackson *******, que eu pensei que teria um bem diferente. Abordagem a isso. Ele fez muitas coisas com salpicos de tinta sobre tela. E quando eu amplio o texto do cabeçalho é cuando e o corpo do texto é Judson. E quando eu amplio, o texto do cabeçalho quase parece tinta salpicada na página. Podemos ver que é bastante brincalhão. No entanto, as PII não se juntam. Parece bastante humanista. Algumas das formas, a forma como a parte mais estreita do E está em um pequeno ângulo. Parece que foi pintado à mão. Há um certo movimento nas serifas do topo do W e o H. Eu quase posso imaginar que isso seja desenhado por alguém pingando tinta para baixo, toque talvez. Mas, no mínimo, tem que expressionistas sentem a isso. E então, da mesma forma, o corpo do texto tem uma sensação semelhante, eu acho, mas é muito mais sutil. Ele não tira nada da legibilidade. Se você estava criando uma página sobre Jackson *******, acho que esses textos, é absolutamente fantástico. Podemos ver que a forma do T é muito semelhante, mas esta é muito mais limpa e fácil de ler. Um tamanho pequeno. Claro, fui para Serifs com Jackson *******. Eu queria o máximo de extravagância e detalhe possível. E quando eu coloco em uma página ao lado desta foto, não pude dizer que estou muito feliz com essa escolha. Sinto que isso comunica um tipo de mensagem semelhante. Então, finalmente, criei uma página simples e rápida para Frank Gehry e coloquei um de seus edifícios arquitetônicos aqui. Ele é um arquiteto semelhante ao Dieter Rams é muito modernista. Eu fui para sans serifs, mas ele tem um estilo diferente de brincadeira. É pós-moderno, é brincadeira sem sentido. As fontes que escolhi aqui são seis tampas e Joseph em areias. E você pode ver que as sextas maiúsculas querem que as letras minúsculas sejam na verdade pequenas, que é meio maluco e realmente não faz sentido. É puramente lá apenas para ser diferente, o que eu acho que é como Frank Gehry gostaria muito, para ser honesto. No início, olhe Joseph e soa talvez não pareça ter essa vantagem maluca pós-modernistas, mas eu vou ampliar e você pode ver esse E, é cortado um ângulo realmente estranho. Está girado. Este Z ou Z. Se você estiver nos EUA, ele tem um lábio estranho onde ele simplesmente pisca no final e o W cruza. Particularmente estranho. Mas, no geral, ainda tem um visual modernista. Só tem essas pequenas reviravoltas muito malucas aqui e ali que apenas salvam Frank Gehry para mim. Então, meu desafio para você, e realmente acho que você deve fazer isso quantas vezes você tiver tempo para fazer é escolher um artista, escolher um designer, escolher um músico, se quiser, e tentar encontrar um imposto corporal e um texto de exibição que funciona bem em conjunto. Mas você sente comunicar a mesma mensagem que o artista que lhe dá o mesmo tipo de sentimento. Se você não consegue pensar em ninguém ou gostaria de um desafio extra. O que eu acho que poderia ser muito divertido seria usar um site como um wiki roulette.co. Acabei de chegar à roleta Wiki e é aleatoriamente me dar o nome de um político ucraniano que também é construtor e eletricista. E acho que pode ser divertido pegar uma página aleatória da Wikipédia e ver como você iria redesenhá-la. Quais tipos de letra você escolheria se fosse apenas por esta página? Você pode ter sorte e ter uma pessoa como cabelo, mas às vezes você obtém uma teoria ou um lugar e vê se consegue ter alguma idéia sobre quais emoções são invocadas no Marketplace ou aquela teoria ou o que quer que esteja na página da Wikipédia. E veja se você pode criar uma composição realmente simples como essa a partir dessa página aleatória da Wikipédia pode ser o próximo nível desse desafio. Eu realmente quero que você vá embora e faça isso, e eu quero que você vá embora e faça isso pelo menos três vezes. Porque quanto mais vezes você fizer isso, mais você terá uma ideia do que personalidade e quais letra de sentimentos têm e, claro, quão bem eles se combinam com outras marcas ou outras ideias você está tentando criar designs para. 11. Resumo: Precisamos de duas coisas antes de começarmos a selecionar um tipo de letra, precisamos de inspiração. Precisamos de muita inspiração. Onde esses tipos de letra são comumente usados? Quais opções de fontes existem por aí e como elas são usadas? Então precisamos garantir que conhecemos nossos requisitos antecipadamente. Os requisitos podem mudar à medida que tivermos ideias e, se estivermos trabalhando com um cliente ou uma parte interessada, os requisitos também podem mudar. Portanto, precisamos garantir que ele seja definido antes de começarmos a comprar. À medida que compramos, existem tipos de letra gratuitos e pagos. Os pagos serão mais exclusivos, mas também podem ter melhor alinhamento e mais glifos disponíveis para nós. Os livres são construídos por amadores que construíram seu mínimo. Tudo o que eles podem ser feitos pelo Google ou pela Microsoft com muita frequência copiam fontes populares e, portanto , podem dar caracteres menos distinguíveis. Para a maioria dos projetos. No entanto, algo como fontes do Google será sua loja, ou talvez fontes da Adobe se você tiver uma conta da Creative Cloud ou se o seu cliente tiver, letra profissionais podem ser muito caro e é muito importante garantir que você tenha a licença correta para nosso texto de exibição e nossos títulos. Queremos algo único que expresse o caráter do aplicativo e lhe dê uma sensação rara e valiosa. Precisamos de qualquer combinação de fontes para contrastar uns com os outros, bem como complementar uns aos outros em partes iguais. À medida que selecionamos nosso corpo de texto, um dos atributos mais importantes é como é fácil para nosso usuário ler.