background preloader

8 façons simples d'améliorer la typographie dans vos designs

8 façons simples d'améliorer la typographie dans vos designs
Par Antonio Carusone Cet article a été écrit pour publication dans Smashing Magazine le 3 avril 2009. Je le reproduis ici pour vous être agréable. Beaucoup de gens, y compris les designers, pensent que la typographie consiste à choisir une police, sa taille et si elle doit être grasse ou pas. Pour la plupart des gens, ça s'arrête là. Obtenir une bonne typographie demande tellement plus, notamment de s'attarder sur les détails que les designers négligent souvent. Ces détails donnent au designer le contrôle total, leur permettant d'apporter une typographie belle et cohérente à leurs designs. Voici donc 8 façons simples d'améliorer la typographie, et donc l'ergonomie, de vos designs. Justification La justification est la longueur d'une ligne de texte. Une manière simple pour calculer la justification est d'utiliser la méthode de Robert Bringhurst, qui multiplie la taille de la police par 30. Interlignage Ponctuation flottante Placez les guillemets dans la marge du corps de texte. Rythme vertical

http://www.pompage.net/traduction/8-facons-simples-d-ameliorer-la-typographie-dans-vos

Related:  TUTORIELSTypographieStructures esthétiques (HTML, CSS, Jquery...)

Ce que vous avez toujours voulu savoir sur CSS Aujourd’hui, c’est un fait: tout le monde connaît et utilise CSS. Et c’est tant mieux! Cependant, bien que le langage en lui-même soit plutôt simple, certains aspects peuvent sembler encore obscurs. La mise en forme du texte sur une page web Réussir la lisibilité d'un texte sur un site web demeure souvent un problème, quelle que soit la qualité d'un site. Les éléments essentiels d'une bonne conception visuelle sont le choix de la typographie et de couleurs adaptées. Lire une page web, c'est lire sur un écran. L'écran est l'interface grâce à laquelle l'internaute perçoit les informations. À quoi servent les balises META Les balises META c’est utile quand c’est utile; et quand c’est pas utile… eh bien c’est inutile. Vous l’aurez compris: ça dépend. Mais pour ne pas vous laisser avec cette simple vérité — et jolie tautologie —, nous vous proposons un petit point sur les balises META. On y parlera de tapage de tête contre les murs, du meilleur moyen pour conserver sa santé, et de subtilités qui vont bien.

Tombez pour SMACSS Petit tour d'horizon sur ces guidelines qui feront de vous un bûcheron du CSS, un vrai. Timber ! SMACSS est un ensemble de conseils et de lignes de conduite élaborés par Jonathan Snoovvk et dont le but est de vous permettre d’organiser votre CSS de manière claire et intelligente. Le premier principe réside dans la catégorisation : on distingue et regroupe les règles CSS par affinité logique afin de structurer son code (base, layout, module, state, theme). Le second principe relève de la convention de nommage : ne pas utiliser des ID quand une classe fait très bien l’affaire, nommer les classes de manière à faire ressortir la logique qui s’y cache, … Le troisième principe consiste à découpler le HTML du CSS : garder chaque module indépendant du contexte HTML dans lequel il se trouve, utiliser les sélecteurs d’enfants à bon escient, …

Guide du Débutant pour Associer Vos Polices de Caractères Associer des polices peut relever du défi. Choisir deux polices ou plus qui s'associent est une chose - en choisir deux qui fonctionnent pour atteindre votre but typographique peut vous donner des envies d'aspirine. Voyons si nous pouvons vous éviter des maux de tête. Indexhibit Un article de Wikipédia, l'encyclopédie libre. Indexhibit est un système de gestion de contenu gratuit[2], créé par Daniel Eatock et Jeffery Vaska. Il est écrit en PHP et repose sur une base de données MySQL. Conseils et bonnes pratiques Accueil → La plupart du temps, j'utilise simplement des classes délimités par des traits d'union (ex. .foo-bar, pas .foo_bar ou .FooBar), mais dans certaines circonstances, j'utilise la notation BEM (Block, Élément, Modifieur). BEM est une méthode pour nommer et classifier vos sélecteurs CSS de façon à les rendre beaucoup plus strict, transparent et informatif. La convention de nommage suit ce modèle : .block {}.block__element {}.block--modifieur {} .block représente le niveau supérieur d'une abstraction ou d'un composant. .block__element représente un descendant de .bloc puisqu'il contribue à former .bloc dans son ensemble. .block--modifieur représente un état ou une version différente de .block.

