Comment créer votre propre police. Conseils et programmes. Un moyen simple de connecter une police Web

salut! Aujourd'hui, dans le cadre de la chronique sur la conception de sites Web, je veux parler des polices à utiliser lors du développement d'un site Web.

En règle générale, tout le monde ne pense pas aux polices à utiliser pour le contenu du site. La sélection de belles polices pour le site est la partie la plus importante du développement de la conception. Puisque la lisibilité des informations du site dépend de cette partie, et ceci, comme vous le savez, est la chose la plus importante sur le site. Pour cette raison, cette question doit être prise très au sérieux.

Mais vous ne pouvez utiliser que les polices que les futurs visiteurs du site ont dans la conception du site. Ceci est fait pour s'assurer que les pages sont affichées correctement pour tous les utilisateurs, avec différents systèmes d'exploitation et navigateurs. Sinon, si vous utilisez des polices non standard, la plupart des visiteurs verront tout différemment et dans la plupart des cas de manière inesthétique. Pour cette raison, il est recommandé d'utiliser les polices standard répertoriées ci-dessous. La liste des polices comprend les polices installées sur le système d'exploitation Windows XP et supérieur.

Dans cet article, je ne considère pas les polices d'autres systèmes d'exploitation... Un concepteur de mise en page expérimenté doit savoir comment les polices sont mises en correspondance dans différents systèmes d'exploitation, et pendant la mise en page, il prescrira ce point dans les styles css.

Fondamentalement, lors du développement de la partie contenu de la conception, deux types de polices sont utilisés:

polices serif
polices hachées (polices sans empattement)

Polices Serif- Polices (serif anglais - serif) dont le style commence et se termine par des traits. Par exemple Times New Roman.

Polices sans empattement(polices hachées) - (anglais sans-serif -sans serif) polices avec des lignes droites strictes sans serif. Par exemple Arial.

Ci-dessous vous pouvez voir une capture d'écran des polices serif et sans serif.

Polices pour la conception Web:

Arial
Noir arial
Arial étroit
Réservez Antiqua
Siècle gothique
Comic Sans MS
Courier nouveau
Franklin moyen gothique
Géorgie
Impact
Console Lucida
Lucida Sans Unicode
Microsoft Sans Serif
Linotype Palatino
Sylfaen
Tahoma
Times New Roman
Trébuchet MS
Verdana
Webdings (divers symboles et signes)
Wingdings (divers symboles et signes)

Je voudrais également signaler un moment tel que le manque d'italique dans un certain nombre de polices, au lieu de l'italique, elles utilisent de l'inclinaison, ce qui rend le texte difficile à lire.

De polices standard sous Windows n'ont pas d'italique:

Noir arial
Comic Sans MS
Franklin moyen gothique
Impact
Console Lucida
Lucida Sans Unicode
Microsoft Sans Serif
Sylfaen
Tahoma

Étant donné que j'ai déjà mentionné les polices qui n'ont pas d'italique, je voudrais pour une chose noter le fait qu'il existe des polices qui sont à l'origine des polices en gras. Pour ces raisons, il est inutile d'utiliser des styles qui indiquent gras, car le résultat n'est pas ce que nous voulons.

Il existe de nombreuses façons de trouver la bonne police pour votre site Web. Par exemple, vous pouvez utiliser des services avec d'énormes bibliothèques de polices qui nécessitent un abonnement payant.

Si votre budget est serré ou si vous expérimentez un petit projet, vous pouvez utiliser les polices Web gratuites et disponibles gratuitement. Trouver la bonne police Web pour votre site Web peut prendre du temps, voici donc une sélection des meilleures d'entre elles.

1. Montserrat

Au fur et à mesure de son évolution, la typographie s'éloigne des affiches et enseignes urbaines vintage. La créatrice de cette police a tenté de préserver la beauté de la typographie des affiches urbaines qu'elle a vues dans les rues de Buenos Aires.

2. Abril fatface

Abril Fatface fait partie d'une famille de polices plus large avec 18 styles conçus pour une variété d'utilisations. Cette police a une présence forte et élégante, ce qui en fait le choix parfait pour les gros titres. Le plus souvent, il est combiné avec Lato, Open Sans et Droid Sans.

3. Affichage Playfair

Compte tenu de ses hauteurs x importantes et de ses petits descendeurs, Playfair Display convient également à l'écriture d'un titre, surtout si l'espace est limité. Il se marie bien avec la Géorgie et est souvent utilisé avec Oswald, Lato et Arvo.

4. GT Walsheim

Utilisé sur de nombreux blogs aujourd'hui, GT Walsheim est un sans empattement géométrique et fait partie de la famille Grilli Type. Vous devez payer pour l'ensemble complet des polices, mais Grilli Type offre gratuitement version d'essai GT Walsheim.

5. Merriweather

Si la lisibilité de l'écran est une priorité pour votre projet, utilisez le Merriweather qui a été créé à cet effet. De plus, cette police est constamment améliorée.

6. Josefin Sans

Josefin Sans a été créé selon les canons du design suédois vintage et a une esthétique géométrique élégante.

7. Gravitas un

Gravitas One est basé sur «UK fat face», une police publicitaire audacieuse qui a émergé pendant la révolution industrielle en Angleterre. Cette police a fière allure aux échelles moyennes à grandes et convient aux en-têtes, aux titres et aux onglets.

8. Jura

Les lettres de cette police reprennent les formes de l'écriture de Kaya-li. Il contient également des glyphes cyrilliques et grecs. Il est disponible en poids léger, normal, moyen et gras.

