logo curso

HTML e CSS

Introdução

O HTML permite representar o conteúdo de documentos com a ajuda de marcas (tags); o CSS permite definir o aspecto desse conteúdo, associando conjuntos de características a cada marca. Um exemplo de aplicação de diferentes CSS ao mesmo HTML, que ajuda a compreender as vantagens da separação entre conteúdo e forma, pode ser encontrado no site CSS Zen Garden.

Estrutura dos Ficheiros

Ficheiro HTML (versão 5)

<!DOCTYPE html>
<html lang="pt">

<head>
	<title>Título da Página</title>
	<meta charset="utf-8">
	<link type="text/css" rel="stylesheet" href="estilos.css">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
	<h1>Título</h1>
	<p>Isto é um parágrafo.</p>
</body>

</html>

A linha <link type="text/css" rel="stylesheet" href="estilos.css"> faz a ligação ao ficheiro de estilos. Cada ficheiro HTML pode ter vários ficheiros de estilos.

Ficheiro CSS (versão 3)

/*
 * Isto é um comentário.
 */

body {
	font-family: sans-serif;
	font-size: 12pt;
	color: navy;
}

Novos Elementos

Elementos Semânticos (Tags)

Lista não-exaustiva de novos elementos semânticos introduzidos ou alterados no HTML5:

Tag Significado
<address> Define um contacto, frequentemente do autor do documento. Se usado dentro de um article, indica normalmente o contacto do autor do artigo.
<article> Define um bloco de conteúdo independente do resto, como um artigo de um blog ou de um jornal.
<aside> Representa um conteúdo relacionado com o conteúdo precedente, uma informação extra.
<audio> Define um ficheiro de audio.
<canvas> Define uma zona destinada à renderização de gráficos.
<header>, <footer> Representam, respectivamente, o cabeçalho e o rodapé de um documento ou de uma secção do documento. Podemos ter vários header e footer num documento, mas não podemos ter nenhum deles dentro de qualquer deles.
<main> Identifica o conteúdo principal do documento. Apenas um por documento é permitido.
<nav> Identifica o menú de navegação.
<picture> Define um ficheiro de imagem. Permite indicar diferentes versões do ficheiro em função da resolução do ecrã.
<section> Define uma secção dentro do documento.
<time> Representa uma data e/ou hora.
<video> Define um ficheiro de vídeo.

Elementos do Tipo Input (Forms 2.0)

Estes elementos usam-se dentro de formulários (form), como por ex.: <input type="color">

Tag Significado
color Define uma caixa de escolha de côr.
date Define uma caixa de selecção de uma data. Este elemento não é suportado em Safari ou Internet Explorer 11 (ou anterior).
email Define uma caixa de texto para indicação de um endereço de e-mail. Há uma verificação automática do formato.
file Define uma caixa de escolha de um ficheiro para envio ao servidor (upload).
number Define uma caixa para introdução de um valor numérico.
range Define um selector numérico dentro de uma gama de valores.
search Define uma caixa para introdução de um parâmetro de busca.
tel Define uma caixa para introdução de um contacto telefónico.
url Define uma caixa para introdução de um URL (Uniform Resource Locator).

Posicionamento

Por omissão, os elementos numa página HTML são dispostos na vertical, de cima para baixo, de acordo com a ordem pela qual aparecem no ficheiro. Este é o posicionamento estático, que pode ser mudado no CSS usando o atributo position.

Exemplo de posicionamento estático:

(...)

<body>
	<div id="um">Primeira DIV</div>
	<div id="dois">Segunda DIV</div>
	<div id="tres">Terceira DIV</div>
</body>
</html>
Primeira DIV
Segunda DIV
Terceira DIV

Tipos de Posicionamento

static
Posicionamento estático. É o valor assumido por omissão. Os elementos são posicionados verticalmente a começar por cima, pela ordem em que aparecem.
fixed
Posicionamento fixo. O elemento é posicionado em relação à janela de visualização, independentemente do conteúdo da página.
relative
Posicionamento relativo. O elemento é posicionado em relação ao sítio onde era suposto estar com posicionamento estático. Os outros elementos da página não são alterados.
absolute
Posicionamento absoluto. O elemento é posicionado em relação à posição do mais próximo parente com posicionamento diferente de estático. Se um tal parente não existir, é posicionado em relação à totalidade do documento.
sticky
Esta opção é um caso especial em que o elemento comporta-se como se tivesse posicionamento relativo quando normalmente visível na página; porém, quando o nível de scroll o faz sair da janela de visualização, “cola” à margem da janela como se de posicionamento fixo se tratasse.

Em posicionamentos diferentes de estático, os atributos de CSS top, left, bottom e right são usados para indicar as distâncias relativamente às margens superior, esquerda, inferior e direita, respectivamente.

Exemplo de posicionamento relativo:

(...)

<body>
	<div id="um">Primeira DIV</div>
	<div id="dois">Segunda DIV</div>
	<div id="tres">Terceira DIV</div>
</body>
</html>
(...)

#dois {
	position: relative;
	top: 20px;
	left: 20px;
}
Primeira DIV
Segunda DIV
Terceira DIV

Sobreposição de Elementos

Por vezes, há necessidade de sobrepor elementos - por exemplo, quando se pretende ter texto sobre uma imagem. Segue um exemplo:

(...)

<body>
	<div>
		<img src="images/seaport_600.jpg" alt="seaport">
		<h1>Título Sobre a Imagem</h1>
	<div>
</body>
</html>
(...)

div {
	position: relative;
}

img {
	width: 100%;
	height: auto;
	display: block;
}

h1 {
	font-family: sans-serif;
	font-size: 24pt;
	color: #fff;
	font-weight: bold;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
	white-space: nowrap;
	margin: 0;
	text-shadow: 2px 2px #000;
}
seaport

Título Sobre a Imagem

RWD - Responsive Web Design

Designa-se por responsive web design (web design responsivo) um conjunto de técnicas de desenho de páginas web tal que os seus conteúdos adaptam-se às dimensões dos dispositivos onde são vistos (computadores de secretária, tablets, smartphones, etc.). Essas técnicas passam pela utilização de HTML5 e CSS3 de maneira que os conteúdos dos documentos movem-se, redimensionam-se e adaptam-se por forma a serem facilmente legíveis e parecerem bem ao utilizador em qualquer ecrã.

Modelo de Caixa

No modelo de caixa normal, a largura (width) e a altura (height) medem o espaço interior da caixa. Se a caixa tiver bordas (border), espaço interior entre a borda e o conteúdo (padding) ou espaço exterior à borda (margin), as dimensões desses elementos somam-se à largura e/ou à altura.

Como em design responsivo é frequente indicar-se medidas em percentagens, uma caixa com 100% de largura, por exemplo, mas com margem, borda e/ou padding horizontais ocupará mais da totalidade do espaço horizontal onde se inscreve (mais de 100% da largura disponível). Para evitar este problema, usa-se frequentemente o CSS box-sizing: border-box, cujo efeito é fazer com que o tamanho de margins, borders e paddings seja incluído no tamanho total da caixa.

Dada a relevância da instrução box-sizing: border-box no design responsivo, constitui boa prática aplicá-la a todos os elementos. Assim, no início do ficheiro CSS, é frequente termos:

* {
	box-sizing: border-box;
}
margin
border
padding
conteúdo

Exemplo de CSS:

div {
	margin: 20px;
	border: 1px solid #000;
	padding: 20px;
	box-sizing: border-box;
}

Opções Frequentes de Layouts Responsivos

Layout de Página Única, Centrado

Todo o conteúdo dentro de uma página só, centrado, com uma largura máxima.

O HTML relevante é:

(...)

