Seenthis
•
 
Identifiants personnels
  • [mot de passe oublié ?]

 
  • #f
  • #fo
  • #fon
  • #font
RSS: #fonts

#fonts

  • #fontspec
  • #fontsquirrel
0 | 25 | 50
  • @hackernoon
    Hacker Noon @hackernoon CC BY-SA 12/02/2019

    3 Reasons why you should focus on the Font rather than the color.
    ▻https://hackernoon.com/3-reasons-why-you-should-focus-on-the-font-rather-than-the-color-a37e1af

    https://cdn-images-1.medium.com/max/1024/1*C_oci0catb5JTI5w-B5u4w.jpeg

    3 Reasons Why You Should Focus on the ‘Font’ of your Site.How you can attract your users with your font.Photo by Mr Cup / Fabien Barral on UnsplashLet me make this article short and simple. I have used dozens of sites, and created three. The feedback I get each time differs. I changed a lot on the CSS files, made it look colorful and classy, but something misses out every time.One day, I started changing the #fonts of the site and noticed the vast difference it made. Some sites look better when you choose a style that suits it. I will give you 3 reasons why.Photo by Annie Spratt on Unsplash1.People give attention to things that are NOT ordinary.Take Medium for example. It has a lot of fonts — two for the quotes, one for the heading, one for the subheadings. The difference indicates different (...)

    #font-on-your-site #technology #typography #web-development

    Hacker Noon @hackernoon CC BY-SA
    Écrire un commentaire

  • @ari
    Ari @ari 4/10/2018

    The Complete CSS Demo for #OpenType Features
    ▻https://sparanoid.com/lab/opentype-features
    This project is a comprehensive CSS font-feature-settings demo for OpenType features

    #fonts

    Ari @ari
    Écrire un commentaire

  • @oanth_rss
    oAnth_RSS @oanth_rss 2/08/2017
    5
    @02myseenthis01
    @mad_meg
    @monolecte
    @7h36
    @ze_dach
    5

    Des sites pour télécharger des fonts gratuites

    ▻https://blog.shevarezo.fr/post/2017/07/31/sites-telecharger-fonts-typos-polices-gratuites

    https://blog.shevarezo.fr/uploads/posts/bulk/9pGEcxho_sites-typos_cover.png

    Que vous soyez graphiste, développeur frontend, vous avez toujours besoin de trouver des typographies qui correspondent au projet que vous menez. Il existe une pléthore de sites répertoriant les typos, avec plus ou moins de réussite. Découvrez une sélection de 9 sites pour télécharger des typos gratuites.

    #typos #fonts #typographies

    via ▻https://diasp.eu/posts/5844068

    oAnth_RSS @oanth_rss
    Écrire un commentaire

  • @baroug
    baroug @baroug 29/06/2017

    FontStruct | Build, Share, Download Fonts
    ▻https://fontstruct.com

    FontWhat?
    FontStruct is a free, font-building tool sponsored by FontShop.
    With FontStruct you can easily create #fonts using geometrical shapes.
    You create “FontStructions” using the “FontStructor” font editor.
    Once you’re done building, FontStruct generates TrueType fonts, ready to download and use in any application.
    You can keep your creations private, but we encourage users to share their FontStructions. Explore the Gallery of fonts made by other FontStruct users. Download them, or clone them and make your own variations.
    The easiest way to get started with the FontStructor is to watch the intro screencast or read the quick start guide.

    #typo

    baroug @baroug
    Écrire un commentaire

  • @cy_altern
    cy_altern @cy_altern CC BY-SA 17/05/2017
    6
    @tofulm
    @baroug
    @ari
    @rastapopoulos
    @raphael
    @oletrouher
    6

    Create Your Own font-face Kits » Font Squirrel
    ▻https://www.fontsquirrel.com/tools/webfont-generator

    Un générateur de variantes de polices (.eot, .svg, .ttf ...) en ligne. Fourni également le code @font-face à intégrer en CSS

    #font-face #générateur #outil-en-ligne #fontsquirrel

    cy_altern @cy_altern CC BY-SA
    • @arno
      ARNO* @arno ART LIBRE 18/05/2017

      Perso je ne l’utilise plus beaucoup, je passe généralement par des outils plus simples qui se content de me convertir la police en WOFF et WOFF2 (les autres formats ne sont plus trop utiles désormais).

      Par exemple :
      ►https://everythingfonts.com/otf-to-woff
      ►https://everythingfonts.com/otf-to-woff2

      ou carrément en ligne de commande sous node.js :
      ►https://github.com/fontello/ttf2woff

      Un petit tour par caniuse indique que Woff est compris par 97% des visiteurs en France (et Woff2 par 87%). Et par ailleurs, @font-face est aussi compris par 97% des visiteurs. Ce qui signifie que tous les visiteurs qui peuvent utiliser des webfonts avec @font-face peuvent en même temps utiliser Woff ; ce qui rend les autres formats (.eot, .svg, .ttf) inutiles.

      ARNO* @arno ART LIBRE
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 18/05/2017

      Mais suivant la langue des contenus du site final, ça permet aussi de réduire le champs, et donc le fichier, ce que ne font pas forcément les autres outils qui ne font que conversion. Non ?

      RastaPopoulos @rastapopoulos CC BY-NC
    • @arno
      ARNO* @arno ART LIBRE 18/05/2017
      @rastapopoulos

      @rastapopoulos : oui effectivement. Mais l’utiliser parce que ça fait les multiples formats de fontes et le code dont on avait besoin il y a quelques années, je signale que ce n’est plus nécessaire.

      ARNO* @arno ART LIBRE
    Écrire un commentaire

  • @fil
    Fil @fil 29/04/2017
    1
    @monolecte
    1

    Font Map · An AI Experiment by IDEO
    ▻http://fontmap.ideo.com

    http://fontmap.ideo.com/images/Font_Map.png

    Font Map, a quick experiment to see how machine learning can address challenges in design.

    #machine_learning #t-SNE #fonts

    Fil @fil
    Écrire un commentaire

  • @monolecte
    Agnès Maillard @monolecte CC BY-NC-SA 1/12/2016
    2
    @reka
    @gastlag
    2

    The 100 best free #fonts | Creative Bloq
    ▻http://www.creativebloq.com/graphic-design-tips/best-free-fonts-for-designers-1233380

    http://cdn.mos.cms.futurecdn.net/cf2e6d717adbd6fd44531af59ede94b3-1200-80.jpg

    We’ve scoured the web to present you with a fine and varied selection of free fonts. Including scripts, serifs, and a range of ligatures, these fonts will give you greater flexibility in your designs, and add to your arsenal of design tools.

    This list represents the 100 best free fonts we’ve found in a variety of styles. We have many other articles covering specialist font types including handwriting fonts, graffiti fonts, web fonts and more, but we have sectioned our main list under these styles:

    #police #design

    Agnès Maillard @monolecte CC BY-NC-SA
    • @reka
      Reka @reka CC BY-NC-SA 1/12/2016

      #typographie

      Reka @reka CC BY-NC-SA
    Écrire un commentaire

  • @supergeante
    Supergéante @supergeante 28/06/2016
    4
    @monolecte
    @mad_meg
    @7h36
    @goom
    4
    @baroug

    Typeset In The Future
    Dedicated to fonts in sci-fi
    Un blog pour @baroug
    ▻https://typesetinthefuture.com

    Avec une analyse typo de Blade runner
    ►https://typesetinthefuture.com/2016/06/19/bladerunner

    https://typesetinthefuture.files.wordpress.com/2016/06/bladerunner_0_05_23_tyrell_corp.jpg?w=560&h=232 https://typesetinthefuture.files.wordpress.com/2016/06/bladerunner_0_09_52_alien_purge_full.jpg https://typesetinthefuture.files.wordpress.com/2016/06/bladerunner_0_14_02_serial_numbers_leon.jpg?w=560&h=232

    #fonts #typographie #science_fiction

    Supergéante @supergeante
    Écrire un commentaire

  • @baroug
    baroug @baroug 27/06/2016
    3
    @supergeante
    @reka
    @gastlag
    3

    Typographics
    ▻http://www.typographics.org

    This site is the beginning of a new publication about type. The focus is you. A designer who uses type, a designers who creates it, or someone who just loves it. Or all three. We’re starting quietly, with a simple group blog. This fall we’ll publish a preview printed edition. The next six months we will try to prove the concept. And if we’re successful, we’ll start regular publication in 2017, with a quarterly print magazine and an active web site.

    #typo

    baroug @baroug
    • @supergeante
      Supergéante @supergeante 27/06/2016

      #fonts #graphisme #fontes #polices_de_caractère

      Supergéante @supergeante
    Écrire un commentaire

  • @b_b
    b_b @b_b PUBLIC DOMAIN 19/05/2016
    1
    @fil
    1

    Using #fonts with node-mapnik
    ▻https://github.com/mapnik/node-mapnik/blob/master/docs/Using-Fonts.md#global

    Mapnik supports rendering custom fonts from a variety of formats. Fonts can either be registered globally or per #map. Normally global font registration is what you need, but per map registration can help reduce memory usage and increase performance in specialized cases.

    /usr/share/fonts/ and /usr/local/share/fonts/ on other Unix systems

    #mapnik #kosmtik

    b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire

  • @b_b
    b_b @b_b PUBLIC DOMAIN 22/03/2016
    2
    @gastlag
    @kent1
    2

    Yrsa & Rasa – open-source #fonts for Latin + Gujarati
    ▻http://github.rosettatype.com/yrsa-rasa

    Yrsa and Rasa are open-source type families published by Rosetta with generous financial support from Google. The fonts support over 92 languages in Latin script and 2 languages in Gujarati script (Gujarati and Kachchi). The family currently has 5 weights. The design and production are done in-house, by Anna Giedryś (@ancymonic) and David Březina (@MrBrezina).

    http://github.rosettatype.com/yrsa-rasa/assets/Yrsa-Rasa-previews_1_big.svg

    #typo

    b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire

  • @liotier
    liotier @liotier CC BY-SA 3/02/2016

    PC Font Pack available: ▻http://int10h.org/oldschool-pc-fonts/fontlist/#ibmvgamcga #typography #fonts - I have no nostalgia for horrible #CGA but the 9x16 #IBM #VGA font elicits very fond memories !

    • #IBM
    liotier @liotier CC BY-SA
    Écrire un commentaire

  • @baroug
    baroug @baroug 27/11/2015
    10
    @b_b
    @rastapopoulos
    @spip
    @nhoizey
    @monolecte
    @7h36
    @goom
    @mukt
    @gastlag
    10

    » Seriously, Don’t Use #Icon #Fonts Cloud Four Blog
    ▻http://blog.cloudfour.com/seriously-dont-use-icon-fonts

    http://blog.cloudfour.com/wp-content/uploads/2015/11/death_to_icon_fonts-slide_20.jpg

    Icons are everywhere. These “little miracle workers” (as John Hicks described them) help us reinforce meaning in the interfaces we design and build. Their popularity in web design has never been greater; the conciseness and versatility of pictograms in particular make them a lovely fit for displays large and small.

    But icons on the web have had their fair share of challenges. They were time-consuming to prepare for every intended display size and color. When high-resolution displays hit the market, icons looked particularly low-res and blocky compared to the text they often accompanied.

    So it’s really no wonder that icon fonts became such a hit. Icons displayed via @font-face were resolution-independent and customizable in all the ways we expected text to be. Sure, delivering icons as a typeface was definitely a hack, but it was also useful, versatile, and maybe even a little fun.

    But now we need to stop. It’s time to let icon fonts pass on to Hack Heaven, where they can frolic with table-based layouts, Bullet-Proof Rounded Corners and Scalable Inman Flash Replacements. Here’s why…

    #typo #icones #web_design

    baroug @baroug
    • @b_b
      b_b @b_b PUBLIC DOMAIN 27/11/2015

      L’article signale cette ressource intéressante pour les personnes qui utilisent ce genre de typos : ▻https://www.filamentgroup.com/lab/bulletproof_icon_fonts.html

      b_b @b_b PUBLIC DOMAIN
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 27/11/2015

      Résumé :

      – Quand on utilise la zone Unicode réservée aux trucs privés, si la fonte se charge mal, on a soit des rectangles pourris, soit des icônes n’ayant rien à voir (emojis, etc). Et si les utilisateurs (dyslexiques par ex) forcent une fonte propre à leur besoin, pareil, ça nique tout.

      – Quand on fait bien les choses et qu’on utilise le bon caractère Unicode correspondant au dessin que l’on veut utiliser : beaucoup de lecteurs d’écran lisent la description du dessin ! Et le seul moyen de l’enlever est d’ajouter du « aria » dans le HTML en plus. Cela peut marcher dans certains cas, mais du coup impossible d’ajouter des icônes uniquement en CSS, dans le thème graphique.

      Filament a produit une librairie utilitaire contenant CSS et JS nécessaire pour utiliser des fontes d’icônes de manière accessible :
      ▻https://github.com/filamentgroup/a-font-garde

      Mais dans la solution de Filament, dans TOUS les cas d’utilisations, ils demandent à utiliser du HTML supplémentaire spécifique à l’icône. Donc d’après moi, c’est un peu pourri : impossible de faire le choix des icônes (ou pas) uniquement dans le thème graphique…

      Sur le long terme, j’ai l’impression que la solution serait que tous les lecteurs d’écran prennent correctement en compte la propriété speak:none.
      De cette manière, il suffirait :
      1) d’utiliser un bon caractère unicode correspondant au mieux au dessin de chaque caractère de notre fonte d’icône (Fontello permet ça par ex), comme ça le fallback visuel serait bon (sauf s’il n’existe pas et dans ce cas faut utiliser la méthode fallback par image de Filament… galère)
      2) d’appliquer sur tous les :before où on veut ajouter une icône, la directive speak:none

      Mais actuellement même Caniuse.com ne contient pas les statistiques des propriétés orales de CSS… Il y a un ticket pour voter pour ça ici :
      ▻https://github.com/Fyrd/caniuse/issues/1515

      Voilà, comment est-ce que vous allez faire à l’avenir vous ?

      En ce qui me concerne, cela fait de nombreux mois que désormais mon HTML ne contient plus de scories pourries en rapport avec l’aspect graphique, que je n’utilise plus de classes genre « icon », « grid », ou je sais pas quelle merde comme ça, et que j’ajoute tout en CSS grâce aux préprocesseurs (exemple : a.super_lien{ @extend .icon; @extend .icon-super; }).
      Du coup la solution de Filament m’embête vraiment…

      #accessibilité #icônes #fontes #fonts #intégration #HTML #CSS

      RastaPopoulos @rastapopoulos CC BY-NC
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 27/11/2015
      @notabene @nhoizey

      Et tiens cc @notabene @nhoizey pour intégration/accessibilité.

      RastaPopoulos @rastapopoulos CC BY-NC
    • @nhoizey
      Nicolas Hoizey @nhoizey CC BY-NC-SA 27/11/2015
      @rastapopoulos

      Pour ma part, les pictos sont en SVG inline, tout simplement. Si je devais me préoccuper de fallback (je parle de mes projets perso uniquement), j’utiliserais <picture> avec une source SVG et le fallback en PNG.

      Merci @rastapopoulos pour le ping, je pensais l’avoir dans mes propres liens, mais ce n’est pas encore le cas…

      Nicolas Hoizey @nhoizey CC BY-NC-SA
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 27/11/2015

      Nan mais si c’est un truc avec des couleurs, etc, ben oui c’est une image, on l’utilise comme une image. Les icônes en fonte pour moi c’est clairement pour les pictogrammes : qui justement doivent suivre UNE couleur choisie en CSS (celle du texte courant très souvent, et parfois une autre), et à utiliser pour différencier des liens, des boutons, etc, tout en restant sobre.

      [ Éditer ] [ Supprimer ]
      versus
      [ ✎ Éditer ] [ ✖ Supprimer ]

      Et dans ces cas là, le fait d’en vouloir ou pas, et le fait de vouloir tels ou tels pictos : c’est un choix du thème graphique. Donc pour moi c’est entièrement au thème graphique de les activer ou pas, et de choisir quelles images ou pas. Sans RIEN changer au HTML (qui ne contient que des classes permettant de différencier le sens de divers liens par exemple, pas leur aspect : « supprimer », « favoris », « inscription », etc).

      Le fait de devoir mettre des <img> (ou même des <span> vides) dans le HTML pour afficher des icônes et non des vraies images, c’est totalement carrément plus du hack (comme il dit dans le lien de départ), qu’utiliser des fontes en CSS. Le fait d’avoir ces pictos, c’est une aide visuelle pour aider à mieux distinguer certains éléments pour celleux qui ont des yeux, mais le lien ou bouton lui c’est juste « Éditer » (par ex).

      Ah et faut ajouter (et ça a été écrit dans les commentaires) que les fontes informatiques, avec unicode, ont été faites pour contenir des lettres ET des pictos. Donc ce n’est absolument pas un hack du tout, c’est parfaitement prévu, et donc c’est aux navigateurs (visuels ET auditifs) et aux normes web (CSS), de savoir les gérer comme il faut.

      Après pour les interfaces où on a des liens ou boutons qui n’ont QUE l’image/picto, là c’est encore autre chose. Mais pour le coup ça pose encore plus de problème ergonomique avant même l’accessibilité : une image seule, tant qu’on ne connait pas l’appli ou le site, difficile de savoir à quoi ça mène (et maintenant dans tous les trucs tactiles on a pas de bulle de survol puisque pas de survol, mais même pour celleux qui ont une souris, ce n’est pas normal de devoir déplacer sa souris un peu partout sur l’écran pour savoir ce que fait l’interface !), donc sauf cas rare et très précis, c’est pour moi de toute façon une mauvaise pratique.

      RastaPopoulos @rastapopoulos CC BY-NC
    • @nhoizey
      Nicolas Hoizey @nhoizey CC BY-NC-SA 27/11/2015

      Pourquoi les pictos devraient-ils n’avoir qu’une seule couleur ?

      (oui, je sais, les fontes multicolores arrivent…)

      Nicolas Hoizey @nhoizey CC BY-NC-SA
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 28/11/2015

      Pour ce point, Fontello fait déjà tout ça pour toi, comme IcoMoon mais en logiciel libre et gratuit. Tu peux importer tes SVG perso, puis les sélectionner comme caractères, et leur assigner un code unicode. Ensuite ça te génère la fonte dans plein de formats, et le CSS qui va avec (comme IcoMoon encore une fois).

      RastaPopoulos @rastapopoulos CC BY-NC
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 2/12/2015

      Une réponse là ▻http://seenthis.net/messages/435520
      Mais qui ne prend pas en compte vraiment les problèmes d’accessibilité (juste utiliser le PUA ne suffit pas, puisqu’il y a le problème des fallbacks, et des polices forcées autrement). Or ce sont ces problèmes dont parlent en priorité l’article de départ.

      RastaPopoulos @rastapopoulos CC BY-NC
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 3/02/2016

      L’explication plus technique de comment ils fonctionnent chez Cloudfour :
      ▻http://seenthis.net/messages/457318

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire

  • @b_b
    b_b @b_b PUBLIC DOMAIN 21/09/2015
    4
    @fil
    @baroug
    @fadixu
    @denisb
    4

    The NSA Of #fonts Censors You In Real-Time | Co.Design | business design
    ▻http://www.fastcodesign.com/3048286/the-nsa-of-fonts-censors-you-in-real-time

    The NSA Of Fonts Censors You In Real-Time Project Seen is a new typeface that automatically crosses out words on the NSA’s watch list. It’s spooky.

    http://g.fastcompany.net/multisite_files/fastcompany/imagecache/inline-large/inline/2015/07/3048286-inline-i-1-the-nsa-of-fonts-censors-you-in-real-time-copy.jpg

    b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire

  • @b_b
    b_b @b_b PUBLIC DOMAIN 14/09/2015

    MapkeyIcons
    ▻http://www.mapkeyicons.com

    The icon font especially for cartographical use. Developed for retina displays. MapkeyIcons are distributed under public domain license : CC0 1.0 Universal.

    #map #fonts #icone

    b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire

  • @b_b
    b_b @b_b PUBLIC DOMAIN 21/07/2015
    1
    @kent1
    1

    ttfautohint
    ▻http://www.freetype.org/ttfautohint

    ttfautohint’s goal is a 99% automated hinting process for web fonts, acting as a platform for finely hand-tuned hinting.

    via ▻https://pixelsvsbytes.com/2013/11/how-to-create-perfect-web-fonts-in-3-steps

    Disponible dans les options du générateur de #fontsquirrel, ce qui permet d’avoir un bien meilleur rendu sur windows avec certaines typos.

    #font-face #shell

    b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire

  • @fil
    Fil @fil 28/12/2014
    7
    @biggrizzly
    @tibounise
    @emersion
    @b_b
    @denisb
    7

    Self-Hosting Google Web #Fonts | Mario Ranftl
    ▻http://ranf.tl/2014/12/23/self-hosting-google-web-fonts

    The effort to host Google web fonts on your own server is immense! (...) I decided to publish a little service called google-webfonts-helper.

    The service uses Google’s font API to retrieve a list of all available web fonts and fetches links to the .eot, .woff, .ttf and .svg files by parsing their hosted CSS files (and faking the User-Agent to get them) … creates an archive which can be downloaded

    ►https://google-webfonts-helper.herokuapp.com/fonts

    via @sonntag

    • #Google
    • #web fonts
    Fil @fil
    Écrire un commentaire

  • @b_b
    b_b @b_b PUBLIC DOMAIN 13/10/2014
    7
    @rastapopoulos
    @goom
    @spip
    @baroug
    @ari
    @mukt
    7

    Loading webfonts with high performance on responsive websites
    ▻http://bdadam.com/blog/loading-webfonts-with-high-performance.html

    Only serve #fonts in woff format Other browsers get the old “websafe” fonts Download the font in “binary” format and optimize it Serve the fonts yourself Serve them as #css files - base64 encoded data URIs If the user doesn’t have the font, load it asynchronously and store in localStorage Otherwise load it from localStorage without accessing the server Have fun because your site renders much faster and your users have a much better usability experience

    #font-face

    • #Disqus
    • #mobile device
    b_b @b_b PUBLIC DOMAIN
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 13/10/2014

      #font #webperf #développement #web #intégration #CSS

      RastaPopoulos @rastapopoulos CC BY-NC
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 14/10/2014

      Bon j’ai envoyé un mail à l’auteur car impossible de commenter sur son Disqus sans avoir un compte autre part, et il m’a répondu, à propos de test de connectivité, donc je vous en fait profiter :

      I think connectivity tests just aren’t reliable now. You can maybe make some predictions, but there are many factors, which make it almost impossible to guess appropriate enough. On a mobile device it also changes almost every time e.g. when you are travelling.

      The cool thing about my method is that the browser loads those fonts asynchronously and it doesn’t really matter whether the font files can be downloaded or not, because the content is always going to be visible. In the worst case it will be displayed with fallback fonts.

      What could be more interesting is to optimize the font stack. Each device has some default fonts which are always installed: like Roboto on Android, Tahoma on Windows etc.

      Et effectivement, un truc intéressant, dans la pile de polices, après avoir mis celle qui doit être téléchargée, mais avant celles qui sont génériques ("verdana", « sans », etc), c’est d’arriver à trouver des polices qui sont dans chacun des systèmes un peu connu du marché (Windows 7 et 8, Android, OSX, Ubuntu, etc).

      De cette manière, même sans avoir encore chargé la police voulue, le site sera tout de même plus joli qu’avec du verdana !

      C’est, entre autre, aussi une idée pour la dist de #SPIP même quand on ne charge aucune police !

      RastaPopoulos @rastapopoulos CC BY-NC
    • @b_b
      b_b @b_b PUBLIC DOMAIN 22/12/2014

      La suite, toujours du même auteur :

      In my previous article about webfont loading I showed a technique about how to load webfonts without blocking page rendering and without annoying the users with flickering text on all pageloads. This time I show you an optimized version of the script and provide a solution for WOFF2 support for the newest browsers.

      Expectations

      – The users must see the text as soon as possible.
      – As longs as the font is loading, the text must be rendered with the fallback font so that users can see and read it.
      – Users shouldn’t be annoyed with flickering text on each page load.
      – Modern browsers with WOFF2 support should receive the fonts in WOFF2 format. This means ca. 30% less filesize.

      ▻http://bdadam.com/blog/better-webfont-loading-with-localstorage-and-woff2.html

      b_b @b_b PUBLIC DOMAIN
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 22/12/2014

      Ça serait pas mal d’arriver à automatiser ça dans SPIP. #idée_pour_SPIP

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire

  • @liotier
    liotier @liotier CC BY-SA 12/10/2014
    1
    @tibounise
    1

    http://i.imgur.com/2WxPIeU.jpg

    Let’s hope one of them is Comic Sans - who doesn’t hate Comic Sans ?

    #CNN #ISIS #typography #fonts

    • #CNN
    • #ISIS
    liotier @liotier CC BY-SA
    Écrire un commentaire

  • @baroug
    baroug @baroug 29/07/2014

    What #fonts tell us about the global economics of the internet - Quartz
    ▻http://qz.com/237851/what-fonts-tell-us-about-the-global-economics-of-the-internet

    If you mostly read English or other Romance or Germanic languages, you’ve been spoiled for choice with digital fonts. The Latin alphabet has long been the subject of intense typographical exploration, with thousands of fonts available in more styles and weights than most non-designers would ever think necessary. Readers of non-Latin scripts like Chinese, Hindi, or Hebrew have never enjoyed such diversity.

    Now the globalization of fonts is erasing this disparity. Type design and delivery might seem esoteric, but the flattening world of type actually speaks volumes about the economic and technological changes that are creating a truly global #internet.

    #typographie

    baroug @baroug
    • @philippe_de_jonckheere
      Philippe De Jonckheere @philippe_de_jonckheere CC BY 29/07/2014

      Sans compter que certaines langues comptent d’insoupçonnables difficultés pour leur dessiner une police, le tamul par exemple est cette merveilleuse langue aux 256 caractères, sur sept hauteurs différentes et de très très belles courbes. Je pense qu’il faut à peu près douze fois le travail pour une seule police qu’il nen faudrait pour une police romane.

      Philippe De Jonckheere @philippe_de_jonckheere CC BY
    Écrire un commentaire

  • @b_b
    b_b @b_b PUBLIC DOMAIN 18/06/2014
    5
    @spip
    @kent1
    @rastapopoulos
    @monolecte
    @mukt
    5

    Octicons
    ▻http://octicons.github.com

    Two years ago we started using Octicons—our icon font—on GitHub. We use them in many of our sites and include them in Atom. Now we are making them available for download to everyone else. Go forth, and octiconify the world. Et il y a même du SPIP :p ▻http://octicons.github.com/icon/squirrel

    #fonts #icone

    • #Github
    b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire

  • @vlentz
    vlentz @vlentz CC BY-SA 11/06/2014
    2
    @tibounise
    @02myseenthis01
    2

    Perfect web #typography with slab-serifs | Webdesigner Depot
    ▻http://www.webdesignerdepot.com/2013/09/perfect-web-typography-with-slab-serifs

    Conventional wisdom states that body text benefits most from being set in a serif font because the serifs create a path for the eye to follow along a line and Tags: #webdesign #fonts typography

    • #Morris Fuller Benton
    vlentz @vlentz CC BY-SA
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 11/06/2014

      ▻http://fr.wikipedia.org/wiki/Égyptienne_(typographie)

      RastaPopoulos @rastapopoulos CC BY-NC
    • @baroug
      baroug @baroug 11/06/2014

      et ▻http://fr.wikipedia.org/wiki/Classification_Vox-Atypi#Les_m.C3.A9canes

      baroug @baroug
    • @baroug
      baroug @baroug 11/06/2014

      Pour ce qui est des textes de très petite taille, peut être. Mais l’ériger en valeur absolue serait une erreur : ça voudrait dire que le Garamond (petite hauteur d’x) est illisible ce qui est absurde. À espace égal une plus grande hauteur d’œil est probablement préférable, mais lorsqu’on peut composer finement, cette considération devient secondaire.

      baroug @baroug
    • @baroug
      baroug @baroug 11/06/2014

      C’est ce que je voulais dire par « À espace égal une plus grande hauteur d’œil est probablement préférable, mais lorsqu’on peut composer finement, cette considération devient secondaire. » Mais ça ne corrobore pas « D’autre part, il semble qu’une sorte de fatalité soit à l’œuvre, qui obligerait à choisir entre “belle” police et police lisible ».

      baroug @baroug
    • @baroug
      baroug @baroug 11/06/2014

      À mon avis, se focaliser sur « la plus lisible » dans une combinaison donnée est forcément frustrant de ce point de vue : y’en a forcément qu’une qui est « la plus lisible », par définition. « Bien lisible » me semble un critère plus opératoire, et à ce titre, le Jenson doit souvent fonctionner : )

      baroug @baroug
    Écrire un commentaire

  • @simplicissimus
    Simplicissimus @simplicissimus 3/06/2014
    3
    @fil
    @geneghys
    @02myseenthis01
    3
    @fil @klaus

    Grâce à Sigmund, Karl et @Fil ▻http://seenthis.net/messages/263063 , je (re)découvre les joies de l’écriture Kurrentschrift et surtout l’existence de polices ad hoc

    https://dl.dropbox.com/s/yb4ql2lone8tvg8/Fraktur%20und%20Kurrent.jpg

    Soit sur le site d’un créateur qui les met à disposition gratuitement,
    ▻http://www.peter-wiegel.de
    soit sur un site de téléchargement gratuit
    ▻http://www.1001fonts.com/kurrent-fonts.html

    #typo #fonts #auf_deutsch
    cc : @klaus

    • #Allemagne
    Simplicissimus @simplicissimus
    • @02myseenthis01
      oAnth @02myseenthis01 CC BY 3/06/2014

      Deutsche #Kurrent - & #Fraktur - #Schriftarten

      [ #Sütterlin ]

      ►https://fr.wikipedia.org/wiki/Kurrent

      La Deutsche #Kurrentschrift ou Kurrent, « écriture cursive allemande », est une #écriture utilisée en Allemagne et dans les pays de culture germanique jusqu’au milieu du XXe siècle. L’étymologie est le latin currere, « courir », qui a également donné le français « cursive ». C’est la forme manuscrite des diverses formes de gothique allemande ou Fraktur utilisées par l’imprimerie. Bien qu’on l’oppose à l’écriture latine, c’est aussi une forme d’écriture latine, avec ses spécificités propres. [...]

      #retro #privacy

      oAnth @02myseenthis01 CC BY
    Écrire un commentaire

  • @vlentz
    vlentz @vlentz CC BY-SA 27/03/2014

    Twitter #bootstrap #icons | Twitter Bootstrap Themes & Templates - Bootstrap Master
    ▻http://bootstrapmaster.com/twitter-bootstrap-icons

    Tags: icons #fonts bootstrap

    • #Twitter
    vlentz @vlentz CC BY-SA
    Écrire un commentaire

  • @b_b
    b_b @b_b PUBLIC DOMAIN 30/10/2013
    5
    @rastapopoulos
    @denisb
    @lydie
    @tibounise
    @mukt
    5

    Ionicons: The premium icon font for Ionic Framework
    ▻http://ionicons.com

    100% free and open source. MIT Licensed.

    #fonts #icone

    • #Apple
    • #MIT
    b_b @b_b PUBLIC DOMAIN
    • @tibounise
      TiBounise @tibounise CC BY-NC-ND 30/10/2013

      Sympa comme alternative à Font Awesome & Glyphicons, en revanche je trouve dommage d’associer une grosse partie des symboles à Apple (toutes les flèches contienent iOS 7 dans le nom de leur classe associée)

      TiBounise @tibounise CC BY-NC-ND
    Écrire un commentaire

0 | 25 | 50

Thèmes liés

  • #typographie
  • #design
  • #css
  • #typography
  • #webdesign
  • #web
  • #font
  • #icone
  • #typo
  • #webfonts
  • #free
  • #spip
  • #font-face
  • #reference
  • #resources
  • #webdev
  • company: google
  • #html5
  • #graphisme
  • #css3
  • #opentype
  • #tex
  • #map
  • position: designer
  • #tools
  • #bootstrap
  • company: twitter
  • #css
  • person: craig mod
  • industryterm: experimental web app
  • #accessibilité
  • industryterm: drop preview tool
  • industryterm: standalone web
  • person: musa ornata
  • person: ian lynam
  • publishedmedium: smashing magazine
  • industryterm: web typography
  • city: typekit
  • #comix_sans
  • person: connor diemand-yauman