9. Ligue gothique

Initialement conçu par Morris Fuller Benton pour l'American Type Founders Company en 1903, League Gothic a trouvé de nouvelles utilisations après la mise à jour et l'ajout de nouveaux glyphes.

10. Fjord

Fjord est une police serif créée à l'origine pour les livres imprimés et est particulièrement adaptée pour placer du texte long dans un petit format d'impression. Il peut être utilisé pour créer un volume élevé contenu textuel sur le site, car la police présente une structure nette, des empattements proéminents et de longs sommets et descendants élégants.

11. Amarante

La famille de polices Amaranth présente un design italique non incliné avec peu de contraste et une courbure notable. Les trois styles Amaranth vont bien avec à peu près n'importe quelle autre police. Vous pouvez jouer avec cette police - expérimentez et choisissez la meilleure.

12. Poly

Cette police à contraste moyen a été créée à l'origine pour la langue native Wayuunaiki, qui nécessite des glyphes larges. Il dispose de petits stabilisateurs et de grandes hauteurs X, ce qui le rend particulièrement utile en non grandes tailles.

13. Gentium Basique

Cette police a été conçue comme une police multilingue qui comprend des lettres latines et grecques ainsi qu'une prise en charge cyrillique et avancée dans la version Gentium Plus. Gentium Basic et Gentium Book Basic sont disponibles en version Web gratuite, mais sont limités à l'alphabet latin uniquement.

14. Ouvrir sans

Open Sans est un représentant du grotesque humaniste. Cette police est très lisible et a été adaptée à la fois pour le Web et interfaces mobiles... Il s'agit d'une police non inclinée avec une police simple qui a un aspect neutre mais suffisamment agréable pour être utilisée à diverses fins.

15. Grand livre régulier

Il s'agit d'une police multifonctionnelle avec une grande hauteur d'x, un fort contraste de couleur et des empattements bien définis qui contribuent à la lisibilité du texte. Cette police semble bonne à la fois en impression et sur un écran basse résolution.

16. Signika

Cette police Web gratuite est sans empattement. Le faible contraste et la hauteur x élevée permettent à Signika de bien s'afficher à l'écran. La large gamme d'icônes comprend des symboles, des pictogrammes et des flèches.

17. Dalle Josefin

Créée selon les canons de la police géométrique caractéristique des années 30 du siècle dernier, avec l'ajout de caractéristiques scandinaves, la police Josefin Slab a les caractéristiques d'un type de dalle et ressemble à une machine à écrire. Fait intéressant, sa hauteur x est la moitié de la hauteur de la lettre majuscule.

18. Forum

Comme son nom l'indique, il s'agit d'une police romaine qui convient aux en-têtes verrouillage des majuscules, mais également adapté à l'affichage de textes. Les proportions élégantes de cette police rappellent l'architecture classique avec ses arcs semi-circulaires, ses corniches horizontales et ses colonnes verticales.

Nommé d'après l'une des villes mayas les plus célèbres, Tikal Sans possède les traits des glyphes utilisés dans l'écriture de la civilisation sud-américaine. Son créateur a choisi une grande hauteur d'x pour donner à la police un aspect moderne et un effet bénéfique sur la lisibilité, et une grande variété de polices lui permet d'être utilisée à des fins diverses.

20. Arvo

Adaptée à l'impression et au Web, cette police de dalle géométrique est disponible en Roman, Italic, Roman Bold et Bold Italic. Le faible contraste d'Arvo améliore la lisibilité à l'écran.

21. Bevan

Bevan a été inspiré par la police de caractères traditionnelle des années 30. Les lettres ont été numérisées, remodelées et optimisées pour le Web. C'est l'une des rares polices super audacieuses qui conviennent aux sites Web.

22. Ancien TT standard

Old Standard TT a été inspiré par l'empattement Modern, qui était populaire à la fin du 19e et au début du 20e siècle, puis oublié pendant longtemps. Cette police convient pour donner du style à un type particulier de contenu, comme la recherche scientifique ou des textes en grec ou en cyrillique.

23. Kreon

Idéal pour les sites Web d'actualités et les blogs, cet empattement possède également des fonctionnalités de dalle, mais son équilibre et son faible contraste rendent Kreon nettement plus personnalisé.

24. Droid sans

Droid Sans a été optimisé pour une lisibilité maximale, même dans les petites interfaces - comme les menus sur les écrans téléphones portables... Il s'agit d'une police de caractères neutre et non oblique avec des lettres simples et ouvertes.

25. Italiana

Le créateur de cette police s'est inspiré de la calligraphie italienne classique, donc la police sera très utile pour les projets où vous devez ajouter de l'élégance. Italiana convient également à la rédaction de titres d'actualité sous forme imprimée et électronique.

26. Vollkorn

Cette police serif élaborée et multifonctionnelle est très populaire. Sa clarté et sa solidité expriment confiance et énergie, ce qui le rend tout aussi efficace pour les grandes tailles pour les titres et les titres, ainsi que pour les gros volumes de texte dans des formats plus petits.

27. Acteur

Cette police a une hauteur d'x particulièrement grande, ce qui nécessite beaucoup d'espace. L'acteur a également un style démodé de certains personnages, tels que les nombres 6 et 9.

Avec ses racines au XVIe siècle, la police humaniste Garamond est devenue une véritable icône typographique, qui a servi de base à de nombreuses polices modernes, dont EB Garamond.

31. Ubuntu

Grotesque Ubuntu a été créé pour personnaliser le texte Web sur les ordinateurs de bureau et les appareils mobiles. Les utilisateurs sont encouragés à expérimenter cette police, à la modifier et à l'améliorer comme bon leur semble.