<body>
	<main>
		<h1>Layout 1</h1>
		<h2>Corpo único, centrado, responsivo.</h2>
		<p>(Largura máxima: 600px)</p>
	</main>
</body>
</html>

E o CSS:

(...)

main {
	width: 100%;
	max-width: 600px;
	margin: 10px auto;
	background-color: #fff;
	box-sizing: border-box;
	padding: 40px 10px;
	min-height: 50vh;
}

Layout em Bandas, Centrado

O HTML relevante é:

(...)

<body>

	<!-- Isto é um comentário. Cada classe "main" define uma banda; cada classe "centered" define conteúdo centrado, com largura máxima. -->
	<div class="main">
		<div class="centered">
			<h1>Layout 2</h1>
			<h2>Múltiplas bandas com conteúdo centrado, limitado em largura, responsivo.</h2>
			<p>(Largura máxima: 600px)</p>
		</div>
	</div>
	
	<div class="main">
		<div class="centered">
			<h2>Segunda Banda</h2>
		</div>
	</div>
	
	<div class="main">
		<div class="centered">
			<h2>Terceira Banda</h2>
		</div>
	</div>
	
	<div class="main">
		<div class="centered">
			<h2>Quarta Banda</h2>
		</div>
	</div>
	
</body>
</html>

E o CSS:

(...)

.main {
	width: 100%;
}

.main:nth-of-type(even) {
	background-color: #fff;
}

.main:nth-of-type(odd) {
	background-color: lime;
}

.main > .centered {
	max-width: 600px;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 40px 10px;
	border: 1px dashed grey;
}

Flexbox e CSSGrid

Flexbox e CSSGrid são duas formas de posicionamento “líquido” de elementos num documento HTML introduzidas com o CSS 3. A sua utilização é fundamental para produzir layouts verdadeiramente responsivos.

FlexBox

O Flexbox usa-se maioritariamente para dispor elementos na horizontal. É por vezes também aplicado a um único elemento pela facilidade com que permite posicionar o seu conteúdo verticalmente, com instruções como align-items: center.

Aplica-se Flexbox a um elemento usando a instrução display: flex. Atributos como justify-content e align-items permitem ajustar o conteúdo tanto na horizontal como na vertical, respectivamente; flex-wrap define se os elementos devem passar automaticamente para uma nova linha caso não haja espaço suficiente; flex-direction permite alterar a direcção do alinhamento (esquerda-direita, direita-esquerda, de cima para baixo ou de baixo para cima).

O site CSS-Tricks: A Complete Guide To Flexbox apresenta um resumo muito interessante e prático de consultar dos atributos do Flexbox. O site Flexbox Froggy proporciona um jogo didáctico usando Flexbox.

Exemplo de utilização de FlexBox:

O HTML:

<div>
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

O CSS:

div {
	display: flex;
	border: 1px solid #ccc;
	padding: 10px;
	background-color: yellow;
	justify-content: space-around;
}

div > div {
	border: 1px solid #ccc;
	padding: 20px;
	font-family: sans-serif;
	background-color: white;
}

Resultado:

1
2
3
4

CSSGrid

A CSSGrid (grelha CSS) permite criar uma grelha, com linhas e colunas, na qual podemos dispor os diferentes elementos da página.

Aplica-se CSSGrid a um elemento usando a instrução display: grid. Atributos como grid-template-rows e grid-template-columns definem, respectivamente, o número de linhas e o número de colunas da grelha, bem como os seus tamanhos relativos. Há situações em que apenas interessa definir as colunas, sendo o número de linhas automático (quando não "cabe" mais conteúdo, passa para a linha seguinte). Atributos como grid-row-gap e grid-column-gap definem os espaçamentos entre linhas e entre colunas (goteiras). Os atributos grid-row e grid-column permitem posicionar cada elemento numa determinada linha e coluna.

A indicação de que um elemento ocupa mais do que uma célula pode ser feita usando o palavra span. Por ex.:

#exemplo {
	grid-row: 4;
	grid-column: 3 / span 2;
}

