Un coup d'œil sur une meilleure typographie pour les sites Web modernes

Le texte numérique peut être formaté de différentes manières. Avec l'avancement des polices Web et des scripts de navigateur, nous avons vu un nouveau code de projet que les développeurs pourraient utiliser. Les concepteurs de sites Web recherchent également la meilleure stratégie pour coder leurs sites Web et créer un style typographique uniforme entre toutes leurs pages..

De nombreux concepteurs de sites Web professionnels ont écrit sur le sujet, y compris des fonctionnalités et des services mis à jour. Vous devez considérer chaque page Web comme un document singulier rompant avec la conception de votre mise en page racine. Dans cette vue, il est facile de voir comment la typographie peut circuler de page en page et offrir un débouché unique à la créativité. Et cela devient particulièrement évident en construisant des classes uniques pour vos paragraphes et en-têtes.

Ci-dessous, je vais aborder quelques idées fantastiques pour les concepteurs de typographie en herbe souhaitant créer pour le Web. Les blogs, les réseaux sociaux et les entreprises cherchent toujours à mettre à jour leur site Web actuel. Et les styles CSS pour la typographie Web constituent une excellente source pour commencer à actualiser vos pages..

Différences dans l'Internet d'aujourd'hui

Le Web moderne a considérablement progressé depuis le début de l’année 2000. Les concepteurs Web disposent de nombreuses nouvelles fonctionnalités leur permettant de créer de fantastiques œuvres de graphisme, logos, bannières, etc. La publication des spécifications HTML5 et CSS3 a également eu des conséquences néfastes sur l’ancienne méthode de création de polices Web..

Il est maintenant tout à fait possible d'inclure vos propres polices avec le CSS @ font-face propriété. Vous pouvez utiliser n'importe quel Vrai type(.ttf) ou Type ouvert(.otf) et stockez une copie localement sur votre serveur. Puis, avec la magie CSS3, incluez la famille n’importe où sur votre page Web!

Avec cette seule technique, il est possible de voir à quel point notre Internet moderne est développé.

Et avec la popularité croissante de jQuery chaque jour, il n’est pas surprenant que nous puissions créer des effets d’animation étonnants associés à des polices personnalisées. Comme alternative à la méthode ci-dessus, le plugin TTFGen pour jQuery vous permet d’inclure n’importe quelle police TrueType sur votre page Web..

Cette méthode est un peu plus fiable car vous n'avez pas besoin d'un navigateur moderne prenant en charge les normes CSS3 pour le faire fonctionner. Mais bien sûr, les anciens navigateurs tels que Internet Explorer 6 auront du mal à rendre le rendu correctement..

Heureusement, la plupart des utilisateurs ont opté pour un logiciel de navigation plus récent, compatible avec ces normes! Et lorsque vous développez pour le Web, vous devez déterminer à qui s'adresse votre marché. Vous ne pouvez pas faire plaisir à tout le monde tout le temps, mais vous pouvez certainement essayer de vous approcher suffisamment.

Le but de la typographie numérique

Une sorte d’idée étrange à considérer, mais quel est le véritable but du texte numérique? Pour transmettre des informations, partager des sources et donner votre opinion au monde des internautes. Le texte est la forme de média la plus simpliste pour partager des idées et des idées.. Mais il est également très complexe et contient des détails majeurs que les photos / vidéos ne peuvent tout simplement pas utiliser..

Vos visiteurs sont susceptibles de trouver votre site Web en fonction de mots clés dans votre texte ou vos en-têtes - une raison supplémentaire de prêter une attention particulière à votre copie Web. Et une fois que vous avez attiré l'attention sur votre site Web, vous devez rester concentré. Cela se fait très facilement avec des titres en gras et un texte de page à espacement régulier.