32. Rosario

Rosario est un sans empattement humaniste classique qui est parfait pour styliser les paragraphes de texte.

33. Dalle Roboto

Roboto Slab est l'une des polices Roboto. La version dalle est particulièrement accrocheuse avec ses formes géométriques et ses courbes ouvertes. Cela fonctionne aussi bien pour les écrans de gadgets que pour les versions imprimées de textes.

34. Oswald

La police est une version retravaillée du classique Alternate Gothic sans serif. Oswald a récemment été mis à jour pour offrir une variété de poids, des jeux de caractères étendus et un meilleur crénage.

35. Impasse

Stalemate est une police manuscrite élégante avec une touche vintage. Il convient pour créer des accents et personnaliser votre site Web.

36. Texte cramoisi

Cette police proportionnelle classique soigneusement conçue peut être utilisée à la fois pour afficher de grandes quantités de texte et pour écrire des en-têtes.

Dans ce didacticiel, je vais vous montrer comment créer votre propre police de site Web en utilisant vos propres icônes. Tout ce dont nous avons besoin pour cela est un programme pour créer graphiques vectoriels(Adobe Illustrator ou Inkspcape) et l'accès Internet, alors commençons! Vous pouvez télécharger toutes les images, icônes et polices css utilisées à la fin de l'article.

Pour ce tutoriel, nous allons faire quelque chose de simple. Pour la première icône, nous dessinerons une étoile régulière. Pour la deuxième icône - un aigle avec un W à l'intérieur. Il est assez facile à dessiner et vous pouvez créer toutes les formes et combinaisons. J'ai utilisé un illustrateur à cet effet.

Après avoir terminé la partie créative, votre création doit être enregistrée au format SVG. Cliquez sur "Enregistrer sous" et choisissez le type de fichier au format SVG. Vous pouvez maintenant passer directement à la création d'une police.

À ces fins, nous utilisons le service IcoMoon populaire et gratuit.

La première chose à faire est de créer un nouveau projet, donc cliquez sur le menu dans le coin supérieur gauche et cliquez sur «Nouveau projet». Ensuite, nous chargeons notre fini fichiers svg après avoir cliqué sur le bouton «Importer les icônes». Après avoir terminé ces étapes, vous devriez voir une image de ce type sur votre moniteur:

Nous avons maintenant la possibilité de changer le code de chaque icône (dans notre cas, ce sera e600 et e601), le nom de notre police, le préfixe pour CSS, etc. Tout cela se fait dans «Préférences». De plus, nous pouvons voir la police en action, cliquer sur le lien "Activer l'utilisation rapide" - qui nous permettra d'obtenir un lien temporaire vers notre police, ainsi que la possibilité de visualiser le code dans CodePen.

Après avoir tout configuré, appuyez sur le bouton «Télécharger» en bas de la page et téléchargez l'archive. Dans ces archives, vous trouverez votre police aux formats ttf, eot, svg et woff + une page de démonstration avec la police.

Utilisation des icônes sur le site