O elemento com o ID exemplo será posicionado numa grelha na intersecção da quarta linha com a terceira coluna, mas ocupará duas colunas (span 2).

Convém recordar que elementos posicionados numa grelha não “herdam” a grelha do seu elemento parente. No caso deste exemplo, o elemento exemplo, embora ocupe o espaço de duas colunas da grelha onde está colocado, não tem ele próprio uma grelha.

O site CSS-Tricks: A Complete Guide to Grid apresenta um resumo muito interessante e prático de consultar dos atributos do CSSGrid. O site Grid Garden proporciona um jogo didáctico usando CSSGrid.

Exemplo de utilização de CSSGrid:

O HTML:

<div>
	<div>Cabeçalho</div>
	<div>Conteúdo Principal</div>
	<div>Banda Lateral</div>
	<div>Rodapé</div>
</div>

O CSS:

div {
	display: grid;
	border: 1px solid #ccc;
	grid-template-rows: 50px auto 50px;
	grid-template-columns: auto 100px;
	min-height: 220px;
	grid-gap: 5px;
}

div > div {
	box-sizing: border-box;
	font-family: sans-serif;
	font-size: 12pt;
	padding: 1ex;
}

div > div:first-of-type {
	border: 1px solid #ccc;
	background-color: yellow;
	grid-row: 1;
	grid-column: 1/span 2;
}

div > div:nth-of-type(2) {
	border: 1px solid #ccc;
	background-color: yellow;
	grid-row: 2;
	grid-column: 1;
}

div > div:nth-of-type(3) {
	border: 1px solid #ccc;
	background-color: yellow;
	grid-row: 2;
	grid-column: 2;
}

div > div:last-of-type {
	border: 1px solid #ccc;
	background-color: yellow;
	grid-row: 3;
	grid-column: 1/span 2;
}

Resultado:

Cabeçalho
Conteúdo Principal
Banda Lateral
Rodapé

Media Queries

Um media query é um pedaço de código (CSS) que só é interpretado quando uma ou mais condições se verificam. Por ex.:

#teste {
	width: 100%;
	background-color: yellow;
}

@media (min-width: 800px) {
	
	#teste {
		width: 50%;
		background-color: orange;
	}
	
}

O elemento com ID teste ocupará 100% de largura do espaço disponível e será de cor amarela (yellow) para resoluções de ecrã inferiores a 800px. A partir daí, contudo, a condição do media-query passará a ser verdadeira, pelo que o CSS que contém sobrepor-se-á ao anterior, passando teste a ocupar 50% do espaço disponível e a ter fundo laranja (orange).

Utiliza-se um media query em design responsivo sempre que é necessário alterar as “regras de negócio” de um determinado layout. Por exemplo, texto em duas colunas pode ser apropriado para um dispositivo do tipo tablet ou um ecrã de secretária, mas não para um smartphone, em que uma única coluna e um tamanho de texto um pouco maior podem facilitar a leitura.

Mobile First — Dispositivos Móveis em Primeiro Lugar

É considerada boa prática, no desenho de layouts responsivos, tomar em primeiro lugar como alvo os dispositivos móveis e ir “crescendo” a partir daí. Assim, as regras dos media queries devem aplicar-se a resoluções “maiores do que x…” e ir introduzindo alterações à medida que a resolução aumenta. Desta forma, privilegia-se em termos de velocidade de renderização os dispositivos móveis, cuja utilização é cada vez mais prevalente.

Dark Mode - Modo Escuro

Os “temas escuros” (texto claro sobre fundo escuro) estão muito em voga actualmente. Alguns sistemas operativos oferecem até a possibilidade de alterar automaticamente o tema da totalidade do ambiente de trabalho consoante a hora do dia (um tema de fundos claros durante o dia, um tema escuro à noite). É possível reflectir esta preferência do utilizador no conteúdo dum website usando CSS e um simples media query:

body {
	color: black;
	background-color: white;
}

@media (prefers-color-scheme: dark) {
	
	body {
		color: white;
		background-color: black;
	}
	
}

Modelo Cliente-Servidor na Internet

Um sistema cliente-servidor é uma estrutura distribuída entre os vários sistemas que requerem um serviço (os clientes) e o sistema que o fornece (o servidor). A comunicação é feita através duma rede de comunicações, que pode ser pública (como no caso da Internet) ou privada (uma Local Area Network, LAN). A World Wide Web, frequentemente referida apenas como WWW, é um sistema de partilha de documentos sobre a Internet que usa o modelo cliente-servidor.

Na WWW, os clientes comunicam com o servidor através do protocolo HTTP — HyperText Transfer Protocol. O “hypertext” a que o nome do protocolo diz respeito é o nosso HTML, embora o HTTP possa ser usado para transferir qualquer tipo de ficheiro.

No modelo cliente-servidor usado na WWW, muitos clientes podem em simultâneo (ou quase) fazer pedidos ao servidor através do protocolo HTTP. O servidor executa um software como o servidor web Apache, que “escuta” na rede por pedidos e envia a cada cliente a respectiva resposta. Cada cliente começa normalmente por pedir um ficheiro HTML (por convenção, o index.html) e pede depois cada um dos recursos mencionados nesse HTML (ficheiros de imagens, CSS, scripts, etc.) até obter a totalidade da página.

cliente-servidor
Esquema cliente-servidor na Internet.

Assim, para disponibilizarmos um site na Internet, precisamos de um computador permanentemente ligado à Internet e que execute um software servidor de HTTP, onde possamos colocar os ficheiros que constituem o site. Para os trabalhos realizados na Soares dos Reis, Curso de Design de Comunicação e disciplina de Projecto e Tecnologias, a Escola disponibiliza a cada aluno um espaço de trabalho no servidor cdcomunicacao.easr.pt. Um catálogo de trabalhos de alunos pode ser consultado no endereço http://cdcomunicacao.easr.pt/alunos. Esta máquina, para além de executar um software servidor de HTTP, executa também um servidor de SFTP (Secure File Transfer Protocol), um protocolo de transferência de ficheiros de forma segura (encriptada). Assim, usando um programa cliente de SFTP, cada aluno pode transferir os seus ficheiros de trabalho para a sua pasta pessoal no servidor e disponibilizá-los na Internet.

Software Cliente de SFTP

Exemplo de programas clientes de SFTP:

Designação e link Plataforma(s) Custo
Cyberduck MacOS, Windows Gratuito, contribuição facultativa
Filezilla GNU/Linux, MacOS, Windows Gratuito
WinSCP Windows Gratuito, contribuição facultativa

Nota: A maioria das distribuições de sistemas GNU/Linux já incluem todo o software necessário para estabelecer ligações SFTP. Os ambientes gráficos que apresentam (KDE Plasma, Gnome, Xfce, etc.) oferecem formas confortáveis de montar ligações SFTP a partir dos seus gestores de ficheiros, pelo que nestes sistemas não é necessário instalar qualquer software adicional.

Editores de Texto

Os alunos podem usar qualquer editor de texto ou IDE (Integrated Development Environment) que desejem. A título de exemplo, estes são alguns dos mais comuns:

Aplicações open-source:

Designação Plataforma(s) Custo
Atom GNU/Linux, MacOS, Windows Gratuito
Brackets GNU/Linux, MacOS, Windows Gratuito
Geany GNU/Linux, MacOS, Windows Gratuito
Kate GNU/Linux, MacOS, Windows Gratuito
Notepad++ Windows Gratuito

Aplicações proprietárias:

Designação Plataforma(s) Custo
BBEdit MacOS Primeiros 30 dias gratuitos, depois algumas funções bloqueiam. Desbloquear custa 43.90 €. (Para efeitos das aulas de Web Design, a versão bloqueada é perfeitamente suficiente.)
Coda 2, Nova MacOS 99 USD
Code Editor iOS 27.99 €
Espresso MacOS 99 USD + IVA (50% desconto para educação)
Sublime Text GNU/Linux, MacOS, Windows 80 USD
Textastic iOS 9.99 USD

As aplicações proprietárias têm a vantagem de incluirem clientes de SFTP e processos de upload de ficheiros bastante práticos — por exemplo, sincronizam todos os ficheiros alterados dentro de um projecto de forma automática. Têm normalmente também mais funcionalidades que as versões open-source, mas têm a desvantagem do custo.

Editores de Interface (UI/UX - User Interface/User eXperience)

Estas aplicações permitem construir protótipos de interfaces de forma visual, drag and drop e sem necessidade de fazer código. Algumas das mais comuns são:

Designação e link Plataforma(s) Custo
Adobe XD MacOS, Windows Gratuito para uso individual, não-profissional
Figma Web Gratuito (até 2 editores e 3 projectos)
Sketch MacOS Gratuito durante 30 dias (opção de ser 100% gratuito para instituições de ensino)

Animação de Elementos

Há duas possibilidades para animar elementos em CSS: transições e animações. A primeira permite definir um efeito que ocorre quando uma determinada propriedade do elemento é alterada (por exemplo, definir um efeito de deslizamento quando a altura dum elemento muda); a segunda permite definir vários estados intermédios para o efeito e associá-lo a um evento (um clique do rato, por ex.) — é uma técnica mais complexa mas oferece mais controlo sobre as várias fases do efeito.

Transições

Exemplo de CSS:

div {
	width: 200px;
	height: 100px;
	border: 1px solid black;
	background-color: cyan;
	transition: width 1s;
}

div:hover {
	width: 300px;
}

Resultado (em hover):

Animações

A regra @keyframes permite definir uma animação e atribuir-lhe um nome. No exemplo abaixo, é definida uma rotação do elemento através da indicação, em etapas de 25%, do estado da rotação para cada um desses momentos. Podiam também ser usadas as palavras reservadas from (equivalente a 0%, o início da animação) e to (o fim da animação).

Uma vez criada a animação, há que associá-la a um elemento. No exemplo abaixo, está a ser associada aquando do efeito hover do rato, através da propriedade animation-name. É importante indicar o tempo de duração da animação usando a propriedade animation-duration, de outra forma ela não será visível.

Exemplo de CSS:

/* Primeiro, definir o efeito. */

@keyframes example {
	0% { transform: rotate(0); }
	25% { transform: rotate(90deg); }
	50% {transform: rotate(180deg); }
	75% { transform: rotate(270deg); }
	100% { transform: rotate(360deg); }
}

/* Depois, aplicar o efeito ao elemento. */

