Comment utiliser une fonte «non-standard» sur un site Web ? - Alsacréations

Il est de notoriété publique que l'usage des fontes sur le Web est limité à une poignée de fontes non pas standardisées, mais suffisamment répandues pour pouvoir être utilisées sans trop de risques. Et cela pour une raison très simple: la police de caractères que l'on souhaite utiliser doit être présente sur le système de l'utilisateur pour être utilisée par le navigateur. Quand @font-face tombe à l'eau CSS 2 (publié en 1998) comprenait un mécanisme qui autorisait les auteurs de pages web à proposer une fonte au téléchargement, fonte qui serait ensuite utilisée dans la page. Il s'agit de la règle @font-face. la plupart des fontes disponibles sont protégées par le droit d'auteur et ne peuvent pas être redistribuées, y compris comme fonte «intégrée» à un site web; les fontes rajoutaient un poids conséquent aux pages (jusqu'à plusieurs centaines de Ko); les développeurs des navigateurs étaient peu enclins à affronter les deux problèmes ci-dessus (surtout le premier). Google Web Fonts

La typographie dans le graphisme. sur Geekeries.fr | Découvrir W La typographie, qui commença en 1450 avec l’invention de Gutenberg, nous permet de nos jours à communiquer plus facilement et plus esthétiquement. Nous devons soigner les différents aspects et mettre en valeur les informations essentielles de nos sites/blog ou encore pour nos documents imprimés. Mais, tout le monde ne connaît pas les règles de bases de la typographie, et nous voyons des fois, pour ne pas dire tout le temps, des coquilles très perturbante, que ce soit chez les professionnels (même si cela ce fait de plus en plus rare) ou les novices. Cet article a pour but, d’aider bien évidemment les novices ou toutes personnes intéressées par la typographie générale. Je vais vous présenter, quelques types de caractères, et vous expliquer le rapport graphisme/sens du texte avec les différentes classifications qu’ont créés de brillants typographes. Mais également de la couleur dans la typographie, la lisibilité d’un texte en couleur dépend du contraste et de l’effet spatial.

Bonnes pratiques pour les déclarations @font-face Petit rappel historique À l’origine, les déclarations CSS @font-face faisaient partie de la norme CSS 2.0 et étaient supportées aussi bien par Internet Explorer 6 que par Netscape 4. Nous étions alors à la fin des années 90 et la guerre entre ces deux navigateurs faisait rage. Avec CSS 3, c’est le grand retour en force des fontes web à travers le module CSS Fonts qui redéfinit la méthode d’insertion des fontes personnalisées dans les navigateurs. Déclaration simplifiée Une déclaration simple ressemble à ça : La propriété font-family permet de définir le nom de la fonte tel qu’il sera utilisé par la suite dans les déclarations de style. Gestion des formats de fonte Le problème de l’exemple précédent, c’est qu’il ne fonctionnera qu’avec les navigateurs qui supportent les polices au format TrueType. Il n’y a qu’une seule façon de déclarer plusieurs fichiers alternatifs pour une même fonte, c’est en séparant les déclarations d’url par une virgule (pratique assez courante avec CSS3). Conclusion

La méthode matchMedia ou les Media Queries pour JavaScript Vous connaissez certainement les Media Queries CSS. Celles-ci permettent d'adapter les instructions de style appliquées à un document HTML, en fonction de nombreux critères (résolution de l'écran, dimensions, périphérique de sortie). C'est la technique la plus souple et la plus utilisée actuellement pour ajuster dynamiquement l'affichage et obtenir un rendu graphique différent sur écrans classiques, mobiles, tablettes, et autres moyens d'accéder au web. Avec matchMedia(), les mêmes capacités de détection sont rendues disponibles en JavaScript. La syntaxe de la requête média reste la même, ce qui est bien agréable. C'est une méthode qui dépend de l'objet window (la fenêtre du navigateur) et qui prend en argument une chaîne de texte contenant l'expression à tester, pour retourner true ou false via sa propriété matches. <script>if (window.matchMedia("(min-width: 600px)").matches) { } else { } </script> Voir la démonstration n°1 Voir la démonstration n°2 Voir la démonstration n°3

Typosphère.fr | par Patrice Chaminade Adobe Edge Web Fonts SlickNav - Responsive Mobile Menu Plugin for jQuery LetterCult ? Custom Letter Culture MARIE & JULIEN Créer la maquette de son site web pro : les bons outils Une fois réalisés le cahier des charges et l'arborescence de son site web, commence la phase de maquettage, aussi appelée « wireframing ». Une étape indispensable pour se faire une idée plus précise de l'ergonomie du site. De nombreux outils de wireframing gratuits ou payants sont aujourd'hui disponibles pour réaliser cette tâche. Notre vidéo Le wireframing ou maquettage de sites web : qu'est-ce que c'est ? Le « wireframing » (maquettage) est l'étape consistant à représenter schématiquement l'organisation d'un site web (ex : arborescence), ainsi que son interface graphique (interactivité et ergonomie). Outils et logiciels de maquettage ou de wireframing Les outils de maquettage se destinent à l'ensemble des professionnels réunis autour d'un projet de conception web, qu'ils soient ou non techniciens. Pour quels professionnels ? Quelques outils de création de maquettes gratuits Pencil Project Lumzy Le créateur du projet peut inviter des tiers à y participer pour collaborer en temps réel. Cacoo

fonts, typefaces and all things typographical ? I love Typography (ILT) Ergonomie web et logiciel, architecture de l'information, utilisabilité sites Internet – Ergolab