Reabilitação na Web (Bootcamp, Semana 4)

1. Introdução: Na quarta semana do bootcamp de design da interface do usuário, analisaremos a legibilidade. Primeiro, teremos que entender os vários estágios de como alguém lê. Analisaremos alguns dos mitos sobre legibilidade em sites. Por exemplo, o mito de que os tipos de letra sans serif são mais fáceis ler do que os tipos de letra serif. Então eles não são. Claro, o mito de que devemos ter nosso tipo de corpo sempre a 16 pixels. Diferentes tipos de letra são tamanhos diferentes a 16 pixels e dispositivos diferentes ou distâncias diferentes do nosso rosto. Em vez disso, aprenderemos uma fórmula apenas um pouco mais difícil para garantir que nossos tipos de letra sejam um bom tamanho para ler. E garantiremos que esses tamanhos ajustem bem para diferentes dispositivos. Aprenderemos sobre uma ilusão de ótica que torna um pouco mais complicada do que você imagina emparelhar uma fonte de cabeçalho com uma fonte de corpo. E, finalmente, veremos como escolher o comprimento da linha e a altura da linha assim que você souber o tamanho do seu tipo de letra. Então, no final deste curso curto, você saberá como escolher o tamanho da fonte, o comprimento da linha e a altura da linha para qualquer tipo de letra para torná-lo ideal para legibilidade na web. 2. Como ler o modo de ler.: Antes de podermos falar sobre legibilidade, precisamos ver como as pessoas realmente lêem. Parece uma coisa bastante óbvia. Mas mesmo se você olhar para um aplicativo da web, há dois tipos diferentes de leitura que estão acontecendo. Uma é quando você está tentando encontrar algo. Então, sua navegação e seus botões e esse tipo de coisa em que você sabe o que está procurando e você está usando o texto para ajudá-lo a identificar a coisa. E o outro é quando você está tentando extrair informações de algo, talvez você esteja olhando para uma visualização de dados ou esteja lendo um artigo ou um comentário que alguém escreveu quando você não sei o que está nele ainda e você está tentando extrair e entender as informações nele contidas. Esses são dois tipos muito diferentes de leitura para nos ajudar a entender a diferença, vou pegar emprestada uma definição de Toni Basil. Você deve ter ouvido falar de Tony Belsen porque aqui está um campeão de leitura de velocidade. Ele é um especialista em como aprendemos, e ele é o cara que inventou mapas mentais. Tony boson diz que há sete estágios para ler. O primeiro é o reconhecimento. Isso está identificando o E na página como aquele que está em seu cérebro em algum lugar. A maior parte desse trabalho foi feito antes de começar a ler, quando você aprende o que cada uma das letras significa, o próximo estágio é assimilação. Esta é a parte física. É quando a luz salta da tela e para o olho e depois é transportada para o cérebro. O terceiro estágio é a compreensão. É aqui que realmente entendemos o que as palavras dizem. Todas as palavras na página combinadas têm algum tipo de significado e compreensão do que é esse significado. O próximo estágio é o conhecimento. É aqui que o aplicamos às outras coisas que aprendemos anteriormente. Talvez formemos algum tipo de opinião sobre o que lemos. Podemos rejeitá-lo ou podemos integrá-lo em nossas outras ideias. Os três primeiros estágios são todos aprendidos na escola. Mas, a menos que você frequentasse a faculdade ou universidade, você provavelmente não aprendeu realmente o estágio do conhecimento. Você realmente não aprendeu a reescrevê-lo com suas próprias palavras ou tem uma opinião sobre o que você está lendo até chegar à universidade. Portanto, este é um estágio mais avançado na leitura. Se pensarmos nosso aplicativo da Web quando temos rótulos para páginas, navegação e botões, não precisamos nos preocupar com esse estágio. As pessoas já sabiam o que estavam procurando. Só precisamos nos preocupar com esses primeiros dois estágios. Mas para todas as outras partes do nosso aplicativo, onde estamos dando informações a alguém e precisamos que elas as levem, se envolvam com as informações e use-as de alguma forma. Isso se aplicará a todos os sete estágios. O quinto estágio da leitura é a retenção. Isso é realmente capaz de armazená-lo em algum lugar nosso cérebro para trazê-lo de volta mais tarde, quando realmente precisamos, então temos recordação, que é quando trazemos essa informação de volta armazenamento quando precisamos dele. E os botões do Tony, fase final, estágio sete é a comunicação. Ser capaz de usar essas informações que armazenamos lembramos e explicamos a outra pessoa. Acho que vale a pena estarmos cientes e pensar nesses sete estágios quando estamos fazendo escolhas tipográficas. Mas eu não vou entrar neles por muitos detalhes, certamente não agora. No entanto, se você estiver tomando uma decisão como o que usar como o corpo do texto em um grande bloco de tipografia. Acabamos de olhar para as duas primeiras coisas aqui, reconhecimento e assimilação. Podemos dizer, sabe o quê? Helvetica é um corpo muito, muito bom. Siga-o porque é muito, muito rápido para nós percebermos. É muito rápido e eficiente para assimilação. Ele usa formas geométricas simples. É perceptualmente menos esforço para assimilarmos as letras. Quando olhamos para a anatomia da tipografia, mencionamos como o ascendente em uma Helvetica H não é particularmente alto, tornando-o quase idêntico ao n. Isso nos dá problemas de reconhecimento instantaneamente. Da mesma forma, se você olhar para um, C tem uma abertura muito pequena e exatamente a mesma forma geométrica que um O ou um E. E, claro, as letras maiúsculas e minúsculas l são praticamente exatamente a mesma forma. Mesmo se considerarmos esses dois primeiros estágios ao uma decisão tipográfica, podemos ver como eles podem realmente contradizer massivamente. Helvetica é uma ótima opção para assimilação, mas uma escolha terrível para reconhecimento. E por causa do uso excessivo do tipo Helvetica provavelmente é particularmente ruim para memória e engajamento, que significa que a maioria dos estágios entre compreensão e comunicação serão afetado negativamente pela escolha desse tipo de letra. Agora pode parecer um detalhe desnecessário olhar para a definição de cada letra e criticar ou elogiar o fator de reconhecimento e assimilação desses pequenos e minúsculos detalhes. Mas, como adulto, quando você lê, quase nunca olha para cada letra individual. E se você ler rápido o suficiente, raramente olhará para uma única palavra de cada vez. Isso significa que, com o tempo, estamos aprendendo a ler uma palavra inteira por causa da forma geral dessa palavra. Talvez nem seja aquele em que estou focado no momento. Pode estar a duas ou até três palavras de distância dele. Se lemos particularmente rapidamente, o que significa que nem sequer está em foco quando o lemos. Identificar a diferença entre uma Helvetica o e uma Helvetica ou C ou E quando não estiver no centro do nosso foco, leva a uma possível leitura errada e, portanto, afetará negativamente o seguindo seis etapas. O menor detalhe em um tipo de letra que afeta o reconhecimento, assimilação, o engajamento na memória ou qualquer um desses detalhes, torna-se extremamente importante quando as pessoas estão lendo um grande corpo de texto porque eles vão passar por ele em um ritmo incrível. E o menor detalhe pode afetá-los emocionalmente ou afetar sua compreensão. Agora, se seu primeiro idioma fosse japonês ou chinês, ou de alguma forma hieróglifos Mahan ou Egípcio, então você estará acostumado a ler uma palavra inteira como um único símbolo. Você já estava lendo muito rápido. Mas também devemos estar cientes de que o esforço perceptivo necessário para assimilar um personagem chinês ou japonês é muito mais difícil. E a importância do reconhecimento porque se as semelhanças entre os caracteres tornam ainda mais importante considerarmos esses fatores com esses alfabetos. De acordo com Tony boson, há sete etapas para a leitura. Quando levamos em consideração todos esses fatores, não há como dizer que há um tipo de letra que devemos escolher. Esse será o melhor em todos os cenários. E mesmo que houvesse, atualmente estamos falando sobre leitura. Nem estamos falando todas as outras partes da comunicação visual que acabamos de discutir. Não estamos falando de motivar as pessoas a ler. Estamos literalmente falando sobre o quão bem eles lêem. Todos esses fatores tornam quase impossível definir um termo como legibilidade. Mas vamos criar alguma forma de definição no próximo vídeo. Apenas esteja ciente de que não é uma regra definida em pedra. 3. Leitura.: Se quiséssemos medir o quão legível ou a legibilidade de um bloco de texto em um site. Existem várias coisas que gostaríamos de considerar. A maneira como as pessoas avaliam a legibilidade é tão selvagem e variada quanto a maneira como elas medem a usabilidade em si. Existem várias técnicas em que as pessoas contam o número de advérbios. Eles observam o quão complexa é a estrutura da frase, quantas sílabas por palavras estão no texto. Muitas coisas que não veremos ao longo deste curso porque elas não estão relacionadas à tipografia. Mas se você for a um site como readable.com, poderá colocar um parágrafo de texto e classificá-lo nesse tipo de coisa. Há muitas maneiras de medir a velocidade da percepção e precisão com que os tipos de letra são percebidos. Há muitas coisas a fazer com o quão fácil é diferenciar entre letras no tipo de letra. E tudo o que acabei de mencionar é apenas a ver com os primeiros estágios da leitura, não a ver com o quão fácil é lembrar ou lembrar, ou o quanto isso envolve você e faz você pensar e formar o seu próprio opiniões sobre o conteúdo. Como tipógrafos da web, é melhor pensar nas variáveis que temos disponíveis para nós nas variáveis que temos disponíveis para nós em vez de todas as maneiras pelas quais podemos escrever legibilidade como um todo. Agora, uma vez que escolhermos um tipo de letra e faremos isso em grande parte com base em quão bem o caráter do tipo de letra se encaixa na marca. Existem três variáveis que podemos controlar. Podemos controlar o tamanho do texto, a altura da linha e o comprimento da linha. Você pode ter ouvido de tempos em tempos algumas regras básicas sobre essas três variáveis, especificamente com o tamanho do texto. Por exemplo, você pode ter ouvido pessoas dizerem que texto precisa ter pelo menos 16 pixels de altura. Infelizmente, essa é uma regra geral. E como designers tipográficos, não é muito útil para nós. 16 pixels de altura para um tipo de letra não é o mesmo que 16 pixels de altura para outro tipo de letra, por vários motivos. Os 16 pixels estão se referindo à caixa circundante e letras diferentes e diferentes tipos de letra preenchem essas caixas de várias maneiras diferentes. Eles podem ir direto para as bordas. Eles não têm absolutamente nenhuma garantia que isso vai acontecer. Eles podem ser bem pequenos dentro dessa caixa. E mesmo assim, há vários atributos como a altura x e o peso óptico. Coisas sobre as quais falaremos em alguns vídeos muito em breve que afetarão o tamanho que ele aparece na página. Mesmo assim. Isso é antes mesmo de falarmos sobre design responsivo. Na verdade, mantemos telas diferentes a distâncias diferentes do nosso rosto. Então, nosso telefone, quando olhamos para a tela do nosso telefone, mantemos muito mais perto do que quando olhamos para um site em uma tela de monitor. Não há como saber exatamente o quão longe o usuário está segurando o telefone do rosto. Mas, de um modo geral, um tamanho de tipo de 16 pixels na tela do telefone não é o mesmo que um tamanho de tipo de 16 pixels em um monitor. As outras duas variáveis, alturas de linha no comprimento da linha, serão de alguma forma afetadas pela escolha da topografia e, em seguida, pelo tamanho da fonte. Portanto, é impossível para nós resolvermos essas coisas até termos esse tamanho de fonte. De fato, para qualquer uma dessas variáveis, o tamanho do texto, altura da linha e o comprimento da linha que mudam uma afetarão todas as três. Se você olhar para o design de um site existente e disser, Você sabe o que, precisamos aumentar o texto neste site. Isso vai mudar absolutamente tudo. Quando pensamos em legibilidade como tipógrafos, estamos pensando no tamanho do texto, na altura da linha e no comprimento da linha. E estamos pensando em todas essas três coisas funcionando bem o que juntas? Para o resto deste curso, vou me referir à legibilidade e ao quão bem essas três coisas funcionam juntas. Estar bem ciente de que existem várias outras coisas que entram em saber se o texto é legível ou não, especialmente que podemos até considerar o quão bem lembramos e lembramos as informações como parte da legibilidade. 4. Proporção de aspecto: No último vídeo, eu disse que as alturas gerais do tipo de letra não são muito importantes para nós quando estamos pensando em legibilidade. E só para provar esse ponto, quero mostrar alguns textos escritos em Verdana e depois textura exatamente no mesmo tamanho, mas em Garamond. Agora, uma grande diferença entre Madonna e Garamond é que Madonna tem uma altura x muito, muito alta, e Garamond tem uma altura x muito pequena sobre todos. Se você pegar qualquer tipo de letra e dividir a altura geral das letras pela altura x, você obtém a proporção. A altura x normalmente é em torno da metade da altura do caractere geral. Você normalmente está olhando para algo em torno de zero 0,5 como a proporção. Mas pode ser qualquer coisa de zero 0,4 até 0, 6. Garamond tem uma proporção tão pequena quanto 0,38. A altura x do Garamond é muito pequena em comparação com o tamanho total. Lembre-se de que o tamanho é o tamanho da caixa ao redor. Então, mesmo as letras maiúsculas podem não se encaixar perfeitamente dentro dessa caixa. Para Donna tem uma proporção de zero, 0,58. A altura x é bastante grande dentro da altura total da letra. Existem várias calculadoras disponíveis on-line para descobrir a proporção de seus tipos de letra. Gosto muito desta página que compartilharei com vocês. E eu gosto porque posso colocar o nome de qualquer família de fontes e meia no meu computador para que eu possa calcular todos os tipos de arquivos de fonte malucos e maravilhosos que eu tenho. Agora, se estivéssemos, por exemplo, usando Verdana e Garamond juntos, ou se estivéssemos usando uma fonte de fallback para a outra, então gostaríamos que eles pareçam aproximadamente do mesmo tamanho e tivessem um ritmo semelhante descendo a página. Algo sobre o qual falaremos um pouco mais tarde. Se, por exemplo, tomarmos 16 pixels, dizemos que temos alguns Vedanta com 16 pixels de altura. Podemos vezes que 16 por zero, 0,58, e isso nos dá um número como 9,28. Esta é a altura x da Verdana com 16 pixels de altura. Agora, se dividirmos isso por 0,38, que é a proporção de Garamond, obtemos o número vinte e quatro quarenta e dois. Vinte e quatro pontos quarenta e dois é um tamanho muito bom para fazer Garamond, se quiséssemos parecer aproximadamente do mesmo tamanho que 16 pixels para Donna. Agora, como você verá que eu sou bem do mesmo tamanho. E parte do motivo é porque escolhi duas fontes como a extremidade oposta do espectro, e elas nem se parecem parecidas de forma alguma. O Garamond é muito grande em comparação com o Vedanta. Mas também há algumas outras coisas. Garamond é um tipo de letra bastante aberto, tem grandes bolas e aberturas abertas, tem linhas pesadas bastante pesadas e bastante variedade lá também. Há vários aspectos desse tipo de letra que são um pouco mais difíceis quantificar por esses motivos em casos como este, posso confiar no meu olho um pouco mais do que na matemática. Talvez eu reduza o tamanho da gordura Garamond um pouquinho. Agora, por enquanto, só precisamos fazer todas essas coisas que acabei de dizer manualmente. Mas em algum momento em um futuro não muito distante, existe uma regra CSS que faz isso por nós. Ajuste do tamanho da fonte. Agora, se eu tivesse algum Garamond e lhe desse um valor de tamanho de fonte ajusta nada, 0,58 nada ponto cinco oitavos sendo a proporção de Verdana, então dê a ele um tamanho de fonte de 16 pixels, e ele o tornaria automaticamente 23,2 pixels de altura. Para mim, essencialmente, nosso navegador fará essa pequena equação que acabamos de fazer por nós. A primeira coisa que temos controle quando estamos pensando em quão redobráveis nossas texturas é o tamanho da fonte, mas os tamanhos da fonte, não é realmente um interesse para nós. A altura x ou a proporção da fonte é o que é interessante para nós. Podemos descobrir a proporção de fontes usando uma calculadora de proporção online. E então podemos fazer ajustes nos tipos de letra que usamos juntos para que eles tenham a mesma altura x em vez da mesma altura. No entanto, sempre queremos ter certeza de que usamos nossos olhos, confiamos em nossos olhos e treinamos nossos EI. Porque se você tivesse algo como Garamond e Verdana, há tamanhos tão drasticamente diferentes que quando você tenta torná-los uniformes, eles sempre parecerão um pouco fora. Realisticamente, essa é apenas uma das muitas coisas que você deve considerar quando encontrar fontes que funcionam bem juntas. 5. Distância de visualização: No último vídeo, estávamos falando sobre como definir seus pixels altos para um tipo de letra com base em suas alturas x ou sua proporção. Claro, não queremos medir as coisas em pixels, não mais porque todos os nossos monitores agora funcionam com base em pixels de referência. Um pixel de referência tem apenas o mesmo tamanho de um pixel se você estiver usando um monitor de área de trabalho, e é um monitor de 96 DPI, a resolução da tela afeta quantos pixels um pixel de referência é, mas o mesmo acontece com a distância dos dispositivos do rosto do usuário. Infelizmente, diferentes dispositivos e monitores diferentes podem mostrar pixels de referência para o tamanho correto com resultados variados. Então vale a pena entender como eles funcionam. Falaremos mais sobre como fazer referência aos tamanhos de nossos textos mais tarde. Mas antes disso, quero abordar um ponto sobre design que adoro dizer, que é que os designers não devem se importar com o mundo real. Devemos nos preocupar com a percepção das pessoas sobre o mundo real. A quantidade de pixels na tela não é. O importante é a quantidade de pixels em seu olho. Gosto de me referir a estes como pixels perceptivos, mas a astronomia e a navegação já tinham um termo para isso, que são minutos de arco de minutos de arco. Um arco minutos é basicamente o número de graus que a terra gira em um minuto, o que é quase exatamente 160º de um grau. Então, por que estou falando com você sobre esse termo que astrônomos e navegadores usam? Bem, a razão pela qual os astrônomos falam sobre minutos de arco é porque vamos falar sobre o que podemos perceber da terra. Um minuto de arco é praticamente um dos nossos pixels perceptivos. É o quanto podemos realmente ficar com nossos olhos. Se você imaginar sua cabeça agora como a Terra, você imagina a visão de 360 graus que você tem. Se você virar a cabeça e olhar para cima e para baixo. Se você fizer qualquer movimento de um grau para cima e para baixo, e apenas um movimento de grau para a esquerda e para a direita. E você divide os dois por 60. Você acabou de criar basicamente a grade de pixels. Isso é o que você realmente pode ver. Se algo tiver menos da metade do tamanho de um minuto de arco, não podemos vê-lo. E a razão pela qual medimos em graus ou minutos de arco é porque a distância da nossa IA faz uma grande diferença em quão bem podemos vê-la. Então, digamos que estávamos medindo algo em pixels e estava em uma tela, em um monitor. monitores geralmente estão a 60 centímetros do rosto do usuário. Portanto, 16 pixels de altura nesse monitor seriam 24 minutos de arco. Vou te dar os cálculos para isso mais tarde. Agora, se mostrássemos o mesmo texto de 16 pixels na tela de um celular, que normalmente mantemos cerca de 30 centímetros do nosso rosto. Isso seria mais próximo de 48 minutos de arco. E em um iPad, 45 centímetros do nosso rosto estariam olhando para 36 minutos de arco. Portanto, este diagrama mostra a diferença no tamanho do texto se cada um desses dispositivos mostrando pixels reais e todos eles tiverem a mesma resolução de forma realista, porque você mantém seu telefone mais próximo no seu rosto, normalmente tem uma resolução mais alta. Na verdade, a Apple deu ao iPhone uma tela Retina de 300 pontos por polegada ou pixels por polegada, precisamente porque você o segura 30 centímetros do seu rosto. E isso significa que um pixel é quase exatamente um minuto de arco, tornando-o a mais alta qualidade percebida possível para uma tela de celular. Como outra nota lateral, você pode ter notado esse símbolo engraçado após os números em vermelho. Essa coisa ligeiramente inclinada que se parece com uma única aspas. Esta não é uma única aspas, pois um símbolo primo é usado para duas coisas em tipografia. É usado para dizer um certo número de pés, e é usado para dizer um certo número de minutos de arco. Você também pode abreviar isso escrevendo 48 AM, 48 amém ou 48 homens de arco. Todos esses são padrões aceitáveis. Sim, essa foi uma maneira muito complicada de dizer que as coisas que estão mais longe parecem menores. Mas isso foi, então eu poderia apresentá-lo a uma dessas calculadoras úteis. Você coloca sua distância de visualização, que normalmente será de 30 centímetros, 45 centímetros ou 60 centímetros para uma tela de telefone, iPad ou TV, talvez queira calcular um pouco diferente uma tela de relógio ou se você estiver lidando com interfaces de TV ou filmes, então, no tamanho percebido, você pode dizer 20 ou 22 minutos de arco. 28 a 22 minutos de arco é acordado para ser um tamanho bastante confortável para leitura, mas vou dar-lhe alguns cálculos melhores para isso muito mais tarde. E isso lhe dirá o tamanho físico que os textos precisariam estar em algo a essa distância se você quiser ver É em muitos minutos de arco. Uma coisa que você notará sobre qualquer uma dessas calculadoras é que a saída não está em pixels e isso ocorre porque pixels em tamanho físico não definido. Depende da tela. Ou é hora de voltarmos para referenciar pixels. Se eu olhar para o tamanho percebido aqui, você notará que uma das opções é pixels de referência aqui. Você também notará que infelizmente não é nada traduzível de um arco minutos. O tamanho acordado de um pixel de referência infelizmente não tem nada a ver com nossa percepção. É baseado em uma tela de 96 pixels por polegada, que estamos vendo a 60 centímetros de distância, puramente porque esse é o tamanho padronizado de um pixel. Nos primeiros dias da Internet, um pixel de referência é igual a 1,2789 minutos de arco. Portanto, é um pouco maior do que um pixel perceptivo ou o que podemos ver. E também é igual a cerca de nada ponto em nada 213 graus. Seria muito útil para designers que se preocupam com a percepção se eles apenas fizessem um pixel de referência do mesmo tamanho que um arco minutos. Mas não vamos falar muito sobre pixels de referência de qualquer maneira, vamos tocar nele um pouco no módulo de implementação, mas não vamos falar muito sobre eles. E isso porque não há muito uso, porque dispositivos diferentes não os adotaram perfeitamente. Um grande papel do desenvolvimento de design e front-end nunca é confiar em um computador. Você tem que entender o que ele está fazendo nos bastidores porque muitos deles vão fazer errado. Se combinarmos tudo o que sabemos sobre arcminutes e tudo o que sabemos sobre proporção ou a altura x do nosso texto, devemos conseguir alguns cálculos muito bons para nossa tipografia. Olhamos para mais uma coisa. Se dermos uma olhada neste artigo no Journal of vision de alguns experimentos que foram feitos em eficiência de leitura, velocidade de leitura, podemos obter um cálculo muito bom quão grande nossos textos devem ser. Se quisermos que as pessoas leiam com eficiência, estaríamos realmente punindo nossos leitores se fizéssemos o menor possível para que fosse legível, queremos que seja confortável e fácil para eles lerem rapidamente. A altura x ideal para eficiência de leitura em seu site é de nove minutos de arco para o tamanho da altura x. Isso é baseado na pesquisa que descobre que o tamanho perfeito é de seis minutos de arco. Mas vamos aumentar um pouco. Então, vamos nos certificar de que estamos atendendo a todos os olhos. Na verdade, se você estiver fazendo um aplicativo onde os usuários talvez sejam um pouco mais velhos ou talvez tenham um problema difícil de ver. Você pode querer empurrar isso até 12 minutos de arco. Mas geralmente o tamanho recomendado é nove minutos de arco para a altura x. Agora, se por exemplo, trazemos Vedanta e Garamond de volta. Podemos simplesmente vezes nove pela proporção desses dois tipos de letra. E isso faria Garamond 24 minutos de arco e total, enquanto Madonna é de apenas 16 minutos de arco no total. Ou colocar isso de volta em uma medida que todos possam entender. Podemos observar pixels de referência. Garamond teria 18,8 pixels de referência, enquanto para Donna seria de 12,5 pixels de referência. Isso faria Garamond 2,4 milímetros em um celular e 4,2 milímetros em um desktop. E isso faria para Donna 1,4 milímetros em um celular e 2,8 milímetros em um desktop. Podemos ver que o tamanho recomendado é bem diferente. Na verdade, nenhum deles é tão próximo de 16 pixels de referência. Agora, gostando ou não, ainda precisaremos de pixels de referência de tempos em tempos. Então, como calculei esse último número? Sabemos que um pixel de referência é igual a 1,2789 minutos de arco. Então, se você dividir nove por 1,2789, você terá algo em torno de sete. Então, poderíamos dizer que sete pixels divididos pela proporção oferecem a altura de pixel de referência ideal para o tipo de letra. Como designers, estamos muito mais preocupados com os pixels que as pessoas veem do que os que estão na tela. Portanto, não medimos as alturas do texto usando os pixels na tela. Fazemos isso usando arcminutes, que é 160º de um grau das poucas semanas e vemos nosso redor quando movemos a cabeça. O tamanho ideal para o texto para as pessoas lerem de forma rápida e eficiente é entre 612 minutos de arco. Idealmente, buscamos nove bem no meio para que estejamos atendendo a todas as pessoas. Se você tiver alguma informação que comprove que a maioria de seus usuários tem uma visão particularmente boa ou uma visão particularmente ruim. Você pode querer mover isso um pouco mais para um dos dois extremos. Caso contrário, geralmente iremos apontar para uma altura x de nove minutos de arco. Oi, não há como o dispositivo que estamos vendo sabe o quão longe nossos rostos. Embora as pessoas tenham tentado desenvolver pequenos pedaços de tecnologia que farão isso. Então, temos que lidar com as unidades de medida que o CSS nos dá. Vamos olhar para eles um pouco mais tarde. Tudo o que precisamos nos preocupar por enquanto é que não há tamanho mínimo para tipografia. Depende do dispositivo e da distância que as pessoas geralmente mantêm esse dispositivo de seu rosto. E que podemos usar uma calculadora de tamanho de minuto de arco para que possamos obter um tamanho uniforme entre celular, tablet e desktop e possivelmente TV e relógios. Devíamos querer. 6. Texto grande para texto grande.: Agora sabemos que o tamanho ideal para nossos textos, para a pessoa média lê-lo de forma rápida e eficiente é que a altura x deve ser de nove minutos de arco. Oi, mas e o resto do texto na página? E os cabeçalhos ou o texto nos botões? Todas essas coisas precisam se destacar um pouco porque o texto do botão ou outros elementos da interface são coisas que vamos escanear em vez de estar lendo ativamente e os títulos precisam pegar nosso atenção e jurados em. Bem, legibilidade não é nossa preocupação com esses outros pedaços de texto ou botão tem duas palavras nele pode ser o título tenha mais cinco ou seis palavras. Não estamos nos preocupando se é eficiente para alguém ler aqueles com elementos de interface do usuário estavam preocupados se for fácil identificar fora do canto do nosso olho e com os cabeçalhos estavam preocupados se isso tiver impacto e ele define o tom da mensagem do resto do texto. Essencialmente, podemos tornar todas essas coisas um pouco maiores do que o que é confortável para grandes áreas de leitura, porque isso resolve outros propósitos. No entanto, há outras coisas a serem levadas em consideração que não são sobre legibilidade, mas se encaixam muito bem com o que estávamos falando. Uma coisa que você deve ter notado sobre todos esses dispositivos diferentes. Seu relógio, seu celular, seu iPad, seu monitor, sua televisão, são o tamanho deles. Quanto mais longe eles estão do seu rosto, maiores eles são. E eu não quero dizer apenas como eles são fisicamente grandes. Quero dizer, eles ocupam mais minutos de arco se estiverem mais longe. Se você estiver sentado em um confortável 60 centímetros do monitor agora e segurar seu celular ou confortável a 30 centímetros do seu rosto, você notará que ainda pode ver seu monitor, seu celular cobre talvez um quarto da tela. Se você tiver um telefone enorme para a maioria dos nossos ativos, menos ainda. Então, podemos dizer que temos muito mais minutos de arco disponíveis em uma tela de desktop do que em uma tela móvel. Novamente, provavelmente um pouco óbvio, mas você pode querer perguntar por que geralmente não gostamos de ter grandes coisas muito próximas aos nossos rostos. Idealmente, também não queremos grandes manchetes obstrutivas empurradas na nossa cara. Se você olhar para um outdoor, o texto grande é enorme e o texto pequeno é bem pequeno. A proporção entre os textos do cabeçalho e o corpo do texto em um outdoor é enorme. Claro, um outdoor tem um propósito bem diferente de um celular. Mas você notará que quanto menor o dispositivo e quanto mais próximo você o segura em seu rosto, também, menores serão os títulos. Se tivermos um grande texto de banner na página inicial de um site ou um cabeçalho na parte superior de um aplicativo da Web. O número de minutos de arco reduzirá nos dispositivos que mantemos mais próximos de nossos rostos. Simplesmente temos menos minutos de arco disponíveis na tela. E também não gostamos de ter coisas grandes muito perto do nosso rosto. Outra coisa a tomar nota com grande tipografia, você deve ter notado alguns monitores nos dias de hoje, algumas TVs e monitores elegantes reais foram curvos e se perguntam qual é o ponto neles? Bem, aqui está um ponto interessante para você. Se seus olhos estão posicionados no momento bem no meio da tela, você terá mais minutos de arco no meio da tela, então você está no canto superior esquerdo da tela, por exemplo. Porque a parte superior esquerda da tela está um pouco mais distante do que o meio. E por causa disso, tudo parece se inclinar para fora tão ligeiramente. Há um tipo de distorção da lente. Quando o Partenon foi construído na Grécia antiga, eles o construíram para que nenhuma das paredes seja reta. Não há linhas retas no Partenon. Tudo sobre o Partenon corrige tão ligeiramente para esse tipo de distorção da lente que nossos olhos têm quando os primeiros tipos de letra foram cortados, quando as peças de metal físicas reais do tipo foram cortadas, as letras maiores foram capturadas com um peso óptico diferente das letras menores para corrigir esse tipo de distorção de lente que temos em nosso olho. Eu mencionei isso antes. Se você olhar para um tipo de letra de antes do século 20, quando o processo de corte do tipo era um pouco mais manual, o cortador de tipo daria um tamanho óptico menor ou óptico aguardando as letras maiores. Você teria que ser uma tipografia muito afiada e pura para querer fazer algo semelhante a isso hoje, mas isso é praticamente possível. Agora, com tipos de letra variáveis, há várias razões quando estamos trabalhando nosso sistema tipográfico para que não faremos com que o tipo de letra cabeçalhos seja o mesmo tipo de letra que o corpo. Mas um deles realmente deveria ser que eles realmente não parecem iguais de qualquer maneira. Há um punhado de famílias de fontes disponíveis em que o designer de tipos fez uma pequena variação para o cabeçalho e para o corpo do texto para que você possa usá-los em tamanhos diferentes. Esta é uma ótima opção se você quiser usar o mesmo tipo de letra para os textos de cabeçalho e o corpo do texto sem parecer um pouco estranho e distorcido para nós. Falaremos sobre isso um pouco mais tarde. Para texto do cabeçalho ou texto da interface do usuário. Não precisamos nos preocupar muito com o quão fácil é ler, porque normalmente não são muitas palavras, desde que esteja acima do tamanho de legibilidade que falamos no último vídeo. Não queríamos estar cientes, porém, que telas diferentes têm quantidades diferentes de minutos de arco em geral, quanto mais perto as seguramos nosso rosto, menor a tela. E, portanto, devemos tornar esses pedaços maiores de tipografia um pouco menores em comparação, porque não é tão essencial que eles pulem para nós quando estamos segurando isso mais perto do nosso rosto. E não temos tanta tela imobiliária. E como uma aula de topografia super avançada, falei um pouco sobre como o dimensionamento óptico vai parecer um texto maior e maior por causa do fato de que algo que é mais arcminutes grande tem um pouco de distorção da lente. Se quiséssemos usar o mesmo tipo de letra para os cabeçalhos e o corpo, podemos escolher uma família de fontes que tenha uma fonte de cabeçalho específica, que na verdade terá uma óptica ligeiramente inferior dimensionamento. E muito mais tarde entraremos no tópico realmente emocionante de fontes variáveis, o que pode nos permitir controlar esse dimensionamento óptico em um nível muito mais granular. 7. Comprimento da linha: Agora temos um bom cálculo para calcular o tamanho de fonte ideal para grandes corpos de texto. A próxima medida que eu quero observar que ajuda na legibilidade é o comprimento da linha. Medimos o comprimento da linha em caracteres por linha. Mas como quantos caracteres, incluindo os espaços aparecem em cada linha, você provavelmente já ouviu alguma regra em algum momento que diz que deve haver 50 a 70 caracteres por linha para o comprimento ideal da linha. Eu digo algo como 50 a 70 caracteres por linha porque cada regra que eu já ouvi assim tem números ligeiramente diferentes. Eles são todos baseados em algumas pesquisas de volta em 1971 que diziam que o comprimento ideal do personagem está entre 5075 caracteres por linha. E, idealmente, você quer mirar em cerca de 60 caracteres por linha. E essa é uma dessas regras por que você não pode simplesmente aprender sobre tipografia se estiver lidando especificamente com tipografia na web, porque eles não estavam testando com tipografia na web em 1971. E quando as pessoas finalmente começaram a testar em 98 e, em seguida, no início dos anos 2000, descobriram que o comprimento ideal da linha para tipografia em um display digital era de 95 caracteres por linha. Isso é 95 caracteres por linha é o comprimento ideal para velocidade e eficiência de leitura se você estiver lendo fora uma tela do computador agora antes de se apressar e ir e mudar cada design digital que você já feito para fazer com que os textos sejam 95 caracteres por linha. Há algumas outras coisas que acredito que devemos considerar. Em primeiro lugar, ainda estamos falando sobre legibilidade. A legibilidade foi um tipo de usabilidade e há uma coisa diferente que os designers pensam sobre muita experiência do usuário. Quando as pessoas veem um bloco de texto na tela de um computador, elas sentem que vão ler de forma mais rápida e eficiente com um comprimento de linha menor do que 95 caracteres por linha. E eles sentem que estão progredindo mais. Parece que eles estão lendo mais rápido, mesmo que não estejam. Talvez seja por causa da sensação de progresso que temos quando chegamos ao fim da linha e nossos olhos voltem ao início da próxima linha. Ou talvez seja essa sensação satisfatória quando chegamos a rolar o botão do mouse para baixo, sabendo que concluímos a leitura uma tela inteira por quaisquer que sejam as razões pelas quais devemos estar cientes de 95 caracteres por linha pode ser o melhor comprimento de linha aceito para legibilidade em uma tela de computador, mas isso não significa que seja o melhor para a experiência dos usuários. Também queremos estar cientes de que os caracteres por linha são potencialmente bastante ambíguos. Quando estávamos olhando para o tamanho do nosso texto, veremos um arco minutos e estávamos olhando para a proporção. Existem alguns tipos de letra que são muito mais finos do que outros tipos de letra. Temos letras grandes e minúsculas letras finas, dependendo do tipo de letra escolhemos. E é possível que lemos mais rápido em um comprimento de linha mais longo na tela do computador, porque a tela do computador é tipicamente a 60 centímetros do nosso olho, enquanto o material impresso como um jornal , revista ou um livro são tipicamente a cerca de 45 centímetros do nosso olho. Isso é, claro, toda especulação. Meu ponto é que nenhuma das pesquisas que temos atualmente sobre o comprimento da linha é precisa o suficiente para usarmos como uma regra sólida. Eu acredito que este é um dos poucos casos em que você pode ignorar um pouco a ciência e ignorar um pouco a experiência do usuário, e ver o que a maioria das pessoas está fazendo em seus sites para ver o que nosso os usuários estão mais acostumados. E isso é de volta ao quadrado um entre 4575 caracteres por linha. Se você está, no entanto, lidando com fontes chinesas, japonesas e coreanas, você quer apontar para algum lugar em torno 15 a 30 caracteres por linha para algo sobre a distância do livro do iPad seu rosto ou todo o caminho até 40 na tela do computador. Eu recomendaria empurrar para a extremidade superior desses números, porque cada vez mais sites estão fazendo emprestos de linha mais longos, possivelmente com base na ciência ou possivelmente por outros motivos. Portanto, as pessoas de horas extras estão se tornando mais acostumadas a ler comprimentos de linha mais longos nas telas do computador Mac. E isso tornará a leitura mais rápida e eficiente para seus usuários, se esse for o seu objetivo. Por essas razões, eu recomendaria tentar mirar cerca de 75 caracteres por linha em uma tela de computador. E agora provavelmente podemos especular que 60 caracteres por linha são muito bons para um iPad, porque sabemos que esse era o comprimento ideal para material impresso e esse é aproximadamente o mesmo lugar que nós seguraríamos um iPad. E então queremos reduzi-lo um pouco mais quando passamos para um monitor móvel, possivelmente em algum lugar na região de 50 caracteres por linha. E, novamente, esteja ciente de que esta não é uma ciência exata em que eu disse que os experimentos são baseados, mas também esteja ciente de que quando outras pessoas tentam dizer a quantidade correta de caracteres por linha, eles também não estão baseando isso em uma ciência exata. O que seria absolutamente brilhante como se pudéssemos variar a linha um pouco com base na largura dos caracteres no tipo de letra. E, felizmente, com CSS, podemos fazer isso porque podemos controlar a largura usando unidades EM em vez dizer quantos caracteres por linha, por exemplo. E veremos isso um pouco mais depois, quando implementarmos o tipo de coisa que estamos falando agora. Medimos o comprimento da linha com caracteres por linha, e esses são todos os caracteres especiais, todos os espaços, cada caractere que existe na linha. Pesquisa original descobriu que 50 a 75 caracteres por linha é o melhor para velocidade e eficiência de leitura. Mas isso foi baseado na impressão. Ao olhar para a tela de um computador, verifica-se que os caracteres ideais por linha são 95. No entanto, as pessoas sentem que estão progredindo mais com linhas mais curtas. E, portanto, uma linha mais curta pode ser uma melhor experiência do usuário, mesmo que seja pior para a legibilidade. E é amplamente acreditado, mas ainda não provado que gostaríamos menos caracteres por linha à medida que movemos o dispositivo para mais perto do nosso rosto para tentar combinar isso com o que nossos usuários são atualmente usado para usar outros sites. Eu recomendaria pessoalmente usar algo como 75 caracteres por linha em um desktop, 60 caracteres por linha em um iPad e, em seguida, 50 em um dispositivo móvel. Mas você vai querer ajustar isso um pouco para cima ou para baixo, dependendo se você preferiria que seu usuário tenha uma experiência melhor ou se deseja que ele leia mais rápido. 8. Altura da linha: Temos algo que parece uma equação exata para calcular o tamanho da fonte. Podemos querer brincar um pouco com ele. Quando olhamos para isso, temos algo que é uma espécie de equação para trabalhar o comprimento da linha, mas em grande parte baseado no que maioria das outras pessoas está fazendo em vez do que é melhor para o leitor. E então, quando olharmos para a altura da linha, será quase inteiramente por mim e confiando em nosso próprio julgamento, estamos ficando lentamente menos científicos à medida que trabalhamos em cada uma dessas seções quando nós escreva nosso CSS. E, portanto, no desenvolvimento web nos referimos a isso como alturas de linha. Mas geralmente designers ou qualquer pessoa que esteja lidando com tipografia referem-se a isso como líder. E isso porque ele colocaria pequenos pedaços finos de chumbo entre as linhas das fontes de metal de estilo antigo. Para entender os problemas em torno de alturas de linha ou leitura, precisamos entender o que é que torna mais eficiente para as pessoas lerem uma linha mais longa de textos em um monitor de computador. Nossos olhos não param em cada letra e eles provavelmente nem param em cada palavra, dependendo da rapidez com que você lê. Fazemos esses movimentos oculares sacádicos onde nossos olhos saltam de um ponto para o outro, que encontra varredura possivelmente três ou quatro palavras de cada vez antes de dar outro salto. Eu mencionei isso antes. É por isso que com algo como Futura, você não pode ter um OH e um que parecem muito semelhantes porque eles provavelmente não estão no centro do seu campo de visão e possivelmente um pouco embaçado. Agora, para fazer nosso movimento ocular sacádico para o próximo lugar ideal para nós captarmos o número ideal de palavras que podemos. Na verdade, é meio complicado. Temos que saber exatamente as alturas da linha, o comprimento da linha e o tamanho da fonte. Enquanto o lugar ideal para saltarmos em I2 em seguida, esse movimento sacádico dos olhos será muito mais fácil se estivermos fazendo um pequeno salto ao longo de uma linha reta, então, se estivermos dando um grande salto, um ângulo de volta ao início da próxima linha. Mesmo o leitor mais proficiente vai saltar de vez em quando, especialmente se estiver lidando com uma altura de linha, tamanho da fonte ou comprimento de linha que eles não estão particularmente acostumados. Ter um comprimento de linha mais longo e, portanto, menos linhas significa que mais movimentos oculares sacádicos estão ao longo de uma linha plana padrão, mas adiciona o comprimento da linha aumenta. Vamos inclinar a cabeça da esquerda para a direita, todos forçando nossos olhos da esquerda para a direita para pegar todas as palavras. É por isso que sugeri no último vídeo que pudéssemos ler comprimentos de linha mais longos em uma tela de desktop do que em um livro, por exemplo, puramente porque se o tamanho do tipo for relativamente semelhante, o comprimento da linha é menos minutos de arco em um monitor. Quando se trata de alturas de linha, realmente queremos ver o que a maioria dos outros sites está fazendo. E a maioria dos sites diz que a altura da sua linha deve ser cerca de 130 a 150 por cento da altura do texto. Por exemplo, se você decidiu que 140% é a melhor altura da linha e a altura do texto era de 20 minutos de arco. Oi, você estaria apontando para uma altura de linha de 28 minutos de arco. Quais são os fatores que nos diriam para fazer uma alturas de linha de 150 por cento em comparação com 130% da altura da linha. Bem, a primeira coisa é que se o comprimento da sua linha for relativamente longo, você quer um pouco mais de altura da linha. Isso significa que quando você faz esse movimento do olho sacádico volta ao início da próxima linha, os ângulos não são tão apertados. Também está adicionando um pouco mais de espaço para respirar, um pouco mais de espaço em branco em torno do que, de outra forma, seria um bloco escuro de texto bastante denso. Agora vamos ver isso mais tarde, mas uma técnica comum é olhar para uma página de texto e apertar os olhos um pouco ou adicionar um filtro de desfoque à página. Idealmente, queremos que a página tenha um tipo bastante consistente cor cinza em vez de grandes áreas pretas, escuras, grossas e densas. Ao olharmos para um bloco de texto, a maior parte do texto não está no centro do nosso campo de visão, portanto, está parecendo embaçado. Queremos que esse texto pareça agradável para o nosso usuário e também não pareça assustador e assustador. Então, por esse motivo, se escolhermos um tipo de letra como o Vedanta, que tem uma altura x muito alta. Portanto, por definição, tem ascendentes e descendentes muito pequenos. Portanto, queremos um pouco mais de altura de linha para esses tipos de letra com uma grande altura x. Porque quanto mais próximos eles se aproximam, densos estamos fazendo a cor na página e mais assustador estamos fazendo a coisa toda procurando é usuário. Se tivermos uma taxa de proporção maior, uma maior relação x altura/altura do tipo de letra. Também queremos aumentar um pouco essa altura da linha. Então, finalmente, a única coisa que nos fará mudar a altura da linha é puramente baseada em nós olhando para ela. Precisamos começar a confiar nossa própria percepção em algum momento e ver quão denso e assustador isso parece na página. modo geral, se você tiver dúvidas sobre duas alturas de linha possíveis para um bloco de texto, provavelmente vá para a maior. Você não está realmente se preocupando com imóveis quando está lidando com aplicativos da web digitais. E se funcionar melhor, sinta-se à vontade para empurrá-lo acima de 150 por cento. Eu vi muitos sites muito bons empurrar todos os microfones até 200% de altura da linha. Você nunca quer manter rigidamente nenhuma dessas regras ou qualquer outra regra. Se funcionar bem, então funciona bem o que você deve fazer dependendo de quão experiente é o usuário na leitura, eles farão movimentos oculares sacádicos ou saltos de diferentes tamanhos ao longo da linha até um determinado comprimento de linha. Esses saltos são mais fáceis e precisos do que saltar de volta para a próxima linha. Se o comprimento da linha for relativamente longo, estaríamos fazendo o movimento do olho sacádico para a próxima linha, um ângulo muito mais apertado. Então, queremos aumentar a altura da linha à medida que aumentamos o comprimento da linha. Uma técnica comum que veremos mais tarde para avaliar nossos blocos de texto é desfocar a tela. O bloco de texto deve ter uma cor relativamente consistente, mas também não deve ser muito escuro em nenhuma regra 0,1 para reduzir a densidade dessa cor se você estiver lidando com um tipo de letra com uma grande altura x, também adicionou mais altura da linha. Um tipo de letra com uma grande altura x naturalmente tem mais da maior parte do tipo de letra. Mais perto da próxima linha, apenas adicionamos um pouco mais de espaço para respirar lá. Na verdade, vamos basear a regra da altura da linha muito mais em nossa própria percepção e nossos próprios olhos estavam buscando algum lugar em torno de cento e trinta, cento e cinquenta por cento do texto altura. E estamos fazendo isso principalmente porque é isso que a maioria dos outros sites está fazendo. Existem muitos sites que ultrapassam isso, 150 por cento até 170, ou às vezes até um pouco mais. Portanto, sinta-se à vontade para ultrapassar esse limite superior se ele funcionar bem em sua aplicação. 9. Localização: Ao longo desta seção sobre legibilidade, tenho falado exclusivamente sobre tipografia latina ou texto em latim. E o que quero dizer com isso é o alfabeto que você está vendo atualmente na tela. Você pode, de tempos em tempos, ouvi-lo chamado de alfabeto romano. Estou evitando isso porque a palavra Roman já significa algumas coisas em tipografia. Agora algumas coisas rápidas sobre nosso alfabeto latino. É meio estranho. Um único glifo. Lembre-se, um glifo é uma das formas, um dos símbolos no alfabeto pode ser um som fonético. Então, por exemplo, como o H faz um som, ele pode ser combinado com diferentes glifos como o th dos dois, criar um som fonético para múltiplos glifos. Quando colocamos um espaço, isso significa que uma palavra terminou e a próxima começou. Mas também temos palavras compostas como somos. Podíamos dizer onde e às vezes podíamos colocar um apóstrofo ou um hífen para dizer que as palavras sendo compostas e às vezes não, um glifo poderia ser uma palavra inteira como, por exemplo, I. E, em muitos aspectos, o alfabeto latino é bastante estranho, e provavelmente a língua inglesa é a mais estranha de todas. Mas só para entendermos algumas das regras, primeiro lugar, sempre vai da esquerda para a direita. Nunca vai de cima para baixo. Nunca vai da direita para a esquerda. E começamos a próxima linha. Se olharmos para esta frase aqui, como a pandemia do vírus do coronavírus mudará? Ramadã para muçulmanos, o texto latino geralmente sempre quebra em um espaço a menos que haja uma palavra particularmente longa onde nós, pode colocar uma hifenização n, onde você tem um pouco de hífen no final de uma linha para dizer que a palavra quebrou na linha. Agora, essas regras podem mudar bastante para diferentes idiomas. Na verdade, mesmo apenas aquela regra de hifenização que mencionei, algumas linguagens podem ter o hífen no início da próxima linha. E alguns idiomas podem ter uma hifenização no final de uma linha e no início da próxima. Agora, quando criamos nosso resumo, eu disse que é importante saber para quais idiomas você está criando, mas também se você estiver conversando com seu cliente sobre idiomas, há uma grande quantidade algumas coisas sobre as quais você quer falar com eles porque algumas regras de idiomas são menos rígidas do que outras. Através do resto deste vídeo, vou te dar algumas coisas rápidas para procurar quando você estiver lidando com diferentes idiomas, seria impossível para mim saber, muito menos explicar para você cada regra com cada alfabeto. Provavelmente são tantos alfabetos no mundo quanto há vídeos em todo este curso. Agora, um óbvio que você pode ter que lidar. Você deve ter notado que eu configurei meu navegador para árabe. As guias estão nos direitos superiores. Todos os botões e tudo são o contrário. E se eu olhar para os sites da Al-Jazeera em árabe, você pode ver que todos os textos que vão da direita para a esquerda como designer e definitivamente como desenvolvedor, vale a pena notar também estão dizendo que geralmente tudo muda da direita para a esquerda. Então, o ícone de pesquisa, que normalmente estaria no canto superior direito agora está no canto superior esquerdo, geralmente mudaríamos um valor e a parte superior do HTML para dizer que é texto da direita para a esquerda, então que podemos criar facilmente todos os estilos para isso. Falaremos mais sobre isso na seção de implementação. Mas vale a pena estar ciente se você é um designer que às vezes pode precisar criar os designs árabes separados do resto dos designs para outros idiomas. Porque os botões, etc., vão se mover da esquerda para a direita para a direita para a direita com frequência ou certamente os lugares da maioria em que trabalhei. Normalmente, não é o caso um designer criar designs separados para o árabe. Nós simplesmente desenvolveríamos tudo para mudar para o outro lado. Mas tudo depende do cliente com o qual você está trabalhando. De um modo geral, o texto em árabe aparece aproximadamente do mesmo tamanho que os textos latinos. Portanto, a menos que haja uma boa razão, você normalmente pode manter os mesmos tamanhos de texto e alturas de linha, mas isso pode depender muito tipo de letra que você está usando para os textos árabes. Uma última coisa a ser consciente com árabe é porque você está indo da direita para a esquerda. Se você deve citar algo no meio de alguns textos árabes em um idioma diferente que vai da esquerda para a direita. Esse texto ainda será lido da esquerda para a direita ou vice-versa. Se você citar algum árabe no meio de um texto de idioma diferente, esse texto ainda vai para a direita para a esquerda. Está tudo bem. Pode ser uma coisa muito difícil de lidar. Mas uma coisa a ter cuidado é se ela quebrar uma linha, você pode acabar tendo uma quebra de linha em uma direção diferente. Se alguma vez tivermos aspas em um alfabeto que vai em uma direção diferente no meio de alguns textos. Idealmente, queremos envolvê-lo em algum tipo de extensão para impedir que ele tenha uma cotação MIT de quebra de linha. texto em japonês é possivelmente o único idioma, o alfabeto onde você pode querer aumentar um pouco o tamanho. Às vezes, as pessoas aumentam o tamanho do texto cerca de 15% puramente porque o traduziram para japonês. E isso porque há muitos personagens incrivelmente complicados com o chinês, há uma versão simplificada do alfabeto. Às vezes, com o japonês, existem certas letras ou certos glifos que você não pode evitar. Muitas vezes, as pessoas podem aumentar o tamanho. Outra coisa com o japonês é que não há necessariamente espaços. Estou no site da BBC agora e às vezes há espaços, mas exatamente quando e onde eles aparecem podem ser ligeiramente debatidos. É totalmente aceitável escrever japonês sem espaços. E esse pequeno sinal de pontuação do círculo é ocasionalmente usado para marcar o final de uma frase um pouco como uma parada completa. Agora, algo sobre o qual falaremos mais tarde é pendurar a pontuação. Se esse pequeno símbolo de círculo aparecesse, por que no final da linha aqui, ele não quebraria em uma nova linha. Ele iria pendurar a margem como ela apareceria na área branca à direita, muitas vezes você vê as pessoas pendurando pontuação quando escrevem uma citação em textos latinos, porque a aspas irá normalmente aparecem no início da linha. E, portanto, a aspas paira sobre a margem para o lado esquerdo. Então, parecerá empurrar para fora para a margem. Embora tenhamos a mesma regra com o japonês, este pequeno círculo aqui, há parada total ou sair na margem se aparecer no final de uma linha, há uma regra CSS para linha quebra chamada quebra de linha, quebra de hífen de linha. Se definirmos isso como estrito, isso impedirá que partes de sílabas japonesas se rompam pela linha. Às vezes, um símbolo japonês pode fazer parte de uma sílaba. Muito parecido com a forma como um único glifo em inglês faz um único som fonético, mas apenas parte de uma sílaba. Podemos usar essa regra CSS, quebra de linha estrita para impedir uma parte de uma sílaba se romper para a próxima linha. Ou se quisermos que fosse completamente justificado sem espaços, podemos escrever quebra de linha, e isso permitirá que ela se rompa para o próximo slide. Existem certas regras no código exclusivo que você definiu sua página como. Normalmente, no topo da sua página, você teria algo como o Unicode igual a UTF-8. Embora existam um pouco diferentes códigos exclusivos, como ascii, esses códigos definirão certas regras para as quais glifos podem quebrar em uma nova linha e quais não podem. Eles são atualizados com bastante frequência, então não vou entrar em nenhum detalhe aqui, mas de tempos em tempos, talvez seja necessário verificar quais são as regras unicode para o que pode e não pode quebrar em diferentes idiomas . Em idiomas do Sudeste Asiático, como por exemplo, amarre os espaços não aparecem entre palavras específicas, mas na verdade aparecem no final de uma frase. O site sabe como e onde entrar em uma nova linha porque o UTF-8 agora tem regras lá sobre onde você pode e não pode entrar na próxima linha em tailandês. Mas algumas línguas do Sudeste Asiático ainda não têm funções em UTF-8, Unicode. E alguns sites ainda têm um pequeno símbolo estranho onde você costumava adicionar um espaço entre palavras sem que ele aparecesse fisicamente no site para ajudar a informar o navegador onde poderia quebrar a linha. Por exemplo, talvez em algum lugar por aqui seja o fim de uma palavra e o começo da próxima. As pessoas usam para inserir um símbolo que não tinha espaçamento visível, mas agiu como um espaço no site. Agora, aqueles costumavam ser muito problemáticos porque você poderia adicionar esses espaços não são facilmente capazes de ver que eles estavam lá. Mas você também pode adicionar vários em um só lugar sem perceber. Para a maioria dos idiomas do Sudeste Asiático, isso não é mais um problema. Mas se você estiver lidando com um locador, use a linguagem, existe a possibilidade de que ele ainda possa usar esses espaços invisíveis. Por fim, só queria dizer algumas coisas sobre coreano. Agora em coreano novamente, tem algumas regras ligeiramente diferentes sobre se você pode quebrar a palavra intermediária, cada símbolo e coreano é uma sílaba. Várias sílabas podem, é claro, fazer uma palavra. Você pode quebrar o meio da palavra? É outra coisa que você vai querer perguntar ao seu cliente ou ao seu chefe. O interessante com coreano é cada símbolo é uma única sílaba, mas cada sílaba é composta de sons fonéticos. O coreano é, na verdade, um alfabeto foneticamente perfeito. Esta primeira sílaba na primeira linha, por exemplo, diz NAM. E essa forma L é sempre um som e, em seguida, é sempre um som, e o quadrado é sempre um som. Cada um dos símbolos fonéticos é chamado de OGM e o alfabeto é chamado de Hangeul. Agora, o tipo de letra pode ser salvo de duas maneiras diferentes. Alguns tipos de letra salvam cada peça individual da sílaba, cada OGM como um glifo separado e alguns tipos de letra salvam a sílaba inteira como um glifo. A segunda opção é muito mais preferível nos dias de hoje, mas existe a possibilidade de você estar lidando com a primeira. Isso pode ser importante quando você acaba tendo que trabalhar com uma carreira e tipografia em algum momento que existem tecnicamente duas maneiras diferentes de salvar os glifos. Isso é tudo o que eu realmente queria dizer neste momento sobre localização. Há um milhão de outras coisas que eu poderia dizer. Este foi um vídeo de disparo rápido com várias coisas diferentes para fazer com alfabetos diferentes. Espero que tenha sido útil. 10. Resumo: Há vários estágios para ler, desde identificar as formas na página até combiná-las com coisas que aprendemos anteriormente , formando uma opinião. E então os lagos estão lembrando essa informação e essa opinião. Como designers e desenvolvedores, não podemos enfatizar demais o primeiro estágio, simplesmente tornando as formas fáceis de identificar. Eu me concentrei principalmente nisso também. Mas, por favor, não se esqueça que alguém que adquira informações rapidamente pode ser inútil se não formou uma opinião e se lembrar disso. Agora, espero que você forme suas próprias opiniões sobre qualquer coisa que eu tenha a dizer. Depois de escolhermos um tipo de letra, as variáveis, podemos controlar o tamanho, o comprimento da linha e a altura da linha. Podemos usar a pesquisa para melhor resolver tudo isso. Mas os ajustes finais sempre virão do seu olho treinado por especialistas. Quanto mais você praticar, melhor você terá. Às vezes, podemos entender nossos usuários o suficiente para nos afastar pouco do pesquisador. Se nosso aplicativo for para pessoas mais velhas, podemos querer tornar esse tamanho de fonte um pouco maior. Se estivermos trabalhando com acadêmicos, podemos tornar o comprimento da linha um pouco mais longo porque isso permite que eles leiam rapidamente. Bem, como essas variáveis mencionaram anteriormente, comprimento da linha, alturas de linha e tamanho da fonte, também podemos controlar o estilo, tornando-o em negrito ou itálico e colorindo o tipo de letra, por exemplo. Normalmente, usamos esses atributos para nos ajudar a criar uma melhor hierarquia visual em nossa página e adicionar mais estilo e personagem ao nosso design.