Maintenant, tout ce que nous avons à faire est de connecter la police CSS à l'aide de @ font-face, et de spécifier d'autres paramètres (ils sont tous écrits dans le fichier css de l'archive que vous avez téléchargée.

@ font-face (font-family: "wdm-eagle"; src: url ("// yourwebsitename.com/fonts/wdm-eagle.eot") ;, (font-family: "wdm-eagle"; prononcez: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; / * Meilleur rendu des polices \u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d\u003d * / -webkit-font-smoothing: anti-crénelé; -moz-osx-font-smoothing: grayscale;) .wdm-star: before (content: "\\ e600";) .wdm-eagle: before (content: "\\ e601"; )

Maintenant, nous pouvons utiliser notre police en code HTML comme ceci:

En spécifiant le nom de classe de la balise nous obtenons notre icône.

J'ai beaucoup appris sur ce sujet par moi-même. En particulier, il existe deux façons de connecter les polices, la particularité de travailler avec service Google Les polices et l'échelle numérique de la densité des polices, les ressources pour trouver des polices gratuites, les subtilités de l'utilisation du générateur FontSquirrel, les ressources pour les icônes de polices. Les informations se sont révélées extrêmement utiles et intéressantes pour moi.

Voici un bref résumé de toutes les questions qui m'ont paru intéressantes et nouvelles dans ma pratique, racontées dans mes propres mots. J'espère que ce matériel sera utile non seulement pour moi seul.

Connexion de polices Web à l'aide de @ font-face:

connexion d'une police personnalisée à l'aide d'une directive

Directif

indique au navigateur d'appliquer la police avec nom spécifié éléments de page sélectionnés.

Il existe plusieurs formats de polices Web. Les plus courants sont: EOT, WOFF, OTF ou TTF,

Format EOT, que les navigateurs IE comprennent jusqu'à la version 8. En fait, ce format de police a été créé et n'existe que pour le bien de ce navigateur et de ses versions. Pour obtenir une police EOT, vous avez besoin d'un logiciel pour convertir TTF au format OET.

Format WOFF (Web Open Font Format) est le meilleur pour une utilisation sur le Web aujourd'hui: le plus petit et le plus léger, pris en charge par tous les navigateurs modernes (y compris IE9 et supérieur); ce format a été créé spécifiquement pour le Web. En fait, il s'agit d'une version allégée du format TTF ou OTF.

Formats OTF (Open Type Font) et TTF (True Type Font) sont les polices informatiques les plus courantes qui sont utilisées dans la plupart des systèmes d'exploitation (Windows, Macintosh, Linux) et dans les applications de ces systèmes. Mais en plus de cela, ces polices peuvent être facilement utilisées sur Internet.

Format SVG - ce n'est même pas un format de police, mais un format graphique, image graphique... Une caractéristique de ce format est que les graphiques dans ce format sont créés exclusivement à l'aide de vecteurs, c'est-à-dire de formules mathématiques.

Grâce à cela, les images dans ce format sont mises à l'échelle sans perte de qualité - lorsque la taille de l'image est augmentée, l'ordinateur n'a besoin que de recalculer les points vectoriels. La particularité de ce format graphique a permis de l'utiliser pour créer des «polices». Autrement dit, une police normale est convertie en SVG, où chaque police est en fait une image SVG évolutive.

Pourquoi de telles difficultés étaient-elles nécessaires? Le fait est que les navigateurs pour Android OS (un système d'exploitation très courant pour les appareils mobiles) peuvent afficher les polices Web uniquement dans ce format. Les navigateurs iPhone (Safari 4.1 et versions antérieures) ne peuvent pas non plus reconnaître une police Web. Ces "personnes incompétentes" reçoivent des images sous forme de polices - "vous ne savez pas comment manger de la nourriture ordinaire, alors mangez au moins ça!"

Problème juridique de l'utilisation des polices

La question peut être résumée dans les deux phrases suivantes. Toutes les polices sont divisées en payé ou gratuit.

Payé les polices sont divisées en celles qui:

pouvez utiliser sur le web
ne peut pas utiliser sur le web

Afin de ne pas vous soucier d'une solution au problème déroutant de la licence pour les polices, vous pouvez utiliser les services Web Polices Google ou TypeKit, qui contient toutes les polices, qui peut être utilisé sur le web... Les polices sur ces serveurs sont soit gratuit (Polices Google) ou payé (TypeKit).

Liste courte sources de polices gratuitesutilisables sur le Web:

FontSquirrel (http://www.fontsquirrel.com/)
Google Fonts ( https://www.google.com/fonts)
La bibliothèque de polices ouverte (http://openfontlibrary.org/ru)
Fontex.org (http://fontex.org/)
Fonderie de polices Exljbris (http://www.exljbris.com/)

La plupart des services Web qui fournissent des polices pour le Web les «servent» au format OTF ou TTF. Par conséquent, vous devez convertir cette police dans les quatre formats décrits ci-dessus afin que le nombre maximum de visiteurs du site puisse voir le contenu de ce site sur leurs appareils. Il n'est pas nécessaire de rechercher un logiciel spécial à convertir. Vous pouvez utiliser générateur gratuit @ font-face Generator hébergé par FontSquirrel (http://www.fontsquirrel.com/).

La seule limitation de ce service est qu'il a sa propre liste noire, qui contient des polices interdites sous licence pour une utilisation sur le Web. En d'autres termes, si vous «glissez» une police sous licence acquise par une méthode pirate dans ce générateur, il refusera de générer ce dernier.

Générateur

important et doit être le suivant: @ font-face (font-family: "PTSans"; src: url ("PTSansRegular.eot"); src: format ("embedded-opentype"), url ("PTSansRegular.woff") format ("woff"), url ("PTSansRegular.ttf") format ("truetype"), url ("PTSansRegular.svg") format ("svg");)

EOT - format uniquement pour Internet Explorer 8 et inférieur
WOFF - la police la plus moderne et la plus petite que la plupart des navigateurs modernes comprennent
TTF - police relativement grande et plutôt obsolète
SVG - la plus grande police en taille et en volume, elle doit donc être placée sur la toute dernière ligne. De plus, ce format de police n'est utilisé que par les navigateurs Android OS ou Safari 4 ( c'est-à-dire iPhone)

Le navigateur lit le corps de la directive

n'est pas aléatoire et empiriquement vérifié sur la base de l'expérience des développeurs Web précédents. h1 (font-family: "League Gothic", Arial, sans-serif; font-weight: normal;)

Application correcte de la police Web League Gothic connectée. Ici, le nom de la police connectée est indiqué en premier lieu, puis - polices de secours qui sont connues pour être installées sur le système de l'utilisateur (le nom de la police garantie pour être sur le système et la famille de polices).

Le lecteur attentif fera attention à la deuxième ligne et dira: c'est superflu ici, une sorte de non-sens. En fait, pas tout à fait. Les navigateurs essaient toujours de rendre les en-têtes en gras, par défaut. Par conséquent, ici, nous disons au navigateur de ne pas simplement faire cela, et c'est tout.

Outre les lettres, les polices peuvent être constituées d'icônes ou d'images. Ressources pour le sujet des icônes et icônes de police:

Types de polices

Lors de la connexion des polices installées sur l'ordinateur, il n'y a généralement pas de questions et nous ne pensons pas à la façon dont il s'avère que lorsque le navigateur est invité à rendre le texte en gras à l'aide de la balise

le texte est vraiment en italique; et en italique gras via les balises

fort em

il est en caractères italiques gras. Il nous semble que le navigateur crée le texte comme nous le disons.

En fait, ce n'est pas le cas. Ou pas tout à fait. Le navigateur rend en fait la police de la manière qui lui est spécifiée, mais il ne peut rien faire avec la police elle-même. Il prend juste la police spécifiée par l'étiquette et l'affiche à l'écran. Le fait est que les concepteurs ou les sociétés de polices créent des polices de cette manière: Un artiste dessine quatre ensembles de la même police. Autrement dit, il dessine un ensemble de caractères dans un style régulier, puis dessine un ensemble de caractères en style italique, puis un ensemble de caractères en style gras (gras), et enfin un ensemble de caractères en style gras italique (gras italique). Ces quatre jeux de caractères sont en fait des polices distinctes, bien qu'ils partagent un nom commun (Georgia, Tahoma, Helvetica, etc.).

Lorsque le navigateur sait quelle police utiliser, il prend simplement la police avec la police spécifiée et l'affiche. Par exemple, Arial a quatre poids. Si gras est spécifié, le navigateur utilise Arial boldface. Le navigateur lui-même ne peut en aucun cas convertir un style en un autre. Il ne peut faire qu'une seule chose - essayer de créer le style italique normal. La commande qui indique au navigateur d'effectuer une telle tâche est appelée

est considérablement compliqué et peut être réalisé de deux manières: facilece que IE8 ne comprend pas (mais tous les autres navigateurs le font) et compliquéqui sera disponible et IE8 également.

Un moyen simple de connecter une police Web

Un moyen simple est d'ajouter à la directive

et ces règles ont un rôle différent, elles obligent le navigateur à charger la police Web avec le style et l'épaisseur spécifiés. Pour être plus clair, voici un exemple de connexion de la police Web PTSans avec quatre options d'affichage: @ font-face (font-family: "PTSans"; src: url ("PTSansRegular.eot"); src: url ("PTSansRegular.eot # iefix") format ("embedded-opentype"), url ("PTSansRegular.woff") format ("woff"), url ("PTSansRegular.ttf") format ("truetype"), url ("PTSansRegular.svg") format (" svg "); poids de la police: normal; style de police: normal; ) @ font-face (font-family: "PTSans"; src: url ("PTSansItalic.eot"); src: url ("PTSansItalic.eot # iefix") format ("embedded-opentype"), url ("PTSansItalic .woff ") format (" woff "), url (" PTSansItalic.ttf ") format (" truetype "), url (" PTSansItalic.svg ") format (" svg "); font-weight: normal; font-style : italic;) @ font-face (font-family: "PTSans"; src: url ("PTSansBold.eot"); src: url ("PTSansBold.eot # iefix") format ("embedded-opentype"), url ("PTSansBold.woff") format ("woff"), url ("PTSansBold.ttf") format ("truetype"), url ("PTSansBold.svg") format ("svg"); font-weight: bold; font-style: normal;) @ font-face (font-family: "PTSans"; src: url ("PTSansBoldItalic.eot"); src: format ("embedded-opentype"), url ("PTSansBoldItalic.woof") format ("woff"), url ("PTSansBoldItalic.ttf") format ("truetype"), url ("PTSansBoldItalic.svg") format ("svg"); font-weight: bold; font-style: italic;)

Je vais vous dire comment je comprends ces règles CSS. Directif

... Cette variable est un tableau rempli de valeurs à l'aide des règles suivantes:

- charger la police du poids spécifié;
elle était effectuée à chaque fois par un appel de fonction distinct aux éléments de page sélectionnés: p (font-family: PTSans;)
Et puis avec les balises HTML
spécifier le style de police à appliquer aux éléments spécifiés: dolor ets< strong > lorem ipsum dolor ets lorem ipsum ipsum dolor ets lorem ipsum< em > dolor ets lorem ipsum dolor ets lorem ipsum dolor ets
Le navigateur "extrait" la police du style souhaité (gras ou italique ou gras italique) du tableau PTSans et l'applique aux éléments de page spécifiés.

L'avantage cette méthode connecter une police Web est sa polyvalence. Il suffit de déclarer la police une fois en utilisant la directive
et.
Où les balises sont appliquées
, IE8 rendra la police PTSans elle-même. Un exemple de police Web comprise par IE8 est illustré ci-dessous: @ font-face (font-family: "PTSansRegular"; src: url ("PTSansRegular.eot"); src: url ("PTSansRegular.eot # iefix") format ("embedded-opentype"), url ("PTSansRegular.woff") format ("woff"), url ("PTSansRegular.ttf") format ("truetype"), url ("PTSansRegular.svg") format (" svg "); ) @ font-face (font-family: "PTSansItalic"; src: url ("PTSansItalic.eot"); src: url ("PTSansItalic.eot # iefix") format ("embedded-opentype"), url ("PTSansItalic .woff ") format (" woff "), url (" PTSansItalic.ttf ") format (" truetype "), url (" PTSansItalic.svg ") format (" svg ");) @ font-face (font-family : "PTSansBold"; src: url ("PTSansBold.eot"); src: url ("PTSansBold.eot # iefix") format ("embedded-opentype"), url ("PTSansBold.woff") format ("woff" ), url ("PTSansBold.ttf") format ("truetype"), url ("PTSansBold.svg") format ("svg");) @ font-face (font-family: "PTSansBoldItalic"; src: url ( "PTSansBoldItalic.eot"); src: url ("PTSansBoldItalic.eot # iefix") format ("embedded-opentype"), url ("PTSansBoldItalic.woof") format ("woff"), url ("PTSansBoldItalic.ttf") format ("truetype"), url ("PTSansBoldItalic.svg") format (" svg "); )
Notez le manque de règles
et,? Comme les feuilles de style sont gonflées dans ce cas! Et si tout à coup (Dieu nous en préserve!) Vous deviez modifier un tel code? p (font-family: PTSansRegular; font-weight: normal; font-italic: normal; font-size: 36px;) p strong (font-family: PTSansBold; font-weight: bold; font-italic: normal;) p em (font-family: PTSansItalic; font-weight: normal; font-italic: italic;) p strong em (font-family: PTSansBoldItalic; font-weight: bold; font-italic: italic;)
L'utilisation ou non de la deuxième méthode d'inclusion de polices Web dépend du niveau de prise en charge d'IE8 nécessaire pour un site particulier. Gardez à l'esprit que la part d'IE8 est en baisse et continuera de baisser.

Polices Google

Afin de ne pas vous soucier de trouver une police, téléchargez-la au format TTF ou OTF, convertissez-la sur un générateur comme FontSquirrel Generator, connectez les styles CSS résultants au projet à l'aide de nombreuses directives
, le second est plus laconique en utilisant une directive - il suffit de l'inclure au début des feuilles de style pour que les polices sélectionnées soient appliquées à toutes les pages HTML.
Troisième voie avec JavaScript, mis à part la complexité, il n'a pas d'autres avantages par rapport aux deux autres.

Sur Google, la densité de la police n'est pas indiquée par mots clés
, et sur l'échelle numérique - 100 à 900. Une valeur de 400 correspond à la police Gentium Book Basic d'épaisseur italique normale: em (famille de polices: "Gentium Book Basic", serif; poids de police: 400; style de police: italique;)
Ceci conclut la compression des polices Web.

Nous vous présentons une sélection de services gratuits pour un designer. C'est la première option, à l'avenir, nous prévoyons de nous développer en ajoutant de nouvelles sections et outils.

Polices

Google Fonts est la bibliothèque de polices préférée de tous. Vous permet de sélectionner et de télécharger différentes polices pour toutes les occasions.
1001 Free Fonts est une bibliothèque de polices. Il a une navigation pratique - les polices sont triées par ordre alphabétique et par type. Il existe une section pour les polices russes.
Fontstruct est un constructeur de polices en ligne. Un outil très simple pour créer votre propre police. Vous pouvez dessiner non seulement avec des carrés standard, mais aussi avec d'autres formes - points, coins arrondis, etc. Pour un débutant, un outil idéal pour essayer de voir la typographie en action.
Font Squirrel est l'une des plus grandes bibliothèques de polices. De plus, vous pouvez télécharger une image et obtenir les noms des polices utilisées dessus. Il y a un magasin de polices et même un magasin de vêtements avec des logos.
Type light est un éditeur de polices complet. Vous permet de créer, modifier et convertir des polices OpenType, TrueType et PostScript. Vous devez télécharger et installer. La version gratuite a des fonctionnalités limitées par rapport à la version gratuite. Mais pour créer police simple assez.
Qu'est-ce que la police - un service en ligne pour sélectionner les polices du site. Téléchargez le fichier de police, spécifiez l'url du site et voyez à quoi ressemblera la police téléchargée sur le site. Service pratique.
1001 Fonts - bibliothèque de polices (plus de 15000). Navigation pratique - la police peut être sélectionnée par taille, type, thème, conception, etc. Le menu vous permet de personnaliser la sortie, ce qui permet de voir chaque police dans différentes options: taille, style, etc.
Font Flame est un service en ligne pour faire correspondre les polices. Cela fonctionne très simplement - sur page d'accueil un dépliant avec deux inscriptions faites dans des polices différentes est offert. Aimé - appuyez sur "Love", non - "Hate". Ensuite, ceux sélectionnés peuvent être consultés à nouveau. Cliquez sur le nom de la police pour ouvrir Google Fonts.
Typecast - sélectionnez une police pour le prototype. Vous pouvez prévisualiser l'apparence de la police sur n'importe quel appareil. Il est nécessaire d'indiquer différents types de texte - titres, citations, etc. Vous pouvez choisir une police, une taille, un style, définir des retraits. Vous verrez votre future page dans les polices que vous avez installées. Un gros plus est le choix de la mise en page (une ou plusieurs colonnes, différents agencements de blocs).
Wordmark - vous permet de choisir la police installée sur l'ordinateur de l'utilisateur pour le texte, le logo ou le titre. Lorsque vous entrez du texte dans le champ, il l'affiche dans différentes polices. Vous pouvez sélectionner la taille, le boîtier, l'affichage noir et blanc ou vice versa. Les options que vous aimez sont publiées dans triter ou sur Facebook - au choix de l'utilisateur. Peut être envoyé par e-mail.

Stock photos

Unsplash est une photo stock constamment mise à jour. Les collections sont divisées en thèmes. Vous pouvez trouver n'importe quoi, des Afro-Américains à la nature. Chaque photo a sa propre note, vous pouvez voir les meilleurs ou les nouveaux éléments.
FoodiesFeed - photo de nourriture. Les images sont catégorisées. Vous pouvez choisir les meilleurs icônes, maquettes exclusives, etc.
Free Refe Photos - une énorme liste d'images "Real life". Principalement la photographie de paysage et de nature. Navigation peu pratique, toutes les photos de la page principale apparaissent lors du défilement.
Little Visuals - photos de haute qualité de paysages et de bâtiments. Peut être téléchargé sous forme d'archive meilleures photosposté dans une semaine. Les photos sont hashtagées mais non classées.
Gratisography est une immense bibliothèque de photos gratuites. Toutes les photos sont divisées en six thèmes: les personnes, les grimaces, les villes, les objets, la nature et les animaux. Vous pouvez rechercher par mots.
Mort à la Banque de Photo - Banque de Photos. Vous ne pouvez pas simplement regarder et choisir. Ils font une sélection pendant un mois et la donnent à télécharger après avoir entré votre email. L'archive pèse environ 11 Mo. Les meilleures photos et un lien de téléchargement sont envoyés par courrier.
Superfamous - une grande collection de photos sous un angle inhabituel. L'ensemble est petit mais intéressant.
La bibliothèque de motifs - motifs et textures. L'ensemble est assez grand, les gabarits sont inhabituels. Ils sont remplacés par défilement, et progressivement. Vous pouvez voir à quoi ressemblera le modèle sur tout l'écran ou une partie de celui-ci.
New Old Stock - photos anciennes des archives. Il y a peu de photos gratuites, mais de nouvelles apparaissent régulièrement.
Pexels - un grand nombre de photos pour toutes les occasions. Divisé par sujet, très pratique pour la recherche.
Jay Mantri est un grand ensemble de photographies. Il n'y a pas de classement en tant que tel, vous pouvez le voir par mois.

Stocks graphiques

Brusheezy - Pinceaux, modèles, textures et plus gratuits pour Photoshop. 12 catégories, chacune avec des sous-catégories. Le choix est énorme.
Iconfinder - Icônes, payantes et gratuites. Vous pouvez le télécharger aux formats ICO, PNG, ICNS, SVG.
Brushez est une grande collection de pinceaux Photoshop. En plus d'eux, il existe également des primitives vectorielles, des formes, des modèles et des styles. Chaque section est divisée en sous-sections. Par exemple, il existe plus de 20 catégories de pinceaux.
Vecteezy - Une bibliothèque de graphiques vectoriels comprenant des images et des illustrations. Un grand nombre de catégories et un grand nombre de graphiques.
Iconbird est un service de recherche d'icônes en russe. Vous pouvez entrer un thème et obtenir un ensemble d'icônes, ou vous pouvez parcourir par catégorie.
Icons8 est un service en langue russe proposant plus de 42 000 icônes sur divers sujets.

Infographie

Vizualize est un service en ligne permettant de créer des infographies «À propos de moi». Essentiellement, il crée un CV graphique.
Canva est un outil simple pour créer n'importe quel design. Vous permet de concevoir une présentation, une affiche, une publication sur les réseaux sociaux, des livres, des lettres, du matériel et bien plus encore. Tout est fait sur la base de modèles, le texte change. Mais il y a beaucoup de modèles, il y a beaucoup de choix.
Easelly - création d'infographie basée sur des modèles. L'éditeur en ligne intégré vous permet de modifier la conception, de placer des éléments supplémentaires, de modifier le texte.
Infogram est un service en ligne permettant de créer des infographies et des graphiques interactifs. Toutes les fonctionnalités ne sont pas disponibles, vous devrez acheter un compte.
Visage est un outil simple pour créer tout type de contenu visuel (diagrammes, infographies, images de blog, etc.). Beaucoup de modèles, éditeur simple. Certaines fonctionnalités sont payantes.
Gliffy est un service de cartographie en ligne. L'éditeur fonctionne sur le principe de Microsoft Visio.
Visme est un outil de présentation et de création d'infographie en ligne. Plus de 1000 modèles. L'éditeur vous permet d'ajouter du texte (en-têtes, listes, citations et normal), du texte animé et des widgets. Le compte gratuit peut être téléchargé sous forme de fichier JPG.
Piktochart - Créez des graphiques de haute qualité - présentations, infographies ou documents imprimés. PNG, JPG de différentes tailles sont téléchargés.
Drawio est un service en ligne pratique pour créer des diagrammes. Vous pouvez enregistrer dans Dropbox et services similaires, vous pouvez sur disque.
Venngage - création facile d'infographies, d'affiches, de rapports, de matériel pour les réseaux sociaux, etc. Dans la version gratuite, il ne fournit qu'un lien vers la publication. Vous devez payer pour le téléchargement.
Cacoo est un service en ligne pour dessiner des diagrammes et des plans de site. Peut-être le meilleur en termes de capacités. Un grand nombre d'outils et de modèles. Vous pouvez exporter au format PNG, PDF, SVG, PPT, etc.
Creately est un service de dessin de cartes en ligne. Disponible pour publication uniquement. Le téléchargement est payant.
Lucidchart est un service en ligne de création de graphiques et de dessins. Il est possible d'importer un diagramme Microsoft Visio. Exporté au format PDF, PNG et JPG. Il existe une fonctionnalité payante.

Couleurs

Color Hunt - sélection de combinaisons de couleurs. Vous pouvez sélectionner jusqu'à quatre couleurs. Vous avez le choix entre des solutions toutes faites.
TinEye - analyse le site et affiche une liste de ressources qui utilisent une image du site.
ColorZilla - vous permet de créer des couleurs et des dégradés. Renvoie les propriétés css pour eux.
Adobe Color CC - créez des jeux de couleurs.
Colicious - appuyez sur la barre d'espace et générez une nouvelle couleur.
Colorscheme - sélection de schémas de couleurs. Il existe une version en anglais et en russe. Vous permet de faire correspondre les couleurs au site. A un réglage fin, montre le code couleur. En fin de compte, vous permet d'afficher la page dans le jeu de couleurs sélectionné. Le plus gros avantage est de visualiser la gamme en termes d'écart de couleur. Vous permet également de choisir différents modèles de couleurs. Enregistre dans la palette Gimp, CSS, PNG, etc. Dispose d'un convertisseur de couleurs pour la conversion d'un modèle de couleur à un autre.
Paletton est un outil pour créer des combinaisons de couleurs. Pas différent de Colorscheme.
Pictaculous - Analyse une palette d'images PNG, JPG ou GIF. Téléchargez une image et obtenez un ensemble de toutes les couleurs qui y sont présentes.
Hex Color Tool est un outil de sélection de couleurs. Les curseurs ajustent la couleur, vous pouvez sélectionner la luminosité. Ensuite, la couleur sélectionnée est enregistrée. Vous pouvez choisir une palette.
(Un) clrd est un plugin de navigateur qui supprime toutes les couleurs et laisse le site en noir et blanc.
BrandColors - la plus grande collection de marque officielle codes couleurs... Choisissez un nom de marque et téléchargez les noms de ses couleurs, y compris dans un fichier css.
Colortyper - correspondance des couleurs sous un angle inhabituel. L'écran affiche des symboles multicolores qui se croisent. Le résultat de l'intersection est une nouvelle couleur. Ça a l'air intéressant.

Inspiration

Dribbble - La plus grande communauté de design. Emplois, communautés, communication - vous pouvez tout trouver ici.
Freebbble - modèles et designs de Dribbble. Vous pouvez télécharger quelque chose gratuitement, acheter quelque chose. Vous pouvez trouver des modèles pour CMS, constructeurs, icônes, maquettes, modèles de site de mise en page et bien plus encore.
Muzli - Inspiration de conception quotidienne. Une ressource pour les designers avec des exemples des œuvres les plus insolites.
Awwwards sont les meilleurs designs de designers. Organisé comme une communauté où vous pouvez voter sur le site. Le site du jour, du mois, de l'année, etc. est sélectionné. Un grand nombre de designs, vidéos, développements.
Design You Trust est une communauté de designers partageant les dernières tendances, actualités, portfolios, designs et annonces créatives.
Really Good Emails est une énorme collection de courriels bien conçus. Choisissez un modèle et obtenez son code html, css et js. Vous pouvez modifier le texte, les images, etc.
Fubiz - publications du domaine du design et de la créativité. Vous pouvez trouver des photos, des dessins, des graphiques, des vidéos, etc. Tout est divisé en catégories.
Designspiration est une collection de designs inspirés de Pinterest. Beaucoup d'idées et d'exemples - typographie, logos, lettres, etc.
Behance est une collection de portefeuilles professionnels. Vous pouvez laisser un poste vacant ou reprendre.
Mobile-patterns est une bibliothèque de captures d'écran pour iOS et Android. Tout est divisé en sections. De nombreuses idées peuvent être trouvées.
One Page Love est une galerie des meilleurs designs de pages Web. Des modèles et des thèmes peuvent être achetés. Il y en a aussi des gratuits.
Uispace est une ressource pour les designers. Téléchargement gratuit de psd, croquis, polices, maquettes, etc.

Éditeur graphique

DAZ 3D - Modélisation 3D. Inscrivez-vous et téléchargez l'application de bureau.
Gimp est un analogue gratuit de Photoshop. Vous permet de configurer une grille modulaire, de créer des guides, de travailler avec des calques, d'ajouter des effets, etc. C'est un bon remplacement gratuit pour Photoshop. Il est extensible - des plugins supplémentaires peuvent être téléchargés.
Blender - Modélisation 3D, animation, rendu, son, vidéo. Vous permet de créer des jeux. Éditeur en développement rapide, très populaire.
Aviary est un service de retouche photo en ligne. De nombreuses fonctionnalités, y compris les yeux rouges, le redimensionnement, etc.
Pixlr est un éditeur de photos et un éditeur graphique en ligne séparément. Ce dernier est similaire à Photoshop. Enregistre sur le disque.
BeFunky est un service de retouche photo en ligne. Effets, cadres, graphiques, retouches et plus encore. Il existe une interface en russe.
Inkscape est un éditeur de graphiques vectoriels complet avec open source code source... Prend en charge les capacités du format SVG - travail avec des formes, des contours, du texte, des graphiques bitmap vectorisés, etc. En plus du traitement images vectorielles, vous permet de créer un modèle de site Web et de le découper - une grille modulaire est présente. Vous permet de dessiner des arrière-plans, des bannières, des logos vectoriels, etc.
IconEdit2 est un programme de dessin d'icônes très simple. A des filtres. Vous permet d'exporter une image pour Android et Apple. Vous pouvez régler la profondeur de couleur, faire pivoter et ajuster l'icône. Prend en charge la translucidité, plusieurs images en une seule dossier ICO et anti-aliasing dans tous les outils de peinture.
Falco GIF Animator est un programme pour créer des animations time-lapse et des icônes animées. Vous pouvez télécharger de nombreux programmes différents sur la ressource.
Krita est un éditeur de bureau professionnel open source. Disponible pour différents OS.
Boxy-SVG est un éditeur de graphiques vectoriels similaire à Adobe Illustrator, Sketch et Inkscape.
Photopos est un programme multifonctionnel avec des fonctions d'éditeur de photos, éditeur graphique et des applications pour créer des infographies.
5Dfly - application gratuite traitement de photos par lots. Sait créer des diaporamas pour PowerPoint. Vous pouvez également télécharger le convertisseur PDF séparément.
PaintStar - éditeur gratuit images. L'interface est très similaire à Paint, mais il y a plus d'options. Calques, par exemple.
PhotoScape est un simple éditeur de photos. Il dispose de fonctions pour régler la luminosité et la couleur, la balance des blancs, la correction du contre-jour, les cadres, les ballons, le mode mosaïque, l'ajout de texte, le dessin d'images, le recadrage, les filtres, la suppression des yeux rouges, la coloration, le pinceau, le tampon de clonage, le pinceau d'effet, etc.

LA CLOCHE