How to disable faux weights with CSS and font synthesis
https://andersnoren.se/how-to-disable-faux-weights-with-css/
body { font-synthesis: none; }
Liens en vrac
Quelques 337 marque-pages glanés pendant ma navigation sur le Web.
La conception typographique : être lu par tout le monde
https://ailleurs.akynou.fr/2025/12/16/la-conception-typographique/
Rappels historiques de l’évolution de l’écriture et des différentes familles typographiques.
Top 10 free typefaces for UI design
https://uxplanet.org/top-10-free-typefaces-for-ui-design-118f934b724b
• Figtree
• Satoshi
• DM Sans
• Plus Jakarta Sans
• Inter
• Manrope
• (Open Sans)
• Urbanist
• Lato
• Quicksand
• Satoshi
• DM Sans
• Plus Jakarta Sans
• Inter
• Manrope
• (Open Sans)
• Urbanist
• Lato
• Quicksand
Modern font stacks
https://modernfontstacks.com
Cet outil permet de configurer, de tester et de visualiser des polices plutôt élégantes et surtout avec des rendus instantanés.
System font stack
https://systemfontstack.com/
• Sans-serif
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
• Serif
font-family: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
•Mono
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
• Serif
font-family: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
•Mono
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
Just the punctuation
https://just-the-punctuation.glitch.me/
Outil en ligne qui, à partir d’un texte, extrait uniquement les signes de ponctuation.
(via https://www.la-grange.net/2021/10/10/sendagi)
(via https://www.la-grange.net/2021/10/10/sendagi)
The Inter typeface family
https://rsms.me/inter/
Font sans-serif adaptée pour le web, avec de jolis caractères.
Juste dommage que les ligatures « françaises » comme *fi* ne soient pas présentes.
Juste dommage que les ligatures « françaises » comme *fi* ne soient pas présentes.
Police de caractères Luciole
http://www.luciole-vision.com
« Le caractère typographique Luciole a été conçu spécifiquement pour les personnes malvoyantes. Ce projet est le résultat de plus de deux années de collaboration entre le Centre Technique Régional pour la Déficience Visuelle et le studio typographies.fr. Le projet a bénéficié d’une bourse de la Fondation suisse Ceres et de l’appui du laboratoire DIPHE de l’Université Lumière Lyon 2. »
Courier Prime
https://quoteunquoteapps.com/courierprime/
“Courier Prime: It’s Courier, just better.”
Type with pride
https://www.typewithpride.com
On 31 March, 2017, Gilbert Baker the creator of the iconic Rainbow Flag sadly passed away. Mr. Baker was both an LGBTQ activist and artist, and was known for helping friends create banners for protests and marches. To honor the memory of Gilbert Baker, NewFest and NYC Pride partnered with Fontself to create a free font inspired by the design language of the iconic Rainbow Flag, the font was named “Gilbert” after Mr. Baker. A preview version of the font can be downloaded for free in the download section.
“font-family: monospace, monospace”
https://stackoverflow.com/questions/38781089/font-family-monospace-monospace
Connaissiez-vous le hack “font-family: monospace, monospace” ?
‣ via http://romy.tetue.net/mettez-du-code-dans-vos-pages-web
‣ via http://romy.tetue.net/mettez-du-code-dans-vos-pages-web
Cracking the code behind Apple’s App Store promo card design
http://blog.equinux.com/2017/07/cracking-the-code-behind-apples-app-store-promo-card-design/
Apple utilise une police d’écriture « cachée » pour afficher les codes de réductions de ses cartes cadeaux.
Elle est disponible dans /System/Library/PrivateFrameworks/CoreRecognition.framework/Resources/Fonts/.
Elle est disponible dans /System/Library/PrivateFrameworks/CoreRecognition.framework/Resources/Fonts/.
The new system font stack?
https://bitsofco.de/the-new-system-font-stack/
Les fonts par défaut des différents systèmes d’exploitation.
Les free fonts aujourd’hui
https://la-cascade.io/les-free-fonts-aujourdhui/
Liste de polices libres et gratuites s’approchant de polices professionnelles.
— https://fonts.google.com/specimen/Alegreya
— https://fonts.google.com/specimen/Source+Sans+Pro
— https://fonts.google.com/specimen/Anonymous+Pro
— https://fonts.google.com/specimen/Karla
— https://fonts.google.com/specimen/Roboto
— https://fonts.google.com/specimen/Merriweather
— https://fonts.google.com/specimen/Merriweather+Sans
— https://fonts.google.com/specimen/Lora
— https://fonts.google.com/specimen/Alegreya
— https://fonts.google.com/specimen/Source+Sans+Pro
— https://fonts.google.com/specimen/Anonymous+Pro
— https://fonts.google.com/specimen/Karla
— https://fonts.google.com/specimen/Roboto
— https://fonts.google.com/specimen/Merriweather
— https://fonts.google.com/specimen/Merriweather+Sans
— https://fonts.google.com/specimen/Lora
Les problèmes de rendu font-face sous Chrome et Firefox
http://blog.wax-o.com/2012/11/les-problemes-de-rendu-font-face-sous-chrome-et-firefox-utiliser-des-contours-postscript/
Comment utiliser les web-fonts et les modifier pour un meilleur rendu
Gidole - Open source modern DIN
https://gidole.github.io
Une font alternative à l’excellente DIN, et sous licence MIT.
Font loading revisited with font events
https://www.filamentgroup.com/lab/font-events.html
Chargement “différé” des fonts sur une page web pour un rendu plus rapide.
On charge les fonts via CSS, comme habituellement.
On définit les éléments avec ces polices comme enfant de .fonts-loaded.
Via une API JavaScript, on détecte quand les fonts sont chargées et prêtes, et on ajoute la classe .fonts-loaded à l’élément body : les polices sont affichées.
→ Pas de page sans police ou un blanc entre le chargement des polices.
Dans le même genre : http://www.zachleat.com/web/foft/
On charge les fonts via CSS, comme habituellement.
On définit les éléments avec ces polices comme enfant de .fonts-loaded.
Via une API JavaScript, on détecte quand les fonts sont chargées et prêtes, et on ajoute la classe .fonts-loaded à l’élément body : les polices sont affichées.
→ Pas de page sans police ou un blanc entre le chargement des polices.
Dans le même genre : http://www.zachleat.com/web/foft/