Uma introdução às fontes da Web e à tipografia da Web moderna | Simon Foster | Skillshare

Velocidade de reprodução


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

Uma introdução às fontes da Web e à tipografia da Web moderna

teacher avatar Simon Foster, Digital Lead

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

5 aulas (57 min)
    • 1. Bem-vindo ao curso, uma introdução e algum contexto.

      13:25
    • 2. Projeto principal parte 1

      9:20
    • 3. Projeto principal parte 2

      15:05
    • 4. Projeto principal parte 3

      11:33
    • 5. Como adicionar fontes self via fontsquirrel.com

      7:37
  • --
  • 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.

724

Estudantes

2

Projetos

Sobre este curso

A tipografia na web veio em saltos e limites nos últimos anos e está sempre melhorando e evoluindo. Os designers têm mais e mais controle não só sobre como eles se aproximam da tipografia, mas também das fontes que usam e dos tratamentos que eles são estilosos, mas com ótimo controle vem grande responsabilidade. A tipografia na web não é apenas sobre escolher a mais recente fonte bonita, legibilidade, usabilidade e escalabilidade de vários dispositivos devem ser equilibradas com a estética.

Quem deve cursar este curso? Este curso é para designers de web de ponta de nível iniciante que já estão aprendendo, ou prestes a aprender HTML(5) e CSS(3) e desejam aprimorar e aprimorar suas habilidades tipográficas no contexto de técnicas de design responsivo e avançado de design moderno para todos.

O projeto. Os alunos vão trabalhar em uma série de tarefas pesadas por tipo em um artigo de página da web de maquete que vou fornecer para cobrir os lados funcionais, práticos, também divertidos de trabalhar com tipo na web. Você vai aprender a usar webfonts, hospedados e de terceiros, como maximizar a readability para o usuário e fornecer fallbacks seguros para ajudar a usabilidade, mas o mais importante como realmente aproveitar a tipografia e vê-la como uma forma de comunicação emocionante.

Então, o que você vai aprender? As habilidades principais que serão aprendidas no curso são:

  • A diferença entre a boa tipografia e a escolha de uma fonte agradável.
  • Como implantar fontes da Web usando @font-face e através de serviços de terceiros.
  • Como tornar seu conteúdo consistentemente legível independentemente do dispositivo que esteja sendo usado.
  • Como usar consultas de mídia CSS(3) para aprimorar a experiência quando adequado.
  • Como combinar diferentes tipos juntos para complementar-se mutuamente.
  • Como usar seu uso de tipografia para ajudar a comunicação.
  • Como tipografia pode ser usada com imagens para grande efeito.
  • Como o design responsivo mudou a forma como vemos a tipografia da Web e como aprimorar a experiência em todos os dispositivos.

Conheça seu professor

Teacher Profile Image

Simon Foster

Digital Lead

Professor

I previously ran my own freelance web design business but nowadays I'm Digital Lead at Hamilton-Brown in Farringdon, London. I also regularly write articles, give interviews and my work is regularly featured in well respected publications such as .net Magazine and awwwards.com amongst many others. I work with brands, user experiences, interfaces, systems, products and education.

Visualizar o perfil completo

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%
Arquivo de avaliações