Si vous écrivez un article ou un tutoriel, vous devez utiliser un langage clair. Ses il est tout aussi important de donner une apparence au texte de votre page et à la qualité de votre contenu. Plus votre texte est large, plus il vous sera facile de lire et de rechercher des mots-clés. Et comme les paragraphes contiendront la majorité de votre contenu, vous devriez passer beaucoup de temps à créer des prototypes pour trouver le bon ajustement. Les paragraphes sont utilisés pour transmettre votre message en morceaux de la taille d'un bit, divisés en phrases. Comprenez comment vous écrivez et planifiez à l'avance pour obtenir une mise en page appropriée.

De plus, le texte de votre page contient un contenu multimédia et secondaire. Si vos paragraphes contiennent des informations primaires, vous avez peut-être des graphiques ou des images pour pimenter la page. Ces accents apportent une touche tactile permettant aux utilisateurs de naviguer sur votre site..

Les vidéos et les images peuvent briser votre contenu et donner l'impression que les lecteurs bougent plus rapidement dans votre article. Mais utilisez ces articles avec parcimonie et ne laissez rien submerger votre message central. Les utilisateurs consultent (principalement) votre site et ne souhaitent pas trop de distractions..

Toutes les autres options de formatage sont utilisées pour spécifier une fonctionnalité ou un objectif. Par exemple, le texte d'un lien hypertexte est souvent d'une couleur différente du reste pour se distinguer “cliquable”. Vous pouvez travailler avec des mots en gras ou en italique pour donner plus d'importance à vos phrases. Et l’utilisation de guillemets ou de texte préformaté peut aider à définir des instructions fondamentales ou du code Web, respectivement..

En-têtes de page Web

Les balises de titre sont l’un des atouts les plus importants de votre typographie Web. Si vous n'êtes pas familier avec les en-têtes HTML, allez de

à

le premier étant le plus important et le second le moins important. Ce balisage est utile à comprendre, car Google classe également votre domaine et vos pages Web en fonction de la structure du contenu. Ainsi, vous contrôlez en fin de compte les mots-clés que vous utilisez et le niveau d'en-tête dont vous avez besoin..

Même si la spécification HTML5 standard inclut jusqu'à 6 styles de titre différents, je recommanderais d'utiliser entre 3 et 4. Il n'est pas nécessaire de tous les inclure dans vos pages. Et il est également très peu probable que vous trouviez une utilisation pour 6 rubriques différentes. Quand vous commencez à créer vos styles, essayez de dessiner quelques exemples de titres pour voir ce que vous aimez..

Photoshop est excellent pour ce scénario. Vous pouvez également essayer de coder différentes rubriques en HTML pour voir leur apparence dans le navigateur. L'important est de travailler avec le flux de vos pages et de concevoir les en-têtes en fonction de leur rang..

Par exemple, votre

les balises devraient ressortir le plus parmi tous vos en-têtes de page.

et

sont les balises les plus populaires et recommandées par Google pour l'exploration du contenu des pages. L'utilisation d'effets de conception tels que des polices en gras, des soulignements, des bordures en pointillés ou différentes couleurs aidera vos titres à sortir de la page..

L'espacement est également important en ce qui concerne les en-têtes ou tout élément de votre contenu. Assurez-vous d’ajouter des marges supplémentaires entre vos titres et la zone de contenu principale. Si votre police est suffisamment grande, chaque en-tête doit se distinguer car il s'agit de son propre bloc principal. Ce look est idéal si vous voulez attirer l'attention de vos lecteurs avec un message clair.

Construire des hyperliens uniques

Il y a beaucoup à dire sur les liens de page. D'une manière ou d'une autre, vous devrez utiliser des hyperliens dans votre code. Ils sont extrêmement importants en tant qu'interface de navigation principale entre les différentes pages de votre site. Vous pouvez également créer un lien vers d'autres blogs ou même avec vos articles de blog archivés pour les consulter ultérieurement..

