Comment rendre votre typographie responsive

Contenu

• 01. Mettre la typographie à l'échelle
• 02. Notre page d'exemple
• 03. Vérifier d'abord le plus petit écran
• 04. Monter
• 05. De haut en bas!
• 06. Pour résumer le tout
• 07. Lectures complémentaires
• Aimait ça? Lisez-les!

• Connaissances nécessaires: Connaissances de base en CSS et HTML. Connaissance de la typographie
• A besoin: Votre éditeur de texte préféré et un navigateur
• Durée du projet: Environ 30 minutes

Dossier de support 1

Nous avons l'habitude de penser à la taille du type par rapport à une taille de police de base en utilisant des ems ou des pourcentages. Avec une conception Web réactive, nous écrivons de nombreuses règles et sélectionnons des points d'arrêt pour nous assurer que notre mise en page s'adapte à de nombreuses tailles d'écran. Le type est un fluide merveilleux, mais ce n’est pas une taille unique. Nous allons examiner quelques conseils rapides pour que votre typographie s'adapte parfaitement à votre mise en page, quels que soient l'appareil ou la largeur de l'écran.

Bien sûr, il y a bien plus à cela que ce qui peut être couvert dans un didacticiel. Vous trouverez donc également de nombreuses ressources utiles ci-dessous.

01. Mettre la typographie à l'échelle

Ah, conception de sites Web réactifs! Des grilles et des requêtes multimédias merveilleusement fluides, faisant de nos conceptions des écrans de toutes tailles. Heureusement pour nous, le type évolue presque à l'infini et se reflète dans n'importe quel conteneur de taille que nous lui donnons. Pas besoin d'y réfléchir une seconde fois pour nos mises en page réactives… ou est-ce que nous? Dans l'idéal, lorsque nos mises en page globales évoluent, notre type devrait l'être également, et voici une façon de le faire.

02. Notre page d'exemple

Pour les besoins de cet exemple, j'ai préparé une page très simple à utiliser pour la démonstration en utilisant les premiers paragraphes des Aventures d'Alice au pays des merveilles comme contenu. J'espère que votre site en aura un peu plus, mais la simplicité correspond parfaitement à nos besoins pour cette démo et la même technique peut être appliquée à des pages plus complexes.

Jetons un coup d'œil à notre source pour voir ce que nous avons sous le capot. Un H1 pour notre titre et quelques paragraphes enveloppés dans un div contenant, assignés de manière pratique à la classe de wrap. Nous utiliserons ce conteneur pour vous aider à gérer les longueurs de nos lignes dans cet exemple. Pour votre propre travail, la largeur de ce conteneur sera déterminée par votre grille et ses comportements réactifs mais les mêmes idées s'appliquent.

Un rapide plongeon dans le CSS montre que nous avons défini la taille de la police du corps à 100% (environ 16 pixels pour référence). Et chaque élément de texte est dimensionné en ems. Gentil et relatif! Nous avons pris un bon départ:

corps {
taille de la police: 100%;
hauteur de ligne: 1,6875;
famille de polices: Georgia;
}

Nous avons configuré notre échelle de typographie de base. Voyons maintenant comment cela se produit à différentes tailles d'écran.

03. Vérifier d'abord le plus petit écran

Commençons par examiner notre disposition sur une très petite largeur d’écran, disons quelque chose d’environ 320 pixels de large. Probablement ce que vous voyez sur ces appareils mobiles populaires.

Initialement à cette largeur étroite, nos longueurs de ligne sont un peu plus courtes que la longueur optimale généralement acceptée de 45 et 75 caractères. Ou, si vous n’avez pas envie de compter les caractères, vous remarquerez peut-être que les lignes semblent courtes et compliquent le suivi du texte. Personnellement, j'ai tendance à aller plus souvent avec le sentiment de lecture qu'autrement.

Pour avoir un peu plus de place pour une longueur de ligne confortable, nous pourrions réduire la taille globale du type, ou nous pourrions agrandir un peu notre conteneur. Puisqu'il s'agit d'un didacticiel sur le type de dimensionnement, je vais utiliser le premier, mais le second serait également une option tout à fait acceptable.

Pour résoudre ce problème, écrivons une requête multimédia pour une largeur maximale de 400 pixels. Oui, ce n’est pas exactement 320 pixels, mais je préfère définir des points d’arrêt en fonction de l’endroit où la conception en a besoin, et non en fonction de mesures d’appareil particulières.

Le moyen le plus simple de changer la taille de tous les types est de changer la taille attribuée à notre corps>Propriété font-size de:

@média uniquement écran et (max-width: 400px) {
corps {taille de la police: 90%;}
}

Grâce au fait que nous avons initialement dimensionné tous nos types avec des ems, nous pouvons effectuer ce changement à tous les niveaux avec une seule ligne. Ouais, pour le dimensionnement relatif du type!

04. Monter

Si nous faisons comme les concepteurs Web et continuons à redimensionner la fenêtre de notre navigateur en grand, notre conteneur de taille relative ne cesse de s'agrandir et notre texte se redimensionne au fur et à mesure. Exactement ce que vous attendez. Mais gardez un œil sur la longueur de la ligne. Quand commence-t-il à paraître et à se sentir trop long?

À environ 800 pixels de large (de la taille globale de la fenêtre du navigateur), les longueurs de ligne commencent à paraître inconfortablement longues. Cela semble être le bon moment pour ajouter un autre point d'arrêt pour notre type.

@media uniquement écran et (max-width: 800px) {
corps {taille de la police: 100%;}
}

@media uniquement écran et (max-width: 1100px) {
corps {taille de la police: 120%;}
}

Voici à quoi ressemble notre page maintenant, quelle que soit la largeur de la fenêtre comprise entre 800 et 1 100 pixels. Nous avons un peu plus d'espace pour travailler et maintenant notre type le remplit un peu plus bien:

Cette fois-ci, nous rédigeons deux requêtes multimédias. Un avec une largeur maximale de 800 pixels avec la taille de la police du corps définie à 100% qui couvre tout entre une largeur de fenêtre de 500 pixels et une largeur de fenêtre de 800 pixels, puis une seconde lorsque la largeur de notre fenêtre est supérieure à 800 pixels afin que nous puissions augmenter notre taille de police de base.

J'ai augmenté la taille de la police de base à 120% une fois que nous avons dépassé 800 pixels de largeur pour obtenir un peu plus la longueur de la ligne là où je l'aime. Ceci est un peu subjectif bien sûr, et dépend également du contenu lui-même et du contenu environnant. Choisissez des points d'arrêt et des changements de dimensionnement qui ont un sens pour vous et votre conception. Une lecture confortable et des mises en page équilibrées sont ici l'objectif. Tester vos mises en page sur plus qu'un simple navigateur de bureau redimensionné vous aidera également à trouver les meilleurs endroits pour celles-ci.

05. De haut en bas!

Vous pouvez deviner ce qui va suivre, je vais continuer à élargir la fenêtre de mon navigateur et voir ce qui se passe. Sans surprise, car les longueurs de ligne s'allongent et elles recommencent à approcher des longueurs insupportables autour de 1100 pixels. Temps pour un autre point d'arrêt? Nous pourrions continuer indéfiniment comme ça, mais cela ne semble pas si intelligent, cela commence à paraître sans fin!

Techniquement, votre type peut continuer à évoluer à l'infini. Cependant, il y a de fortes chances que votre mise en page et vos images ne le puissent pas. À un moment donné, nous devons faire des pauses. Et pour cette simple démonstration, j’ai décidé que ce point était de 1 100 pixels.

Une dernière requête multimédia liée au type reste à écrire. Je veux quelque chose qui empêchera nos longueurs de ligne de croître afin que nous puissions geler les choses à ce stade où nous avons des longueurs de ligne acceptables. Le moyen le plus simple d'y parvenir est de mettre une largeur maximale sur le div contenant notre texte.

Nous devons d'abord déterminer la largeur approximative de notre div contenant en pixels. Si la fenêtre de notre navigateur a une largeur de 1100 pixels et que notre div wrap a une largeur de 70%, un petit peu de maths nous indique que notre div mesure environ 770 pixels de large. (1 100 *. 7x).

Forts de cela, nous modifierons notre dernière requête multimédia comme suit:

@média uniquement écran et (largeur min: 1100px) {
corps {taille de la police: 120%;}
.wrap {largeur maximale: 770px;}
}

Notre type de démonstration est aussi important que nous avons décidé qu'il est autorisé à obtenir:

Là nous l'avons. Une technique simple pour garder votre texte agréable et confortable à lire sur une variété de tailles d'écran.

06. Pour résumer le tout

Même à partir de cet exemple simple, vous commencez probablement à voir que vous pourriez être beaucoup plus détaillé sur l'endroit où vous ajoutez des points d'arrêt pour votre type pour contrôler la longueur de la ligne. Alors qu'en est-il du leadership et de la hiérarchie? Celles-ci sont également affectées lorsque la taille de votre conteneur et de votre type change. Il y a tellement de choses à considérer!

Gardez un œil sur votre type, puis effectuez les ajustements nécessaires pour votre mise en page et votre projet. Il ne s'agit pas du nombre de requêtes multimédias ou de points d'arrêt que vous ajoutez. Il s'agit de rendre votre conception solide pour vous et toute personne qui l'utilise.

07. Lectures complémentaires

Cette simple démo n'est que la pointe de l'iceberg. Si vous souhaitez en savoir plus sur la typographie pour la conception Web réactive, voici quelques lectures recommandées:

• Tim Brown fait un excellent travail en rassemblant des techniques et des choses à penser sur un type de site Web agréable.
• Il y a plus que des pourcentages et des ems en ce qui concerne nos options de dimensionnement du type sur le Web. Ethan Marcotte vous explique tout sur le blog Typekit.
• Il est difficile de parler de type sans tomber dans le bavardage sur l’établissement d’un rythme vertical. Cet article classique de 24 façons est une excellente idée.

Val Head est un concepteur et consultant qui aime voir Internet rester aussi génial que possible. Elle dirige le Web Design Day, écrit pour CreativeJS et blogue sur valhead.com.

Aimait ça? Lisez-les!

• Qu'est-ce que la typographie?
• Téléchargez les meilleures polices gratuites
• Sélection gratuite de polices graffiti
• Polices de tatouage gratuites pour les concepteurs
• Les meilleures polices Web gratuites pour les concepteurs