CONNEXION
  • RetourJeux
    • Sorties
    • Hit Parade
    • Les + populaires
    • Les + attendus
    • Soluces
    • Tous les Jeux
    • Gaming
  • RetourActu Gaming
    • News
    • Astuces
    • Tests
    • Previews
    • Toute l'actu gaming
  • RetourBons plans
    • Bons plans
    • Bons plans Smartphone
    • Bons plans Hardware
    • Bons plans Image et Son
    • Bons plans Amazon
    • Bons plans Cdiscount
    • Bons plans Decathlon
    • Bons plans Fnac
    • Tous les Bons plans
  • RetourJVTech
    • Actus High-Tech
    • Intelligence Artificielle
    • Smartphones
    • Mobilité urbaine
    • Hardware
    • Image et son
    • Tutoriels
    • Tests produits High-Tech
    • Guides d'achat High-Tech
    • JVTech
  • RetourCulture
    • Actus Culture
    • Culture
  • RetourVidéos
    • A la une
    • Gaming Live
    • Vidéos Tests
    • Vidéos Previews
    • Gameplay
    • Trailers
    • Chroniques
    • Replay Web TV
    • Toutes les vidéos
  • RetourForums
    • Hardware PC
    • PS5
    • Switch 2
    • Xbox Series
    • Switch
    • Pokemon pocket
    • FC 25 Ultimate Team
    • League of Legends
    • Tous les Forums
  • PC
  • PS5
  • Xbox Series
  • Switch 2
  • PS4
  • One
  • Switch
  • iOS
  • Android
  • MMO
  • RPG
  • FPS
En ce moment Genshin Impact Valhalla Breath of the wild Animal Crossing GTA 5 Red dead 2
Liste des sujets

CSS optimisé pour la lisibilité

Triggered
Triggered
Niveau 9
12 décembre 2015 à 21:38:42

Salut,
Pour quelques usages qui me reviennent souvent, je cherche à faire une feuille de style simple et optimisée pour la lisibilité et la clarté.
Pour ça je me suis un peu inspiré :

  • du mode lecture de Firefox : http://cdn.ghacks.net/wp-content/uploads/2015/02/firefox-reader-mode.jpg
  • de ce site : http://bettermotherfuckingwebsite.com/

Et après un peu de triturations je suis arrivé à ce rendu : https://jsfiddle.net/60nvtu57/1/ (je vous conseille d'enregistrer le HTML et le CSS dans un fichier séparé si vous voulez avoir un meilleur aperçu)

Du coup j'aimerais bien avoir quelques retours et j'aurais quelques questions :

  • je suis sur Windows, donc pour moi les meilleurs polices disponibles sont Segoe UI pour le sans-serif et Consolas pour le monospace. Quels sont les "équivalents" en très bonnes polices sous OSX et Linux ? Il me semble qu'OSX utilise pas mal Helvetica pour le sans-serif mais je sais pas s'il y a mieux... Je connais les fontes Open Sans de Google mais j'aimerais me passer de dépendances si possible.
  • est-ce que vous avez des suggestions de choses à changer, à ajouter... ou tout simplement des conseils ou guidelines liés à la typographie et à la lisibilité ?

J'ai aussi essayé de garder l'ensemble "responsive", normalement ça doit passer sans trop de soucis...

Merci [[sticker:p/1lgd]]

lisarael
lisarael
Niveau 13
12 décembre 2015 à 21:41:04

Pour les polices, je partirai sur San Francisco pour mac (nouvelle police par défaut), et sur Linux, j'irai vers DejaVu.

Triggered
Triggered
Niveau 9
12 décembre 2015 à 22:01:58

Apparemment San Francisco ne peut pas être utilisée in browser, excepté sur Safari http://stackoverflow.com/a/32660790/1544176 :(

Pour la DejaVu elle m'a l'air d'être plutôt pas mal disponible, je vais essayer de trouver des stats de disponibilités de police par OS, merci :oui:

EDIT : http://www.inkwell.ie/typography/improvedfontstacks.html plus de 90% de support pour les DejaVu, va pour ça donc ! Je suis étonné pour le support du Segoe UI par contre, mais je vais coller ça sur l'ancienneté de la page (malgré l'absence de date)

Message édité le 12 décembre 2015 à 22:04:56 par Triggered
Pseudo supprimé
Pseudo supprimé 12 décembre 2015 à 23:17:29

Tous les Windows 7+ utilisent Segoe UI comme police système.

Triggered
Triggered
Niveau 9
12 décembre 2015 à 23:44:28

Yep, c'est pour ça que le 45% me parait étonnant, je vais pas en tenir compte du coup

Sous forums
  • Aide à l'achat Mac
  • Création de sites web
  • Création de Jeux
  • Linux
  • Programmation
  • Internet
  • Steam Deck
  • Macintosh
  • Hardware
La vidéo du moment