Comment imposer des contraintes aux bords extérieurs des caractères variables ?

Question

Je suis en train de créer mon premier logo variable pour un client en utilisant HTMl et CSS. J'ai créé l'effet que je voulais, la première lettre se dilatant alors que la seconde se contracte, mais les bords extérieurs de mes caractères se déplacent aussi légèrement vers l'intérieur et l'extérieur. Qu'ai-je fait de mal pour que cela se produise ou que puis-je ajouter pour verrouiller les points des bords extérieurs afin que cela ne se produise plus ?

CodePen

.em-tight { letter-spacing: -1.5em; }
@font-face {
  font-family: 'etc-trispace';
  src: url(data:font/woff2;base64,d09...) format('woff2-variations');
}

body {
font-family: 'etc-trispace';
text-rendering: geometricPrecision;
margin: 10vh auto;
text-align: center;
overflow: hidden;
}

@keyframes bigger {
0%   {font-variation-settings: "wght" 200, "wdth" 50 ; }
25%   {font-variation-settings: "wght" 200, "wdth" 200; }
50%   {font-variation-settings: "wght" 200, "wdth" 200; }
75%   {font-variation-settings: "wght" 200, "wdth" 50;  }
100% {font-variation-settings: "wght" 200, "wdth" 50 ;}
    }

p span {
    animation: bigger infinite;
    animation-duration: 5s;
    animation-timing-function: ease;
    font-size: 40vh;
    margin: 0 auto;
    line-height: 1;
    font-weight: normal;
    }

p span:nth-child(2) {
animation-delay: 2.5s
}

Answer 1

Cette animation est assez impressionnante.

Voici ce que j'en pense.

Parfois, j'utilise un guide pour voir ce qui se passe vraiment sous le capot. Essayez d'ajouter ces bordures CSS pour le dépannage :

p span:nth-child(2) {
  animation-delay: 2.5s;
  border:thin dashed red;
}
p span:nth-child(1) {
  border:thin dashed green;
}

Ensuite, essayez l'animation avec des caractères égaux dans chaque catégorie. span . Utilisez un caractère tel que H o M qui ont une géométrie différente pour vous donner plus d'informations :

<p class="em-tight"><span>O</span><span>O</span></p>

Cela devrait vous permettre de voir qu'il y a un espace avant et après le glyphe qui s'étend et se contracte également avec l'animation.

En typographie, cet espace est appelé le "port latéral". Cet espace est un composant non modifiable du glyphe. En outre, le glyphe peut avoir un support latéral différent sur le bord d'attaque (gauche) du glyphe et sur le bord de fuite (droite).

Nos bordures de guidage nous montrent que le roulement latéral de votre animation se dilate et se contracte également avec la forme de la lettre, et que le roulement gauche/droite est inégal. D'où la nature non uniforme de votre espacement.

En CSS, nous disposons de quelques outils pour espacer manuellement (crénage) les lettres individuelles, tels que la fonction letter-spacing propriété. Je crois que le problème que vous rencontrez est qu'une telle letter-spacing n'est pas encore intégré à la font-variation-settings que vous utilisez dans votre animation.

Solutions de contournement :

1. Vous pouvez convertir ces glyphes en images de contour et supprimer l'espacement latéral. Vous pouvez ensuite le remplacer par un espacement que vous pouvez contrôler. Cela fonctionnera si vous n'avez pas besoin d'utiliser réellement des caractères dans l'animation. Si l'animation est un logo, comme vous le dites ci-dessus, alors il n'y a pas de signification significative que D y H peut transmettre à un moteur de recherche ou à un navigateur sous la forme dans laquelle vous le présentez. Compte tenu des informations fournies, ce serait la première solution que je choisirais. Un GIF animé primitif ferait ce travail en un clin d'œil.

2. Passez à une autre police de caractères, qui a un roulement latéral uniforme. Cela peut ne pas être possible si vous utilisez - comme je le soupçonne - des caractères spécifiques à une marque et que vous êtes contraint d'utiliser un caractère spécifique.

3. Si vous avez accès à des ressources, vous pouvez faire recouper le type - pour au moins les deux caractères dont vous avez besoin. Ces ressources peuvent être votre propre connaissance des logiciels d'édition de caractères ou un budget pour engager un créateur de caractères. La licence de typographie doit également être prise en compte.