Archetype – Un outil en ligne pour mieux choisir ses typos

0
25
vues
 

Archetype est une web app axée sur la typographie pour aider à faire les bons choix.

Il est parfois complexe de bien choisir ses typographies et surtout bien choisir celles qui vont bien ensemble. Certains tâtonnes encore sur Photoshop ou Sketch à la recherche des meilleures relations typographiques. D’autres utilisent des outils en ligne comme Wordmark.it qui ne permet pas réellement d’avoir d’aperçu en condition réelle. Il existe aussi Fontpair.co qui propose un panel de couples de fonts qui existent et permet à quiconque d’ajouter une autre paire vu sur le web (cette fois avec un aperçu de type titre + texte). Mais là encore il manque un peu de personnalisation.

Un tour rapide sur les fonctionnalités

Choix des polices

Archetype permet de choisir ses fonts parmi celles proposées par Google Fonts. Il est aussi possible de sélectionner des polices installées sur sa machine.
menu de sélection des Polices sur la gauche de l'interface
interface de choix des polices pour le titre et le le texte

Police en négatif

Sur l’interface vous pouvez voir ce que donne les polices en négatif :
aperçu de la police en négatif, blanc sur fond gris foncé

Personnalisations avancées

Une fois terminé vous revenez à l’écran d’accueil mais cette fois avec votre choix de police et là tout devient très intéressant. Vous pouvez modifier le texte à afficher comme dans n’importe quel éditeur de texte.
modifier le texte pour avoir un aperçu avec son propre texte

Vous pouvez modifier la taille de la police
changer la taille de la police

les espaces, l’interlignage et les différentes propriété que l’on retrouve en CSS
Les différents paramètres typographiques modifiables via l'interface

Changement des couleurs

Vous pouvez aussi changer la couleur de la typo et celle de son fond à l’aide des icônes en haut à droite de l’interface.
changer la couleur du texte et du fond. Ici le texte en blanc et le fond en violet

La typo en responsive

Une grande première pour un outil qui met en avant la typographie, le choix de voir le résultat Desktop ou Mobile. Ce qui permet de faire ses premiers choix de taille pour le responsive.
aperçu en version mobile. Réduction de la largeur disponible pour afficher le texte

Aperçu

Sur toutes les images que vous voyez depuis le début de cet article se trouvent des lignes horizontales. Il s’agit d’un outil de grid désactivable via le bouton se trouvant en haut à droite de l’interface ou même en demandant un aperçu final. Cet aperçu offre d’ailleurs la possibilité de voir les différents paramètres que l’on a modifié sur la police (taille, interlignage, espacement…)
mode aperçu Desktop

Exportation

Pour finir lorsque l’on est satisfait du résultat on peut exporter tout ça en CSS pour le web ou pour l’utiliser sur Sketch. Évidemment les fonts sont téléchargeable directement via l’interface.
Les outils finaux qui permettent l'aperçu, d'exporter le final et/ou télécharger les fonts

Conclusion

La personnalisation est vraiment excellente et permet de mieux définir ses choix de polices de manière très simple. Orienté web cette web app pense à l’exportation CSS et pour Sketch ce qui est vraiment pratique dans une équipe digitale. Cela permet de définir une base commune pour les devs et les designers.
En revanche j’aurais aimé plus de choix dans le responsive. Par exemple pouvoir définir ses propres breakpoints. Pour le reste même si tout n’est pas parfait je trouve qu’il s’agit d’un outil gratuit vraiment très bien fichu qui pourra en aider beaucoup.
Voilà de nouveau le lien magique vers Archetype. Amusez-vous bien et n’hésitez pas à venir partager votre expérience dans les commentaires.