Em outubro de 2018, atualizamos nosso sistema de avaliações para melhorar a forma como coletamos feedback. Abaixo estão as avaliações escritas antes dessa atualização.

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui cursos 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. Bem-vindo ao curso, uma introdução e algum contexto.: - Bem-vindo a uma introdução às armas na tipografia moderna da Web. O meu nome é Simon Foster e sou um Web designer independente de Londres, Inglaterra. - Esta aula é basicamente uma introdução de iniciantes não só para o uso de armas, - mas também serve como uma introdução à tipografia moderna da Web em geral, - especialmente dentro do contexto de Web design responsivo. - Mais tarde, - Eu vou estar levando você através de um tipo de projeto simulado que será uma espécie de, - como eu digo, - o artigo simulado da Web que irá cobrir um monte de técnicas e princípios que eu uso - no meu datado o uso de tipografia e design. - Mas em primeiro lugar, - este vídeo de introdução espero colocar este carro em algum contexto, dando uma espécie de - breve visão geral de onde a topografia na Web começou e onde ela está agora. - Então, onde tudo começou? Bem, antes de termos a cara da fonte antes de termos fontes da Web e kit de tipos, convés da frente e escola de fontes. - Exceto que você está ligado antes de começarmos a entender onde essas coisas responsivas eram muito mais simples. Então nós tínhamos fundos do nosso site, que meio que deu sobre o design de uma paleta muito limitada do que você poderia usar ou ela - você poderia se desculpar. - Então, até os fundos do nosso site tivemos nossos amigos sans serif usar nossa alta aérea - Helvetica quadrinhos sem impacto exceto você. Então nós tivemos nossos telefones mono tempero que você vê lá consola e então nós somos agora fontes serif como Georgia Times novas chegando, etc. - E isso é basicamente o que tínhamos. - E não só isso, - temos uma paleta limitada de fontes. - Nós meio que estamos limitados. - A forma como os sítios Web seriam vistas são interfaces de páginas Web, excepto a Europa. Nós meio que sabíamos que eles eram vistos em um desktop ou laptop, e nós meio que sabíamos que teríamos uma e nós meio que sabíamos que teríamos umaquantidade predeterminada de espaço por enquanto. - Rota de topografia, - local, - dedo do pé ser visto. - Andi, o quê? - A vida era fácil. Bem, como muitas vezes é o caso, as coisas mudaram. - Então, enquanto nós começamos sem humilde lá parar ou laptop e nós tínhamos uma tela de chicote fixa, - e nós escolhemos muito do mesmo tipo de blogueiro de tamanho cada vez, - e nós não podemos saber onde estávamos. - De repente, todos esses pequenos dispositivos maré saindo com Internet e armas e coisas assim - bom o início dos smartphones. - Mais telefones, - tablets, - em seguida, mais telefones, - mais tablets, - livros de rede e sim, - Eu agora gostaria de filosofia. E do jeito que projetamos da maneira que vemos todas as topografias na Web, tive que me adaptar. E por causa dessas mudanças, uma das maneiras que, como seus donos, adaptamos seus donos de armas, adaptamos a essa mudança era usar consultas de mídia CSS e design responsivo. - Então, agora tipografia de uma hora definir seu design. - Nossos pontos de vista agora funcionaram e eram legíveis e utilizáveis em tablets, - desktops, - telefones e qualquer dispositivo que foi jogado em nós e por volta do mesmo tempo é tudo isso moderno - peso de olhar desse jeito. - Mas chegando ao máximo, - o anteriormente negligenciado na fonte face CSS pobreza começar a ganhar alguma tração. Então, de repente estávamos usando armas e de repente tivemos tipos de fontes, armas legais do Google que funcionam para seus serviços. - E então um pouco mais tarde nós tivemos, - como, - um kit tipo no deck frontal, - e agora nós temos uma gama muito mais ampla de negrito de paladar fora de tipos de letra e fontes que nós - poderíamos usar na Web, - que atualmente exatamente onde estamos agora. - Eu acho que é e o propósito desta classe inteira queimar uma posição agora é honras - onde nós não temos paletes ilimitadas fora de fontes e fontes que podemos usar em nossas páginas da Web -, - e nós também temos nossa responsabilidade e um obrigação pronta para os nossos usuários agora tipos. - E quem quer que a tipografia que usamos é utilizável era legível dentro usando uma combinação - fora das melhores práticas e design responsivo e consultas de mídia enfraquecem a tipografia. - Não, - apenas bonita inutilizável em um desktop, - sempre em um tablet ou iPhone ou smartphone android, - como quiser chamá-lo. Então, antes de começarmos com o projeto real, quero rever alguns princípios básicos. Entendimento está em bom estado para o produto chegando, e eu acho que as questões mais importantes como sua própria e nós podemos matar ela mesma. - Ele comprou é tipo pés de pôquer, - e eu acho, - acima de tudo, - em primeiro lugar, - topografia é uma forma de comunicação do caminho. - Mas a Internet tem aproximadamente 95% de texto. É como expressamos nossas ideias, como enviamos produtos ou serviços, como interagimos uns com os outros e como antes, formas de comunicação. Se soubermos claramente e as pessoas não entenderem o que estamos dizendo, então elas não ouvirão. Então a diferença entre boa comunicação, má comunicação é basicamente a diferença entre as pessoas que gostam de estar em nossos sites . - E não, - é a diferença entre as pessoas entendem na mensagem e não entendem a nossa mensagem. - Se l comunicação é ruim como um exemplo, - então torna-se barulhento, - torna-se qualidade, - torna-se confuso e torna-se em uma experiência agradável. E logo você se torna o barulho e muito barulho, como se tudo não fosse. logo você se torna o barulho e muito barulho, - Dói nosso cérebro. - Isso bagunça, - se perde, - comunicação se perde e, pelo menos, ela é apenas uma experiência geralmente ruim. - Então, como a tipografia deve sempre ficar clara. - Simples, fácil de ficar. - Então, na verdade, sou sempre claro. - Então, a grande questão como fazemos a tipografia se comunicar? - Como se torna legível? - Como garantimos que uma mensagem não seja perdida? O que não soa simplesmente para o primeiro de sempre torná-lo grande o suficiente, mas você pode ver um exemplo. O tipo da primeira linha é Lord, então você pode lê-la. - 2ª 9 é pequeno, então você conseguiu. Parece óbvio, mas ficaria surpreso com a frequência com que isso é esquecido. - Mesmo em muitos sites modernos e responsivos. - Ainda vejo muitos sites pela sua mente. - Oh, - meu, uh, - meu telefone ou o que quer que seja. Tom Brady é muito pequeno ainda, e outros serviços particularmente importantes quando se trata de dispositivos portáteis. - Se você pode ler a tipografia que nos braços à esquerda, mas uma distância confortável agradável do seu - rosto, - então torna-se uma experiência agradável e confortável. - Mas se o tipo é tão pequeno que você tem olhos e trazê-lo rouba seu rosto do que certamente - isso não é uma boa experiência e foram controlados isso então devemos saber melhor. - Não há desculpa para o seu tipo ser um dispositivo tão pequeno que não se torna nenhum - agradável vê-lo. - Não, - Eu nunca importante aspecto da Tipografia é o contraste. - Agora, - se o nosso texto é uh, - Color Varteks é muito próximo da cor de fundo - então ele não se destaca muito e não tem muito contraste - e, portanto, temos que esticar para lê-lo. E, claro, se eu, se você tem que se esforçar para ler qualquer texto apaixonado, não é agradável e você pára. - Então nós realmente temos que garantir que há um bom contraste. - Os meus pedaços. Por que em preto ou preto em Wydell, seja lá o que for, eu vou me destacar para que ele possa ser para que possamos lê-lo. Então, outro aspecto muito importante da topografia é o espaçamento entre linhas ou, como usado ser conhecido pela liderança do soldador de impressão. - Agora eu vejo que espaçamento entre linhas é uma espécie de que o espaço de respiração entre as linhas detecta. Então, se olharmos para este exemplo aqui, se pudéssemos é um texto primordial, obviamente não podemos lê-lo porque é muito próximo. - Não há nenhum movimento de espaçamento. - A fila não vem. Se olharmos para isto, temos um bom temos um bomespaço e esta noite deixando-me entrar entre cada linha. - Então torna-se fácil avaliar. - Você não tem que pensar nisso. - E agora um semelhante. Acho que esse é o espaçamento que você tem entre letras e palavras no CSS, sua letra espaçamento entre palavras. - Podíamos ver de novo que mesmo que o nosso espaçamento de linhas esteja bem agora, porque eu digo que foi esmagado juntos, - novamente é difícil realmente, - é, - é - é - é - é - é - é - é - é - é - é - é - Então o jogo pode parecer óbvio, mas é um aspecto fundamental da tipografia que precisamos estar sempre cientes. - Ok, - então a seção final desta introdução, mas eu quero abordar isso brevemente, - é a idéia de conteúdo e hierarquia. - E o que quero dizer com isso é escolher especificamente o tipo certo de tipo de letra para o certo - tipo de conteúdo e também os sinais do nosso texto - como ele denota uma certa hierarquia e uma separação de conteúdo também. - Então, - por exemplo, - aqui nós começamos com um título se e é bastante grande, - tempo frio. - E se você seguir isso com uma paixão de texto, - podemos ver aqui porque nós temos agora tendo bons e grandes parágrafos da passagem I - por baixo. Embora sejam menores, ainda são grandes o suficiente para você ler, não a separação em tamanho. - Eles só vamos ver isso. - Qual é o título? - O que é conteúdo agora de outra maneira. - Mas poderíamos ainda demonstrar ainda mais que é agora o texto do parágrafo está no mesmo - tipo de letra está dirigindo. - Mas se nos encontrássemos num belo filme da Sarah. Então, novamente, temos ainda mais separação entre decapitação e o principal texto apaixonado. - Eu nunca sou um exemplo de tipografia apropriada. - Ele é qualquer coisa é a instância. Vemos que temos um tipo de fluido cursivo Avery ou diversão para a direção principal, e está tudo bem. - Podemos lê-lo. - E se usarmos isso para o corpo de texto principal e não for fácil, ilegível e inutilizável, então teríamos que ter em mente que esse tipo é uma coisa funcional. - E se algo está certo como um título na Bretanha, - algumas palavras, - não é necessariamente certo para o corpo principal do texto. - Então isso conclui Thean vídeo de produção para a classe. - Felizmente, - nós cobrimos alguns tópicos lá que podem deixá-lo em bom estado e colocar a classe - a história do produto que está chegando em contexto. - A Andi. - No entanto, vamos para a segunda parte 2. Projeto principal parte 1: - em. - Bem-vindo ao projeto real que vamos fazer a aula. Acho que vou começar mostrando a estrutura do suporte que o projeto. - Então você deve ser capaz de baixar o arquivo zip com companheiros de início. - E então todo mundo caiu com os arquivos da competição. Incluí o completado também, apenas como referência. - Então, se você ficar preso ou perdido Utkan dê uma olhada nisso e e isso vai fazer muito sentido. - Então começamos com Deus. - As primeiras coisas primeiro. Vou usar as armas do Google para este exercício. - Andi, que vou te mostrar isso em um minuto. - Como? - Toe ir lá e montar um pequeno projeto e escolher quais fundos você quer. E depois, mais tarde, vou mostrar-vos como os dedos usavam mais tarde, vou mostrar-vos como os dedos usavamas fontes da Web. - Auto-hospedado na face da frente. - Ela é essa profecia. - Mas as primeiras coisas primeiro será fazer isso saindo. - Meu telefone deu armas, então não sabemos sobre o telefone ainda é demais. - Vamos lá. - Isso mais tarde. - Deixe-me ir. - Nossas imagens. - Você tem um poço de herói principal e, em seguida, uma foto de contato menor. Mas o nosso índice faz com que fiques agora, saias de moda. Ela e então nós temos nossos roteiros, que naquele momento, quando você tem um que naquele momento, quando você tem umHTML 5 mudando a segurança das disputas. Então, se você abrir o índice html cair no seu navegador, eu estou usando o Google Grow Mia e eu estava filmando. Como projetistas da Web, você estará usando cromo ou safari ou Firefox ou prós e matéria e emenda. - Verá que está basicamente no estilo. - Então porque elementos e depois faz em fotos, texto e coisas assim. - Mas sim, não faz. - Eles podem te enviar e não mostrar um rápido é como uma prévia de como deve - olhar quando terminar. - E você não estava usando isso muito para vir te mostrar agora. - E é assim que eu pareço. - Deixe-me fazer. Então eu abri o meu um índice arquivado no meu estilo de ovelha em editor de texto. Estou usando o fornecimento de texto para, mas pode se sentir livre para usar o que quiser. Sem almofada ou sem pagamento, ou Kodo, o que quiser usar alguém. - Agora, eu devo apontar algumas coisas aqui. , Em primeiro lugar, temos como fazer o site funcionar de forma responsável. Temos o ponto de vista da Metta da faculdade aqui com quantas escalas máximas são basicamente significa que porque a ciência vai pintar, então vai ser responsiva. - Basicamente, isso significa que temos uma representação precisa fora. Como você quer coisas que pareçam e não tem, faz zoom desabilitado, mas porque estamos fazendo nossos três melhores grandes o suficiente neste caso, nós não precisamos fazer uma pesquisa sobre um título que Dave ligou para saber roubou forma e depois se tornar ... Dançar. - É o corpo principal da página de embrulhado em uma semana de artigo. - Eu tinha um aqui. - Sem cabeçalhos. - Hum h dois casamentos aqui. - Vá para uma cadeira inimiga, então temos um conteúdo blocos agora em um rapper. - Explicaremos mais tarde, não o parágrafo leva. - Você tem uma citação aqui e nós temos oito três relevância na próxima parte do texto. - E então você pode ajudar que cada imagem aqui e tipo de elemento figurado. - A legenda não se preocupe muito com isso. - Você vai estar indo para este estágio por estágio, - então em breve vai se tornar pais acontecendo. Então, seguindo em Telstar ela você pode ver aqui. - Tenho o Scott. - Um começo de um reset básico. Só assim tira todas as margens, pinturas e fronteiras e exagero que não queremos entrar na página. - Andi, fizemos l para duas seções. - Artigos orazov, - odiar mais 18 ou cinco elementos para apesar bloco pelo voto me limpar corrigir se eu precisar de qualquer - elementos de bloco que tem elementos flutuados dentro deles. - Andi, nós colocamos, uh, imagens para ser 100% com esta noite. - Auto especialmente significa que qualquer imagem será expansiva 100% a largura de seu recipiente e - o resto do urso. - O estilo estava basicamente em branco. Quando sentirmos que os minutos ficam sozinhos. - Ela é como eu vou te mostrar como eu pensei na página. Agora vamos ao Google Armas, e vou mostrar-te como montar o projecto e colar o guião de trabalho que te dá para dentro da página, e depois vamos a partir daí. - Ok, - então você está em fundos do Google, - então, se precisamos decidir, - mas uma vez que eu quero usar na página, - Eu quero uma areia forte Saref para os títulos principais e uma frente séria agradável para o corpo principal - de texto. - Então digite aqui. Assim que encontrares a frente que gostas, podes dar uma vista de olhos, um peso de mão dela faz com que seja maior. - Se ele gosta de Mora, fique com ele. - Fique com ele. - Então vou adicionar isto à minha colecção. - Precisam dos pesos leves normais. - Esta honestidade ousada. - Alguém clique em negrito. - Eles são colocados em uma coleção aqui. - É assim que agora ele está falando sério porque eu vou usar seu livro Gente um genciana. - Mas o básico aqui é então clique em que ser não mostra um tipo diferente de pesos e estilos - lá. - E então vou adicionar isso à minha coleção também. - E tudo o que eu quero é o normal que regular e eu quero a cidade normal. - Foi bem, - eles realmente tão rastreando meus dois tipos principais para a página. - Então, vou usar a coleção aqui. - Veja, - foi o dia todo foram agora Genting Livro Básico você pode usar e isso nos leva Teoh revisão de - o que você escolheu Cervix ecause barco aqui negrito gente e livro Básico normal e metálicos. - Tudo bem. - Então vou ficar com ele só diz “quebre a Latina”. - Deixe-me o estendido. Se esse exercício, Andi, vou escolher o roteiro do trabalho. Isto dá-te um pequeno guião de trabalho aqui, que podemos colar informações no reboque. - Página HTML. - Eu vou, ok, não em você. - Agora, - se eu voltar para o editor de texto indo para a estação ou página na cabeça aqui e os - scripts - eu vou colocá-lo aqui e nós podemos nos livrar deste texto é igual a texto gotas de texto tipo. - Foi textract Skippy não quer dizer isso em um único arquivo. - Então, sim, nós carregamos agora os fundos dele. - E se voltarmos rapidamente para as fontes do Google aqui, podemos ver que também lhe dão algum código aqui para colocar a carga de suas fontes em seu CSS - front. - Eles são seus. - Sensor do mundo de frente Family Now, - você colocou eu básico estão começando a este mais atrasado um estão acreditando alguns adequados - fullbacks e outras coisas e que receberam real talvez indo para ver ensaios, - público 3. Projeto principal parte 2: - Ok, agora. - Então o que vamos fazer agora é parar no Dion CSS para parar de começar a página. - Então funcionou corretamente no momento. Você como já viu antes, acabamos de receber a página e ainda não fez nada. - Sem estilo. Então, se entrarmos nos nossos detetives, vamos ter de me deixar copiar e colar isto como uma velocidade. - Então, no nosso tipo de corpo, - vamos adicionar, - bem, - inventário que vamos ser. Primeiro, vamos definir a família da frente para toda a página mudar no livro Basic, que eu devo lembrar é este formulário serif que escolhemos dos fundos das pessoas e podemos dar uma volta completa fora da Georgia, E o que isso significa, basicamente, se, por alguma razão, por alguma razão, arma não funcionar, então duvide procurar a Georgia. Se esse George não funcionar, você passou um tempo para ser romano e isso não funciona. - Ele irá mostrar qualquer que seja a fonte serif padrão, - o que é muito irritante para obter esta parte. Mas no caso improvável desse tipo de trabalho colocamos “fullbacks “lá, então mantemos a integridade da página. - Agora a próxima coisa a olhar é a linha. - Eu, - que é na verdade coberto no vídeo de introdução, - é o espaçamento entre linhas. - Então eu disse isso para 1.5 eles, - e eu vou chegar a ele no minuto que este, mas Web chute leva sempre ajustar. - Isso basicamente significa que sempre que qualquer navegador da Web, - que inclui qualquer safari em um iPad ou um iPhone quando eles re detecta isso, - reproduz o ato 100% o que basicamente significa que nós manter uma reprodução fiel fora de como nós - queremos o sexto olhar e que o especialmente, uh, relevante para design responsivo. - Então, se você não diz esse lado certo para exibir isso dentro, - nós temos um tipo de fazer para, - que é um cinza muito escuro. Aqui está uma coisa muito importante, que basicamente informará todo o layout da página inteira. - Agora os navegadores serão mostrados por padrão. - Você enganou sinais de fonte e 16 pixels. - Agora eu não acho que isso é grande o suficiente, - então eu sempre começo com 100 vítimas, - disse, - o que faz eu não sei, - 24 pixels. - Então, por padrão, - qualquer corpo de texto será 24 picaretas foi grande, - e então todas as outras medidas no CSS podem começar a partir disso. - Então 1,5 vezes 24 maneiras é seis. - Fez isso? - Basicamente dá um bom começo. - Um bom cara de beisebol na página sobre 11 conceito importante começou a usar isso nesta página. - Eu deveria indústria aqui é a consequência usando EMS agora, - como unidades de medida, - eu tento usar pixels, - ou PX o mínimo possível - especialmente design responsivo. - Agora, - um M basicamente significa que um em é igual a uma vez para dimensionar a visão fora do DEA fora do tipo - do corpo do texto ou eles recebem um pretexto fora do Eu não assim neste caso, - porque nós definimos para 150% meu nome é 24 pixels, - Então l altura da linha aqui será 1,5 vezes 24 pixels. E vou usar objectivos para não só para topografia onde se trata do tamanho do dedo do pé, os cabeçalhos, os H e os links. E dissemos: “ Claro, Claro, vou usá-la.” - Os elementos de nível de bloco como wrappers e mente você, - dependendo do usado basicamente em todo o site então basicamente cada parte, - o layout de seu preenchimento, - suas margens, - memória, - é caixa tamanhos, - o que for relevante para o nosso tamanho divertido inicial. - Então basicamente mostra como uma parte sobre tipografia pronta denotam o todo até eu - expor. Então agora, passando para o nosso não sabe, passando para o nosso não sabe, você sabe, classe aqui, este é basicamente o rapper que vai embrulhar nosso conteúdo, você sabe, classe aqui, este é basicamente o rapper que vai embrulhar nosso conteúdo, - E na Central, acho que sim. - Se eu colar no código aqui, - você vê, - nós somos chicoteados de 80% um máximo de 38 EMS em e uma margem ou não em auto - - é basicamente centralizá-lo. - Andi, - para GM, - é 38 vezes 24 pixels, - que é nos dá fora da página do nosso conteúdo. - E se guardarmos isso e seguirmos o nosso navegador e se o atualizarmos, talvez devêssemos ver que tudo ainda é perfeito, mas é centralizado o conteúdo que temos lá. - Nossa Web Front está trabalhando no caminho. - Começamos a ver que o início da página está voltando rapidamente para o nosso conteúdo Al. - Napa. - Aqui, - este máximo com 30 a. - M. - Isto dá-nos uma largura máxima de 912 pixels. - Que de volta no navegador, pegue isso. - Vamos trabalhar nesta alavanca. - Um taco. - Grande desespero. - É para facilitar. - Faça algum exercício. - Então agora passando para o nosso tinha uma seção que nas páginas, - esta seção aqui h um h 20 em um pequeno elemento aqui, - que eu escolhi o nome do autor tão bem de volta para ele. Primeiro, queremos que alinhe o texto no centro, e depois nunca o transbordaremos. - Newsbill só por precaução. - Tudo o que você faz é que nós não queremos. - Primeiro de tudo, - onde odiar um algum cabeçalho principal para a página acabou de colocar em. - Então ele compensou algumas margens. O tamanho da fonte 3,2 m tornou o valentão maiúsculo agora também, que é o nosso san serif. Mas doamos de fundos do Google. Só que em Boulder chegou um pouco tarde, espaçamentos e pior base aqui, mas também. - Uma coisa que eu quero salientar aqui é quando decidir sobre coisas como margens e tamanhos de fonte, - exceto o seu para especialmente tipografia. - Eu gosto de usar um tipo de uso preciso, mas meio áspero fora da seção dourada de Fibonacci. Se eu entrar, posso envergonhar a página aqui. - É assim que Fibonacci diagrama. Tenho certeza que sabe disso se estiver estudando design, mas falarei brevemente. Tenho certeza que sabe disso se estiver estudando design, A seção de Ouro de Fibonacci, ou Regra de Ouro, era basicamente uma proporção de 1 para 1,6. - Então, - por exemplo, - começamos com este quadrado aqui. - Agora, - se fizermos este retângulo o lado de fora dele 1,6 vezes a largura, - eu acho, - mas eu nunca ajustá-lo. - E depois outro quadrado ali. - E eu estava lá. - Isso foi onde não há quadrado que é tudo tudo 1,6 vezes o tamanho. E isso nos dá essa arca, que é basicamente uma espécie de “O. “ formal , um padrão que você encontra na ciência, design matemático. E é usado familiarmente do mundo do design com o bem, para parar de negociar, também, para a mecânica quântica. Você quer dizer que é um tipo de padrão básico que esse tipo de, se você gosta de uma fórmula para o que concebemos do olho como sendo bonito. - Então, a principal coisa a lembrar Este é o racial 1 a 1.6. Então, se eu voltar para CSS aqui, você vê, eu fiz a margem. - Topo do H um n 1.6 na parte da frente é 3.2, - que duas vezes 1.6 e eu tentei dedo do pé. - Quando eu estou trabalhando fora saladas margem e tamanhos de fonte e coisas manter um tipo áspero de mais trabalho -. - Tão fidelidade a este 1.6. - Então você pode ser um 3.2. - Eu poderia ir metade do mercado 2,4. - Oh, sim. - Basicamente, - não é que May envie seu tipo de Ah, - não é preciso, - mas ele apenas dá um bom vôo, - e eu meio que forma Teoh para o design de layout. Agora eu vou entrar, e agora vou estilizar o H dois, que está debaixo do esconderijo principal na fronteira. Então, de novo, você tem 1.2, o que não é 1.6 oficiais. - Piven são mais baratos. - É como 1/4 disso ou algo assim. - Andi, uma linha a formar ali. E agora este pequeno, que é o pouco fora do tanque de novo. - Nós temos a margem lá e temos bloco spayed. - Fomos feitos. - Italiano cometeu menor. Então, se pensarmos isso e voltarmos para a nossa página, , temos o principal a atingi-los. Temos um centavo abaixo de uma idade, muito dinheiro também. - E temos ali o tanque. - Então é centralizado. - É uma boa proporção de ciências e outras coisas e aqueles acariciando e um espaço. - Então agora vamos fazer um pouco mais de estilo do corpo do texto principal agora sobre os links e as liberdades H com cabeçalhos no corpo principal do conteúdo. Então, em primeiro lugar, vou colocar alguns estilos para o parágrafo. - Texas P Então, novamente, estamos usando um Fibonacci aqui. Temos a margem 1.6 no topo, mas que é metade atrás no fundo. E porque uma coisinha gerará iPhones, o que basicamente significa isso. - Hifenia palavras longas em navegadores da Web à mão. - Então vai e alguns atuais vivendo no acampamento, - e então alguns apenas obter bom ler o mesmo pode ser pego nas imagens principais e, em seguida, em - oferta. - Você só tem um sublinhado. - Andi, - com o H três, - nós vamos ter o tamanho da fonte de 1.6 estava voltando para ser batido novamente em uma margem para votar - que é que as pessoas são judias. - E depois vamos trazer estes de volta também. - Deseja sem texto serif para o que trava aqui e torná-lo em negrito também. - Ninguém, a propósito. Eu incluí o San Serif E.Eu tenho fundos Al zagueiro fora do How Vatican Neue Aerial sensores. Eu incluí o San Serif E. - Agora, a razão pela qual colocamos Helvetica Neue primeiro é que basicamente, - como ir melhor em produtos Apple Como Mac iPhone Waiver parece ótimo, - mas parece horrível no Windows e aérea. - Da mesma forma no Windows ou no Internet Explorer. - Isso é o que o Windows PC parece adorável lá, mas parece horrível no Mac. - Então o que fazemos aqui é 99,9% do Max terá quem Petricka Helvetica Neue instalou. - Então, se tivermos isso no Al Max apanharia isso. Mas isso não será instalado, provavelmente em um PC. - Então os PCs vão para Ariel. - E se não, - Eu vou para o sensor onde, - por exemplo, - é lá Basicamente, - é um desperdício ou garantia. Agora, se temos que ter uma volta completa aqui do que parece, então guardamos isso e depois vamos para uma atualização de página. E então devemos descobrir que temos Agora podemos ver como odeia varejo no corredor possível frente sensorial, bom e grande, 1,6 vezes o tamanho do corpo do texto para dar uma boa proporção. Temos o par de óculos, mas agora o que é bom estofamento no espaço branco. - Então, é muito mais legível para ler. - E, - uh, - sim, - o que esperar. Então, em seguida, vou começar uma citação de bloco de energia, que é algo muito comum quando você está especialmente quando você escreve em mensagens de bloco ou artigos se você quiser incluir uma citação de algum tipo de fonte famosa aprendida. - Então eu estou tendo um chicote de 9% que nos permite ter um pouco de panning no lado esquerdo , - em uma pequena bola dele. - Vá para a estrela dianteira metálica e eu fiz o texto um pouco mais leve. - Só tem um pouco de separação lá. - Bom dia não é dar tapinhas aqui também. Então, se eu disser isso, volte para a página, atualize-a e podemos ver aqui. - Essa é a nossa citação. - É feijão transformado em itálico. - É mais leve. - É um lado nove aqui e apenas obter uma pequena separação agradável e nos permite saber que é - algo de um pouco, - conteúdo diferente do Peter. 4. Projeto principal parte 3: - É o próximo. - Você tem essa imagem aqui. - Diagrama. - Andi tem uma legenda grossa aqui embaixo. - Agora eu quero dar isso deixando mais Stein no e eu quero dedos separados. - Esta ainda é a legenda aqui. - Quero fazer um estilo semelhante ao quarteirão. - Bastante. - Chegamos aqui, - Então perdoar leva ele. - Apenas este é o sucesso para o seu porque eu vou figurar aqui e uma legenda. - Lá vai você. HTML precisa de uma figura em um minuto com a imagem dentro dele, e ele não está em forma. - Legenda. - Então volte para cá. Então você deu outra margem de Fibonacci lá, e neste caso, vou começar em telas mais largas e parei a legenda da figueira. Vai flutuar para flutuar, mas posicione-se para a direita do ligado. - Enquanto telas suficientes estarão publicando para o branco para a direita, - eu diria fora da imagem e os curries naturais Metromedia. - Eu vou te mostrar como fazer quando as telas e por que eu amo Deus na folha. - Então temos um absoluto crer que relativamente posicionado a nossa figura. - Então, a legenda de ajuste dentro está absolutamente posicionada sobre, - em seguida, dado um chicote e colocar 105% para a direita fora da imagem. - E é bom Attallah Pier e seu tamanho menor. - E é a mesma coisa. - Tyler é o quarteirão. - Então você acha isso e eu a primeira página que você verá no momento. - É uma espécie de página aqui. - Mas se fosse um monitor de tamanho normal... - Jura pelo uso de meses de artista. - Vejo você copiar. - Isso é tudo isso. Então, em seguida, - se olharmos aqui embaixo de onde saímos, - como mulheres compartilhando a figura 11 nós temos fora parágrafo uma textura dentro que são chamados - dividir. Agora mostre que a página com basicamente, estamos falando sobre este parágrafo papagaio aqui. - Agora o que vou fazer é mostrar rapidamente como podemos usar. Alguns vêem como três aqui para fazer uma coluna dividida. - Então aqui nos dividimos. - Isso faz com que seja o David que embrulha o parágrafo. - Então temos que ligar para ele. - Tenho que acalmar a Gap. - Uma colisão foi para obter um pequeno espaço entre as colunas e, em seguida, - quanto a cinco pessoas, - isso é para o kit Web e, em seguida, algumas margens aqui - e é iminente e tal aqui. Então, se dissermos isso e depois voltarmos a pagar muito, seja peixe. - Veja, - nós temos um parágrafo de duas colunas aqui agora, - você normalmente não faria, - você sabe, - mas pergunte sobre isso. - Vá de uma ganância de uma coluna para uma grade de duas colunas desta maneira. - Mas eu só usei. - Apenas uma ilustração de como você, - em certas circunstâncias, - você pode usar a multi-coluna ver ensaios. - Bom. - Obrigado, certo. - Então só há dois pedaços agora que precisamos resolver deixou o estilo dele na página. Temos uma lista A aqui, mas precisa mas precisade margens. E você tem um pé para dois aqui, que o leva a começar também. Então, se entrarmos no nosso até seis Delta, vou dar pelo menos um pouco de partida. - Seja uma margem de novo para o Archie. - 1.6 ponto oito. - E depois o instalador. - Isso é um carinho em um fundo escuro. - Parece que a cor do texto e algumas coisas de margem lá só para ter uma boa aparência. Então está dizendo que voltaremos à nossa dor para refrescá-la, e então veremos. Você tem um bom espaço branco na roupa do Exército. Sim, essa é basicamente a página terminada em seu, uh bem, o primeiro estado da página. - De qualquer forma, - agora vamos continuar e mergulhar em nossas consultas de mídia para tornar a história da página do site - responsiva. - A Andi. - Sim, vou mostrar-te como nós, uh, pessoa a seguir. - Então aqui temos uma consulta de mídia. - E o que é basicamente faz é que a mídia Maxwell de 1600 pixels. Significa que qualquer coisa até 600 fotos serão afetadas por quaisquer regras que eu coloquei aqui e que substituam o que quer que tenha vindo antes. Então, primeiro de tudo, vou consertar essa legenda dos pés aqui, cerdas com telas. - Guarde isso se você receber de volta as orações da página Intel antes. - Não, ele não está. - Há. - Então, onde está antes? - Está aqui, que é bom sem páginas. - Não de largura na tela cheia. - Mas agora quando a tela é 1600 imagens de maravilha a legenda. - Ele voltou para a carne aqui. - Certo. Então, em seguida, vou dar uma olhada nessa bagunça. Texto apaixonado aqui, que é o que cuspe em duas colunas agora, quando está em quatro lados. - Rastreando e explicando. O leitor era bom, mas quando ele parou de gritar aqui, começamos a ver que fica um pouco. - Squash não é muito atraente, - não é bom para ler. - Então o que temos que fazer é entrar na nossa CIA diz aqui, - você se lembrou antes que eles gastaram duas colunas até agora - nós vamos entrar em nossas consultas de mídia aqui. E quando chegar a um cheiro de 1200 pixels abaixo, vamos dar conteúdo de um que irá mudá-lo a partir das duas colunas. - Uma coluna para salvar isso. - Volte para cá. Atualize a página quando ele gritou, voltamos a ser um vigarista. Ela é muito mais do que a próxima em nossas consultas de mídia viria aqui para um máximo de 840 pixels, que é mais ou menos fora do tamanho do tablet. Eu tento não ser muito senhor, mas para precisar em dispositivos que você vê um monte de pessoas nas carreiras da mídia onde exatamente - pixels eles estão longe para um iPad - então as correções exatas para um iPhone foi eu tentar ser o dispositivo independente. - Eu acredito que o tipo de conteúdo de seria a sessão de layout tipo de adaptar o que ele precisa - adaptar-se. - Não. - E é apenas design de páginas. - É barulhento, diferente no próximo. Mas neste caso, escolhi o agente 40. - Isso deve pegar faz comprimidos para os olhos ciências. - Então vou colar a nossa nova Kate aqui. O que eu fiz aqui, eu fiz o rapper UNA fez 85% enquanto antes era, se você vê aqui 80% isso faz um pouco mais largo. - Então você voou com ele ou com a tela. Eu coloquei o fundo H, tamanho da fonte do cabeçalho principal um pouco para baixo. - E eu dei mudança a margem para viver além da idade para a sua e as horas extras em - benefícios para dizer isso e, em seguida, vir para cerca de página aqui, - chegar ao topo aqui refrescante. - E eu não vou querer descer para um lado que vai ver o inferno dela. Só dá uma solução mais agradável, até mesmo o texto principal do corpo. - O mesmo. - Então é legível. Isso faz com que a cabeça dela seja especialmente para que não ocupemos tanto espaço porque não precisamos quando você quer. - Cientista menor. Então agora vamos abordar onde as consultas de mídia devem aceitar captar nossos dispositivos portáteis , smartphones, etc. Então, agora, se nós, uh, gritando um pouco aqui, eu vou te mostrar algumas capturas de tela do papai do meu iPhone e iPad mais tarde. - Um. - Demonstre em parte, mas você vê aqui sim. - Este é o segundo título? - Aqui está um pouco esmagado. - Talvez o texto principal seja um pouco grande demais, - Não cada um tão grande é isso e cabeçalhos a cada dois grandes. - Então, o que vamos fazer agora? Se voltarmos a falar sobre CS está aqui, então este é o nosso fundador mexicano médio escolhe, é tipo que pega dispositivos móveis que vão copiar e colar o novo código aqui e depois ir para o que eu sou antes de tudo então este é o nosso fundador mexicano médio escolhe, é tipo que pega dispositivos móveisque vão copiar e colar o novo código aqui e depois ir para o que eu sou antes de tudo Enquanto que antes de como em nosso sentimento corporal, nós tínhamos um tamanho divertido de 150%. - Agora abaixe um pouco. - 225%. - Deus não precisa ser tão grande. - E ... eu quero-me a mim. - Mudamos esse espaçamento. - As palavras basicamente deixam lá a nossa idade mudar um pouco. - Apenas classifique o espaço em branco em um congelamento de palpites. - Aqui compramos o tamanho para baixo. - Era 1.6 antes é agora 1.2 e está mais pendente em algumas coisas de montanha aqui e também - com a nossa imagem principal. - Considerando que antes era, - uh, com não preciso que a equipe costumava ser como por que então o que não ouvimos eu fiz a imagem - a imagem da veia na cabeça para ser Arjun 40% e, em seguida, dar-lhe margem de menos 20 não é - à esquerda, - que basicamente assume em um pouco, mas tamanhos menores. Então, se guardarmos Então, isso e entrarmos na nossa página de novo, podemos clicar nisso. - E como podemos ver etnias, mas a natureza, - o tipo que você ainda é bom e grande? - Não, porque antes era muito mais legível. - E como vi os três anos dela. - Eles não são bonitos nesse tamanho. - Sim, 5. Como adicionar fontes self via fontsquirrel.com: - então, - como prometido, - eu tenho algumas telas aqui desde que eu os encontrei, - eu tinha ele. - E só para mostrar que não funcionam. - Talvez até a cadeira da página de opinião. - E então, - Ok, - nós mantemos texto reproduzido, - e agora o que funciona aqui e outras coisas. - Ainda assim, muito bom. - Você vai para o iPad. - O noticiário do tipo. - Não. - Só escala e ainda assim muito legível. - Bela medida de linha. - Esteve em proporção. - A música é boa. - Agora, - só um pouco. - Eu sei que você tem hereges em vários dispositivos. Então, basicamente, a última coisa a mostrar a vocês, como prometido , é, antes de usarmos fontes do Google Web e eles te dão alguns trabalhos ignorados e você coloca na cabeça, - É muito fácil. Há outra maneira de, se você estiver usando fundos especialmente grátis, documentos judiciais também é hospedá-los. - Então eu vou te mostrar como fazer isso para a escola. Então, felizmente, os fundos que usamos antes estão disponíveis na escola principal, então escrevemos Oswald. - Aqui estamos, então clique nisso. - Olhe, - diz ele. E aqui não temos muitos pesos e estilo para a frente. Você e eles têm,normalmente na escola principal, normalmente na escola principal você pode ir para baixo na web formulário kip, mas por causa de uma licença de sapatos novos neste aqui, você tem que baixar o “O. T. - F e, em seguida, gerar o por código de telefone você mesmo. - Então clique no download, - baixar suas fontes para sempre vai fazer isso agora e então você pode ir para o World Point - gerador e isso basicamente dá-lhe, - leva sua frente e, em seguida, faz várias versões versão disponível versão SVG, - que estão indo para mais em um minuto, - que permite que você trabalhe em não vários dispositivos diferentes e sistema operacional. - Então todos no gerador de armas adicionariam fundos. - E eu vou entrar em Você pode a partir daqui? - Ela pegou isso e eu vou abrir. - Pegue. Então agora as pessoas não sabem o que fizeram e você concorda que você vai, você não pode fazê-lo. - Sim, você embaixo do kit. - Então ele vai estar lá dizendo que vamos descobrir e descobrir - que é o grande bilhete de rim. - Talvez até e basicamente isso é tirado divertido e fez uma versão qualquer ot TTF spg em que - basicamente cobre todas as bases. Então vamos aqui, temos uma forma de estrela que podemos abrir agora. - São precisos dois, e este peso dá-te. - Então isso é danos à frente livro argentino tese básica uma reforma que temos vindo a usar. - E esta é a nossa frente padrão aqui o ar 31 e sempre ter um pouco de coisas aqui. O TTF de guerra que consertei eles basicamente quatro costas para vários dispositivos. - Então, - por exemplo, - diferentes navegadores e dispositivos diferentes exigirão diferentes versões fora da diversão. - Talvez seja uma versão de professor de qual versão ou versão S B J ou o que for. Quando vocêusa os fundos do Google para fazer o meu trabalho escapou, não é isso para você, o que é ótimo. Quando você , usa os fundos do Google para fazer o meu trabalho escapou, não é isso para você, - Então voltamos para o nosso telefone está aqui. - Eu poupei você do tédio de me ver baixar cada fundo individualmente. Então eu basicamente fui para baixo para o gerador da escola de fundos e eu fiz versões do Theo - Gold on the Gente no livro Basic Metálico e regular. - E estes são todos os vários fundos que precisamos aqui na nossa pasta de fundos. - Então, se eu entrar agora em nosso CSS, - mas nós fazemos agora é pegar o código CSS que obtemos do gerador da escola e nós - colamos dentro. - Eu estava colar que o nosso meu rosto fontes decorações no momento da folha de estilo. - Então, o que basicamente significa que ele permite que você carregue primeiro. Andi, se você vê aqui, temos uma família gentil, mas básica, tem frente. - Bamian Genting livro Basic metálico e fora foi, - bem, - barco aqui e tem também logo à frente está à frente em um pouco também. - Certifique-se. - Veja, - o ano I lá. - Eu coloquei fontes lá, - então basicamente, - o navegador sabe olhar na pasta fontes para encontrar todos os vários. - Eles estão muito sobre eles. - Então é assim que, - uh, - para baixo fundos auto-hospedados carregados em nosso estilo. - Ela salvou isso indo para, - uh, - hnl para nós podemos nos livrar deles. - O guião deles aqui. - Você não precisa de mais cortes. - Os fundos do riso dormem isso Oh, sim. - Uma coisa que eu deveria lembrar. - Temos de mudar isto aqui. Então, no nosso CSS vamos até aqui, vamos fazer o mesmo que um normal, e então isso não vai ser um presságio. - Acho que outra vez. - E depois vamos a uma página. - Sabe, temos armas. - Mas agora que eu hospedou até trabalhar contra isso deve servir. Mas em vez de sermos chamados pelo JavaScript pelas frentes do riso, temos agora a versão de auto-pessoa. - Então isso conclui nossa introdução às armas e uma topografia da web. - Você já gostou? - Você não tem a partir daí. - Por favor, sinta-se livre, - Teoh desenho imagens e mudar o texto de mudança de título em coisas, - jogar uma rodada dele e ter um pouco de diversão eu estou ansioso para ver vocês vir acima com em ainda -. - Obrigado. - Não.