Bonnes pratiques en CSS : BEM et OOCSS Des années durant, j'ai intégré des sites Web et développé des applications JavaScript sans ressentir le besoin d'une méthodologie pour nommer les classes CSS. Puis, les projets grossissant, le code CSS est devenu douloureux… L'épineux sujet du nommage en CSS est loin d'être fermé. Depuis le début de la décennie, plusieurs auteurs majeurs ont partagé leurs recherches. Ils ont apporté un regard nouveau et sont allés à contrecourant, en rupture avec ce qui faisait jusqu'alors consensus.

CSS Cascading Style Sheets (CSS) est un langage de feuille de style utilisé afin de décrire la présentation d'un document écrit en HTML ou en XML (on inclut ici les langages basés sur XML comme SVG ou XHTML). CSS décrit la façon dont les éléments doivent être affichés, à l'écran, sur du papier ou sur autre support. CSS est l'un des langages principaux du Web et a été standardisé par le W3C. Ce standard évolue sous forme de niveaux (levels), CSS1 est désormais considéré comme obsolète, CSS2.1 correspond à la recommandation et CSS3, qui est découpé en modules plus petits est en voie de standardisation. La référence CSS Une référence exhaustive destinée aux développeurs web expérimenté et qui décrit chaque propriété et concept de CSS.

Responsive Images – L'arrivée de srcset Le gros problème du Responsive Web Design tient probablement dans la gestion des ressources chargées et utilisées sur une page web, utiles à notre terminal et adaptées à notre écran ou notre fenêtre de consultation. Stéphanie nous en parlait déjà avec Responsive Webdesign - présent et futur de l'adaptation mobile. Je vous avais parlé l'an dernier de l'annonce du moteur WebKit (12 août 2013) concernant son support de l'attribut srcset ; c'est aujourd'hui Google qui publie la version 34.0.1847.116 (retenez 34, ça suffira) de son navigateur Chrome (qui est passé sous moteur Blink, fork récent de WebKit).

Création d'un éditeur wysiwyg WYSIWYG EditorCe tutoriel à pour but de montrer comment créer un éditeur riche de type WYSIWYG (WhatYouSeeIsWhatYouGet) Création de l'éditeur:Pour activer le mode édition, il existe la propriété "ContentEditable". Notre éditeur sera une balise DIV. Son id sera « ortf » afin de pouvoir l’appeler durant les différents scripts. Structure de notre page : Création de la Toolbar:

fullPage.js - Créez un site fullscreen en scrolling vertical fullPage.js est un plugin jQuery permettant de mettre en place rapidement un site web fullscreen avec scrolling vertical. C'est très tendance aujourd'hui lorsque vous devez présenter un service, un produit, un nouveau script ... On aime ou on déteste mais les pages en fullscreen et scrolling vertical ont le vent en poupe. fullPage.js est un plugin jQuery qui vous permettra de créer en quelques minutes ce type de pages web. Il vous suffit de définir une structure HTML classique à l'aide de section / div pour définir les différentes pages, et créer si besoin le menu associé. 01. Maîtriser l'impression CSS Proposer une version imprimable reposant uniquement sur une feuille de style pour le media print appliquée à la page affichée par le navigateur offre plusieurs avantages immédiats : Il n’est plus nécessaire de générer côté serveur une version HTML spécifiquement destinée à l’impression ; La feuille de style pour le média print est généralement rapide à créer, dès lors que les styles pour l’affichage sont réservés à ce dernier par la précision du media screen ; Les possibilités sont variées (toutes les propriétés de positionnement, de bordures, de typographie, etc. sont disponibles) ; Les résultats par défaut sont corrects pour un effort somme toute raisonnable. On rencontre cependant deux sortes de difficultés : certaines parties du contenu affiché peuvent finalement ne pas être imprimées, certaines propriétés des CSS print peuvent ne pas avoir d’effet, selon les navigateurs.

Related: