Utilisez les polices web de qualité du service Typekit pour créer un superbe site, sans aucune programmation.

Votre abonnement à Creative Cloud donne accès à des milliers de polices web Typekit de qualité que vous pouvez facilement incorporer dans vos créations pour postes de travail et terminaux mobiles.

1. Ajout d'une police web Typekit

Téléchargez l'archive beautiful-web-typography.zip et ouvrez le fichier Ike's_Bikes_before.mu. Passez en mode Conception et cliquez sur l'outil Texte. Sélectionnez le texte sous le titre Services. Dans le panneau Texte, ouvrez le menu déroulant Police, puis cliquez sur + Ajouter des polices web.

Ajout de polices web

2. Choix d'une police

Cliquez sur Commencer, puis sélectionnez l'onglet Typekit dans la fenêtre Ajouter des polices web. Recherchez et sélectionnez la police Adelle dans le navigateur, puis cliquez sur OK.

Vérifiez que votre texte est toujours sélectionné, puis choisissez Adelle Light dans le menu déroulant.

Remarque : votre abonnement payant à Creative Cloud donne accès à une plus grande bibliothèque de polices web Typekit. Le style du site web de ce tutoriel a été créé à l'aide de certaines de ces polices.

Recherche d'une police

3. Ajout de polices différentes pour les titres et les paragraphes

Pour donner à ce site un style moderne et épuré, il convient de sélectionner les polices des titres et des paragraphes avec le plus grand soin. 

Ajoutez la police Prenton Ultra Condensed en suivant la procédure décrite à l'étape 1. Sélectionnez ensuite le titre Services à l'aide de l'outil Texte. Dans le panneau de contrôle, ouvrez le menu déroulant Police, puis choisissez Prenton Ultra Condensed > Regular.

Ajout de la police Prenton Ultra Condensed

4. Redéfinition des styles de paragraphe

Sans désélectionner le titre Services, ouvrez le panneau Styles de paragraphe. Le style H1 + doit être sélectionné. Cliquez sur l'icône Redéfinir le style pour appliquer la nouvelle police à l'ensemble des titres.

Sélectionnez le paragraphe sous le titre Services. Le style Body + doit être sélectionné dans le panneau Styles de paragraphe. Pour redéfinir le style, cliquez sur l'icône Redéfinir le style. La police Adelle Light est à présent appliquée à l'ensemble du corps du texte.

Conseil : pour mettre à jour un style, vous pouvez également cliquer avec le bouton droit sur un style et sélectionner Redéfinir le style.

Icône Redéfinir le style

5. Mise en majuscule des titres

Sélectionnez le titre Point Service à l'aide de l'outil Texte. Ouvrez le panneau Texte (Fenêtre > Texte) et cliquez sur l'icône Majuscules. 

Ouverture du panneau Texte

6. Utilisation d'un exposant

Sélectionnez les deux zéros (00) du prix indiqué sous le titre 93 point service. Cliquez sur l'icône Exposant dans le panneau Texte. Répétez l'opération pour les autres prix figurant sur la page.

Utilisation d'un exposant

7. Modification des puces des listes

Chaque police possède son propre jeu de puces par défaut. Toutefois, pour un style plus original, vous pouvez appliquer les puces d'une autre police à vos listes.  Ajoutez la police Franklin Gothic URW Extra Condensed en suivant la procédure décrite à l'étape 1. 

Ouvrez le panneau Puces (Fenêtre > Puces). À l'aide de l'outil Texte, sélectionnez la liste située sous le titre 67 point service. Cliquez sur le bouton représentant une liste à puces pour en créer une. 

Dans le panneau Puces, cliquez sur le bouton d'options en regard du menu des listes à puces, puis sélectionnez + Nouveau caractère. Ouvrez le menu déroulant Police et choisissez Franklin Gothic URW Extra Condensed > Book. Cliquez sur la puce en forme de losange, puis sur Ajouter et OK.

Panneau Puces et texte sélectionné
Modification du style de puce

8. Application du nouveau style de puce

Vous pouvez à présent cliquer sur le losange dans le panneau Puces pour l'appliquer à votre liste.

Conseil : vous pouvez utiliser ce caractère comme nouveau style de puce. Ouvrez le panneau Styles de puce et cliquez sur l'icône Nouveau style. Appliquez ensuite ce style de puce à toutes les autres listes de la page. 

Application du nouveau style de puce

9. Utilisation de ligatures

L'utilisation d'une police prenant en charge les ligatures peut améliorer l'apparence des paires de caractères qui ont tendance à se chevaucher, comme « ff » et « fi ». 

La police Adelle appliquée au corps du texte prend en charge les ligatures, mais pour garantir leur affichage dans les navigateurs actuels, choisissez Fichier > Propriétés du site et cliquez sur l'onglet Contenu. Ensuite, dans le menu Caractères des polices web, sélectionnez l'option Tous. 

Utilisation de ligatures

 

Et voilà, vous avez terminé ! Donnez-nous votre avis sur ce tutoriel.

 

02/01/2017
Ali Pordeli
Cette page vous a-t-elle été utile ?
Oui
Non