Vous devez choisir très soigneusement le texte de maintien de votre lien. C'est le contenu spécifique qui sera accentué par un style de lien. Par exemple, "cliquez ici" est très populaire et utilisé la plupart du temps pour des téléchargements directs. Essayez d'éviter cette approche systématique et soyez plutôt créatif avec votre texte de lien hypertexte. Vos visiteurs sont beaucoup plus susceptibles de cliquer sur un lien s’ils peuvent également reconnaître le contexte et peut-être déterminer le contenu de la nouvelle page..

Quand vous allez styler vos liens, vous devriez considérer ce qui suit - à quoi ressembleraient les changements dans votre mise en page, sur quel type de couleur de fond travaillez-vous, et de quelle couleur est le texte pour le contraste?

Les liens doivent apparaître de manière flagrante hors de la page en tant qu'éléments cliquables - après tout, c'est leur fonction. C'est pourquoi le vieux bleu avec effet de texte souligné fonctionne si bien. Mais si vous trouvez qu'une couleur alternative fonctionne mieux, vous devriez l'essayer. Il n’existe pas de solution universelle pour la conception de liens. Naviguez un peu sur le Web et vous créerez sûrement quelque chose d'exceptionnel..

Quelques points d’intérêt sont quelques fonctionnalités que vous devriez essayer en évitant. Des choses telles que changer la famille de police du texte ou la taille de la police peuvent être très gênantes. Cela entraînerait une déformation et un déplacement du texte, ce qui risquerait de placer le curseur de la souris juste en dehors de la zone de liens. De la même manière, évitez d’ajouter des marges supplémentaires à vos liens ou effets de survol. Ceux-ci fonctionnent beaucoup mieux lorsque vous restez simple. Un changement de couleur ou un soulignement ajouté contribue grandement à l'expérience utilisateur.

Construction de listes stylisées

Les chances sont bonnes, vous devrez aussi travailler avec des listes à un moment donné. Inclus est à la fois les listes ordonnées et non ordonnées en HTML. Ils sont parfaits pour proposer une petite collection d’idées, de produits, de personnes ou de liens en ligne dans un espace très restreint. Le style n’est pas si différent des paragraphes ou des titres, que ce soit.

Vos visiteurs doivent comprendre immédiatement qu’ils consultent une liste d’articles. Conservez chaque élément de la liste séparément et situé sur une nouvelle ligne de votre page. Ajoutez un espace supplémentaire entre eux, si possible. Cela donnera un peu de marge de manœuvre et constituera une belle séparation pour le texte de l'article. Si vous le souhaitez, vous pouvez même mettre en gras les listes de polices ou d’indentements afin de vous éloigner des marges de présentation standard..

L'ajout de fonctionnalités supplémentaires pour aider votre liste à se démarquer n'est pas une obligation. Mais si vous aimez le style de disposition en blocs, il met vraiment l'accent sur vos listes. Vous pouvez essayer d'ajouter un fond clair ou des icônes. A List Apart a une excellente écriture sur les listes d'apprivoisement qui, à mon avis, inclut des informations très puissantes. Mais si vous gardez le contenu de la page linéaire et utilisez des blocs de liste uniquement lorsque cela est nécessaire, vous ne devriez pas vous heurter à des problèmes de conception..

Comment créer des citations sur la page

L'apparition de citations et de citations est très limitée de nos jours. Au début du Web, vous ne verriez pas grand-chose de ces éléments utilisés. Peut-être dans des éditoriaux, des essais ou des documents éducatifs. Mais HTML5 a certainement mis à jour un peu les règles, ce qui facilite énormément les citations de blocs..

Le site Web HTML5 Doctor comprend une ressource fascinante pour discuter de ce sujet précis. Ils discutent de l'utilisation du contenu dans les guillemets comme apparaissant à l'intérieur de la structure du document. Vous pouvez donc également inclure des en-têtes, des paragraphes et même des listes et des pieds de page. L'usage principal d'un