div {
	width: 100px;
	height: 100px;
	border: 1px solid black;
	background-color: yellow;
}
div:hover {
	animation-name: example;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

Resultado (em hover):

Variáveis em CSS

É possível definir variáveis no ficheiro CSS. Por exemplo:

:root {
	--site-width: 1200px;
	--site-bg-color: #f0f0f0;
	--site-text-color: #303030;
	--site-grey-backgrounds: #fafafa;
	--site-grey-borders: #d0d0d0;
}

Os nomes das variáveis começam sempre por duplo-hífen. O selector usado para construir a regra CSS define o escopo no qual a variável é válida. É costume usar-se a pseudo-classe :root para definir variáveis que podem ser usadas em todo o documento HTML.

O código acima define cinco variáveis de escopo global e atribui-lhes valores. Essas variáveis podem depois ser usadas ao longo do ficheiro CSS, através da função var(), em regras como:

body {
	max-width: var(--site-width);
	background-color: var(--site-bg-color);
	color: var(--site-text-color);
}

Desta forma, sobretudo em páginas relativamente grandes em que estes valores possam ser repetidos muitas vezes, se for necessário alterá-los, uma simples edição do valor da variável conduzirá à alteração em toda a página.

Tipografias Variáveis

O Que São?

As tipografias variáveis diferem das tipografias estáticas TrueType (.ttf) e Web Open Font Format (.woff) por permitirem que muitas variações da tipografia sejam descritas num único ficheiro, ao invés de terem um ficheiro para cada espessura, peso e estilo. Por ex., a tipografia Roboto descrita de forma estática apresenta tipicamente os ficheiros:

Numa tipografia variável, todas estas variações são descritas por um único ficheiro, cujo tamanho é normalmente bastante menor que a soma dos tamanhos dos vários ficheiros do formato estático.

Este formato foi proposto em 2016 pelas empresas Apple, Adobe, Google e Microsoft.

Eixos de Variação

O conceito de tipografia variável compreende a noção de eixos de variação - escalas segundo as quais cada um dos aspectos que definem a tipografia podem variar. (Por ex.: espessura, inclinação, altura, etc.)

Há dois tipos de eixos de variação:

Registados
São os mais frequentes e estão estandardizados. Há propriedades "tradicionais" de CSS para alterar cada um deles, como font-weight ou font-style. São eles: peso (“whgt”), largura (“wdth”), inclinação (“slnt”), itálico (“ital”) e tamanho óptico (“opsz”).
Personalizados
O autor da tipografia pode definir qualquer número de eixos personalizados, desde que atribua a cada um um código único de quatro letras que o identifique inequivocamente.

A par das (já existentes) propriedades de CSS, foi definida uma nova propriedade que permite manipular os vários eixos, mesmo os personalizados. Exemplo:

font-variation-settings: "wght" 650, "wdth" 120, "AX01" 50;

Atenção que as sequências de quatro letras que identificam cada eixo são case-sensitive - maiúsculas são diferentes de minúsculas! Os eixos registados usam sempre minúsculas, os personalizados devem usar maiúsculas (mas podem não o fazer).

(De cada vez que se usa font-variation-settings é necessário redeclarar valores que possam ter sido declarados previamente.)

O Eixo “Weight” (wght)

Este eixo define o “peso” da tipografia. Pode ser manipulado pela propriedade CSS font-weight.

O Eixo “Width” (wdth)

Este eixo define o a largura da tipografia (quão condensada ou extendida é). Pode ser manipulado pela propriedade CSS font-stretch. Expressa-se em valores percentuais, sendo 100% o normal. Os valores mais usados situam-se no intervalo [75%, 125%], mas outros valores podem também ser usados. Na instrução font-variation-settings, omite-se o símbolo “%”.

O Eixo “Italic” (ital)

Este eixo define se uma tipografia é representada em itálico ou não (CSS font-style). Assim, ao contrário dos outros, não compreende uma escala, mas um valor booleano: ou é verdadeiro (1) ou falso (0).

Atenção que itálico é diferente de oblíquo. A versão itálica duma tipografia contém frequentemente caracteres bastante diferentes do que seriam os da versão normal oblíquos. O carácter oblíquo da tipografia é definido pelo eixo “Slant” (próximo parágrafo). Uma nova propriedade de CSS foi definida para evitar que o browser faça o cálculo do itálico a partir da tipografia normal:

font-synthesis: none;

O Eixo “Slant” (slnt)

Este eixo representa a obliquidade da tipografia. Não é verdadeiro itálico, mas sim a tipografia normal afectada dum ângulo - não há lugar a qualquer correcção ou substituição de tipografia, é apenas um cálculo algébrico. O intervalo de valores usado é normalmente [0, 20], sendo 0 vertical. Mas qualquer valor de -90 a 90 pode ser usado.

(Nota: com font-variation-settings, não se usa o sufixo “deg”.)

O Eixo “Optical Size” (opsz)

Este eixo permite definir um factor de compensação na largura de cada caracter. É tipicamente aumentado em tamanhos de tipografia muito pequenos e diminuído em tamanhos muito grandes. Um novo atributo de CSS, font-optical-sizing, foi definido para manusear este eixo. Contudo, esta propriedade só permite os valores auto (correcção automática de acordo com o tamanho da tipografia) ou none (correcção automática desligada). Usando font-variation-settings é possível definir o factor de compensação.

Exemplo de Eixo Personalizado: “Grade” (GRAD)

Este eixo aparece frequentemente em muitas tipografias e permite controlar o peso relativo de cada caracter (a densidade), mas sem alterar o espaço que o texto ocupa.

A Regra @font-face para Tipografias Variáveis

A regra é muito idêntica à usada para tipografias estáticas, mas agora é possível indicar quais as gamas de valores para cada um dos eixos. Há ainda um parâmetro format.

Exemplo para uma tipografia normal:

@font-face {
	font-family: 'MyVariableFontName';
	src: url('path/to/font/file/myvariablefont.woff2') format('woff2-variations');
	font-weight: 125 950;
	font-stretch: 75% 125%;
	font-style: normal;
}

Exemplo duma tipografia normal e com itálico:

@font-face {
	font-family: 'MyVariableFontName';
	src: url('path/to/font/file/myvariablefont.woff2') format('woff2-variations');
	font-weight: 125 950;
	font-stretch: 75% 125%;
	font-style: oblique 0deg 20deg;
}

Uma tipografia só com itálico:

@font-face {
	font-family: 'MyVariableFontName';
	src: url('path/to/font/file/myvariablefont.woff2') format('woff2-variations');
	font-weight: 125 950;
	font-stretch: 75% 125%;
	font-style: italic;
}

E uma tipografia oblíqua:

@font-face {
	font-family: 'MyVariableFontName';
	src: url('path/to/font/file/myvariablefont.woff2') format('woff2-variations');
	font-weight: 125 950;
	font-stretch: 75% 125%;
	font-style: oblique 0deg 12deg;
}

O parâmetro format pode tomar valores como woff-variations, woff2-variations e truetype-variations consoante o formato do ficheiro da tipografia variável.

Referências

Tipografias de Tamanho Variável

Em design responsivo, é por vezes desejável que o tamanho duma tipografia varie consoante a largura da página. Há normalmente um valor mínimo e um valor máximo que não desejamos ultrapassar, mas entre eles a tipografia deve variar de tamanho (linearmente) em função da largura da página.

Como exemplo, desejamos que uma tipografia:

50px 250px 360px 1200px

A linha a azul representa a zona de variação linear. Recorrendo à equação da recta:

y = m × x + b

O declive (m) pode ser calculado por:

y = (y1 - y0) / (x1 - x0)

Neste caso: y = (250 - 50) / (1200 - 360) = 0,238 (aprox.)

A ordenada na origem (b), para qualquer ponto da recta, pode ser calculada por:

b = y - m × x

O que resulta, tomando o ponto (1200, 250) como referência, em: b = 250 - 0,238 × 1200 = -35,6

Logo, para este exemplo:

y = 0,238 × x - 35,6

Este comportamento pode então ser conseguido de duas formas:

Usando Media-queries

@media (max-width: 360px) {
	p { font-size: 50px; }
}
@media (min-width: 361px) and (max-width: 12000px) {
	p { font-size: calc(23.8vw - 35.6px); }
}
@media (min-width: 1201px) {
	p { font-size: 250px; }
}

Usando a Função clamp()

p {
	font-size: clamp(50px, 23.8vw - 35.6px, 250px);
}

O valor do declive aparece multiplicado por um factor de 100 porque a unidade (1 ecrã inteiro) tem 100vh de largura.

A função clamp(valor mínimo, expressão do valor intermédio, valor máximo) permite definir os três parâmetros de uma vez (mínimo, expressão do intermédio e máximo), sendo que a expressão algébrica do valor intermédio não necessita de recorrer à função calc() e pode conter parcelas em diferentes unidades.