Archetype, Digital Typography #design Tool by Our Own Thing, using Google web fonts
▻https://archetypeapp.com/#
#typo #typographie #font #webfont #css #police
Archetype, Digital Typography #design Tool by Our Own Thing, using Google web fonts
▻https://archetypeapp.com/#
#typo #typographie #font #webfont #css #police
Ah voilà enfin retrouvé, je ne me disais bien : ▻https://seenthis.net/messages/597505
et
▻https://seenthis.net/messages/627741
À ce moment là, ils n’avaient pas encore bien configuré leurs redirections http=>https et www=>sans www. Et comme seenthis ne fusionne toujours pas ces URL… Du coup je ne le retrouvais pas.
70 CSS text effects
▻http://freefrontend.com/css-text-effects
Collection of HTML and CSS text effects with little JavaScript: 3D, animated, glitch, hover, shadow, rotating and typing. Demo and download code (*zip).
Pas testé (à cette heure, j’ai codepen.io qui ne charge pas les pages).
#html #css #typographie #javascript #svg
Milch - Lait - Latte. An exhibition on iconic Swiss graphic #design manuals setting a multilingual standard
▻http://sgdtr.ch/journal
Josef Müller-Brockmann’s book Grid systems in graphic design is probably the best known manual by a Swiss graphic designer. First published by Niggli Verlag in 1981 it has been reprinted in its original bilingual version in English and German several times and was translated into Spanish, Portuguese, Korean editions, just to name a few. However popular the book, it has never been published in French or Italian thus far – a gap which Editions Entremonde, a young publishing venture from Paris and Geneva, has now filled. The reason – they say – is to make this text available to students in Italian and French-speaking countries, so they can read Müller-Brockmanns text in their first language and expose it to a more substantial critical reflection.
Web Typography: Designing Tables to be Read, Not Looked At
▻https://alistapart.com/article/web-typography-tables
“Tables are a frequently overlooked aspect of reading, sometimes overstyled, sometimes poorly thought out. Responsiveness is a particularly thorny issue as the best solutions depend very much on the utility of the table. Tables can be packed with data, rich in content and meaning. Give them the attention they deserve.”
Faisons le point ! - romy.tetue.net
►http://romy.tetue.net/faisons-le-point
Pour ne plus se tromper de caractère — notamment entre le point final, la puce, le point médian et les opérateurs mathématiques —, voici un tableau regroupant les principaux points utilisés en typographie française et leur encodage informatique
Puis je me permettre un ajout ?
Je mettrais bien les règles de typo associées à chaque type de point.
; précédé d’une espace fine et suivi d’une espace
… collé au mot précédent et suivi d’une espace
etc
Les erreurs de typo sont tellement courantes, surtout depuis que les éditeurs de texte Wysiwyg ne disent plus ce qu’ils font, que l’on trouve énormément de fautes sur le net.
Je sais que le but n’était que de présenter le point médian (qui sert à l’écriture inclusive… terme que j’ai découvert il y a une semaine, c’est dingue comme on peut faire un truc sans savoir que ça porte un nom), mais les espaces, c’est important aussi… il n’y a pas que la grosse barre du bas du clavier.
PS : je serai aux Flupa days à Nantes
Je n’avais pas vu ta réponse @sandburg : n’hésite pas à commenter l’article ;)
Journées LaTeX de Lyon 2017 : supports de présentation - Geekographie Maïeulesque
▻https://geekographie.maieul.net/214
Des journées LaTeX « Édition et typographie numériques, épistémologie » se tiennent en ce moment à l’EnsSib. J’y interviens pour deux conférences.
D’une part, on m’a demandé de parler de XeTeX et des nouveaux moteurs — c’est-à-dire LuaTeX — parce que je recommande effectivement l’emploi de Xe(La)TeX à qui débute, notamment pour la gestion de l’UTF-8.
Je présente donc dans cette conférence pourquoi ces deux moteurs sont meilleures que pdfTeX pour gérer l’UTF-8, mais aussi pour d’autres problèmes. Et j’expose aussi leurs différences.
D’autre part, en tant que mainteneur de (r)(e)ledmac / (r)(l)edpar depuis 2011, et pour une sessions spécifiquement consacré à la typographie, j’ai jugé utile de faire un bilan d’étape de mon travail, et surtout des choix majeurs que j’ai effectués.
After the flood | Projects | AtF Spark
▻http://aftertheflood.co/projects/atf-spark
“Can charts be shown in text without using code?”
Data can be hard to grasp – visualising it can make comprehension faster. Sparklines (tiny charts in text, like this: 123{10,20,30,40,50,60,70,80,90,100}789) are a useful tool but creating them for the web has always required code. Removing the need for code makes it more accessible. If you can use type, you can use Spark.
GitHub - aftertheflood/spark: A typeface for creating sparklines in text without code.
▻https://github.com/aftertheflood/spark
Spark uses the calt feature of OpenType to perform simple replacement operations on numbers. It takes strings like 123{30,60,90}456 and outputs a sparkline with three datapoints (30, 60, and 90) – the numbers outside of the brackets are not transformed.
When using the webfonts in a browser, you are supposed to explicitly enable the calt, however it seems that these days calt is enabled by default and you don’t need to do anything to make it work other than assign the font to your text.
la cuisine du graphiste : Quelles #typo iraient bien ensemble ?
▻http://www.lacuisinedugraphiste.net/2017/09/quelles-typo-iraient-bien-ensemble.html
Le site est très complet et il permet de travailler les approches, les interlignages etc pour avoir une vision la plus fidèle possible de ce que l’on désire.
À noter que c’est conçu pour les travaux digitaux. Les corps sont en pixels, les styles sont en CSS…
►http://typecast.com est bien et a l’air plus complet et plus simple je crois (et pas que en pixels, on peut vraiment tout mettre en « em » et télécharger les CSS produites à la fin etc)
C’est sûr que c’est top TypeCast mais ►http://www.archetypeapp.com est très bien comme outil de base (et on peut tout à fait travailler en em ou en %, exporter les CSS ou même les intégrer dans Sketch). Il ne nécessite pas de s’enregistrer, permet avec le ratio des tailles de typos de faire un prototypage rapide, propose une aide pour choisir une police.
De Linux Libertine à Libertinus - Geekographie Maïeulesque
▻https://geekographie.maieul.net/215
Il y a un certain temps, j’avais publié un fork de la police Linux Libertine corrigeant un bug sur les chiffres elzéviriens en italique gras [1]. Depuis la police Linux Libertine a été officiellement forkée par Khaled Hosny sous le nom de « Libertinus ». L’auteur a corrigé le bug et d’autres.
Autant donc utiliser celle-ci.
Tout comprendre à l’écriture inclusive, que les antiféministes adorent détester
▻http://www.francetvinfo.fr/societe/tout-comprendre-a-l-ecriture-inclusive-que-les-antifeministes-adorent-d
Qu’est-ce que l’écriture inclusive ?
L’écriture inclusive est une technique d’écriture qui englobe des règles de grammaire et de syntaxe permettant d’assurer une représentation plus égalitaire des femmes et des hommes dans la langue française. Cette méthode recouvre plusieurs grands principes. Elle encourage non seulement à féminiser les noms de métiers et les titres de fonctions pour désigner une femme ("la présidente", « une agricultrice » plutôt que « Mme le président » ou « une femme agriculteur »), mais également à combiner le masculin et le féminin pour désigner un groupe qui comprend des femmes et des hommes ("les électeurs et les électrices").
Le Guide pratique pour une communication publique sans stéréotype de sexe, édité en novembre 2015 par le Haut Conseil à l’Egalité entre les femmes et les hommes, invite également à bannir les termes « homme » et « femme » lorsqu’ils sont employés pour désigner l’espèce humaine d’une part ("les droits de l’homme") ou l’ensemble des femmes de l’autre ("la journée de la femme"). Pour le Haut Conseil, parler de « la femme » évoque « le fantasme, le mythe, qui correspondent à des images stéréotypées et réductrices telles que la figure de ’l’Arabe’ ou ’du Juif’. »
La règle grammaticale selon laquelle le masculin l’emporte sur le féminin est également dans le viseur des partisans de l’écriture inclusive. En 2011, trois associations publiaient une pétition intitulée « Que les hommes et les femmes soient belles ! » qui invitait à s’en débarrasser pour revenir la règle de la « proximité ». Celle-ci consiste à accorder le genre de l’adjectif avec celui du plus proche des noms qu’il qualifie, et le verbe avec le plus proche de ses sujets, comme le titre de la tribune l’indique.
Interface #font family
▻https://rsms.me/interface
Interface is a font for highly legible text on computer screens.
Doit bien marcher avec la liseuse, aussi, non ?
Il semble down effectivement.
C’est l’effet Seenthis, plus fort que l’effet Slahdot ^^
On peut consulter le repo github en attendant ;)
Ce serait une resucée un peu rapide de la Roboto, les gens s’engueulent à ce sujet sur twitter : p
Interface is similar to Roboto, San Francisco, Akkurat, Asap, Lucida Grande and other “UI” typefaces. Some trade-offs were made in order to make this typeface work really well at small sizes:
Currently not suitable for very large sizes because of some small-scale glyph optimizations (like “pits” and “traps”) that help rasterization at small sizes but stand out and interfere at large sizes.
Rasterized at sizes below 12px, some stems—like the horizontal center of “E”, “F”, or vertical center of “m”—are drawn with two semi-opaque pixels instead of one solid. This is because we “prioritize” (optimize for) higher-density rasterizations. If we move these stems to an off-center position—so that they can be drawn sharply at e.g. 11px—text will be less legible at higher resolutions.
C’est vrai qu’elle a un dessin assez proche, mais elle me parait un peu plus compacte horizontalement, comme si elle avait un peu moins d’approche.
Mais je n’ai pas vraiment fait de vrai comparatif.
Künstliche Intelligenz: Google bringt eine Machine-Learning-Bibliot...
▻https://diasp.eu/p/5913618
Künstliche Intelligenz: Google bringt eine Machine-Learning-Bibliothek für das Web ▻https://www.heise.de/developer/meldung/Kuenstliche-Intelligenz-Google-bringt-eine-Machine-Learning-Bibliothek-fuer-da #JavaScript #KünstlicheIntelligenz #MachineLearning #TypeScript
Optimisez vos polices web - Alsacreations
▻https://www.alsacreations.com/article/lire/1741-Optimisez-vos-polices-web.html
Gestion des polices web : bonnes pratiques, optimisations, formats, stratégies de chargement...
Présente aussi la (nouvelle) spécification W3C « rel=preload » pour précharger les ressources d’une page (cf ▻https://developer.mozilla.org/fr/docs/Web/HTML/Pr%C3%A9charger_du_contenu)
Ressources supplémentaires :
- une collection de webfont optimisées : ▻https://github.com/alsacreations/webfonts
- le guide complet de toutes les alternatives pour la gestion des polices dans les pages web (en anglais) : « A Comprehensive Guide to Font Loading Strategies » : ►https://www.zachleat.com/web/comprehensive-webfonts
Nouveau manuel complet de #typographie : historique, composition, règles orthographiques, imposition, travaux de ville, journaux, tableaux, algèbre, langues étrangères, musique et plainchant, machines, papier, stéréotypie, illustration / par Émile Leclerc,... ; préface de M. Paul Bluysen,... | Gallica
▻http://gallica.bnf.fr/ark:/12148/bpt6k6336729h/f9.image
▻http://gallica.bnf.fr/ark:/12148/bpt6k6336729h/f9.medres
Des sites pour télécharger des fonts gratuites
▻https://blog.shevarezo.fr/post/2017/07/31/sites-telecharger-fonts-typos-polices-gratuites
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.
La Nouvelle Typographie
▻http://www.caractere.net/livres/item/la-nouvelle-typographie
Publié en 1928, La Nouvelle Typographie est un manifeste pour la modernité élaborée par Jan Tschichold (1902-1974), Allemand né d’un père peintre en lettres à Leipzig. Cet ouvrage est dorénavant disponible en français grâce aux traducteurs Françoise et Philippe Buschinger. L’auteur, qui travailla comme typographe et enseignant en Allemagne, Suisse et Angleterre, fut internationalement connu en 1925 avec la publication de Typographie élémentaire et pour le renouvellement de la ligne graphique de Penguin Books.
Mise en pratique de #RxJS dans #Angular
▻https://makina-corpus.com/blog/metier/2017/premiers-pas-avec-rxjs-dans-angular
Les quelques bases suffisantes pour bien utiliser RxJS dans Angular 2 et 4.
Fonts from the Future ?⚡️ | Alphabettes
▻http://www.alphabettes.org/fonts-from-the-future
Dear Leader has chosen His favorite typeface of 2116. Conceived, designed, and distributed exclusively by the Ministry of Truth, we are pleased to announce that with this release, we have leapt across a major technological hurdle amongst our news sources: the time-consuming task of editing conflicting stories. Propa saves journalists precious time by automatically replacing incorrect words with truthier words—taking advantage of simple OpenType technology.
Our news sources have all agreed to use Propa, and they are very enthusiastic to do so because they no longer have the tedious task of choosing words. The Ministry happily serves the fonts, so we are able to continue to add words all the time, bettering our languages. When we make our language better, we make our Country better.
FontShop
▻https://www.fontshop.com/content/the-japanese-foundry-scene
This piece focuses on the Japanese font foundry scene. It is a scene in constant change, a result of bankruptcies by individual companies, mergers, start-ups and constantly shifting licensing models. In what follows, I intend to provide an overview of the most important foundries today.
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
#Fluid #Responsive #Typography With #CSS Poly Fluid Sizing
▻https://www.smashingmagazine.com/2017/05/fluid-responsive-typography-css-poly-fluid-sizing
Fluid layouts have been a normal part of front-end development for years. The idea of fluid typography, however, is relatively new and has yet to be fully explored. Up until now, most developers’ idea of fluid typography is simply using Viewport units maybe with some minimum and maximum sizes.
That’s called a trendline. It’s a way to find an interpolated font-size value for any viewport width, based on the data provided.
The are several methods for determining the slope and y-intercept. When multiple values are involved, a common method is the Least Squares fit:
You can use the trendline equation like this:
h1 {
font-size: calc({slope}*100vw + {y-intercept}px);
}
Once you find your slope and y-intercept you just plug them in!
Ya des gens qui sont pétés du bulbe quand même. :D
Et une preuve de plus que le métier d’intégrateurice n’a rien à envier en complexité aux devs « backend ». :)
Ouais, alors bon, faut quand même un petit niveau de math !
J’ai calculé ma pente, mais le y-intercept, c’est autre chose... c’est quoi les Y et X avec une barre dessus dans cette formule :
Note pour plus tard : penser à mieux écouter les cours de math...
FontBase — A blazing fast, beautiful and free font manager for designers.
▻http://fontba.se
FontBase gives you all the stability, speed and reliability of a paid font manager, but free and on all platforms!
@ninachani le site annonce bien :
We got Mac, Windows and Linux
Ou alors je n’ai pas compris ton commentaire ?
Oui je viens d’aller voir. C’est génial, c’est multi plateformes. Désolée, j’avais pas vu que c’était écrit au dessus. C’est la chaleur !
Clavier français en ligne Lexilogos
▻http://www.lexilogos.com/clavier/francais.htm
Le site Lexilogos permet de copier-coller en quelques secondes les accents sur les majuscules et quelques autres caractères typographiques
#ortotypographie #typographie #signes_typographiques #claviers
Sinon, vive le #Bépo pour la typographie française.
Ce sera l’étape d’après ;-) en attendant c’est une tricherie facile... 8-°
Typannot
▻http://gestualscript.fr/typannot.html
Le projet se concentre sur la question de la représentation graphique des Langues des Signes dans le contexte de l’annotation. Il vise à explorer de nouveaux principes de formalisme et de composition du signe en faisant appel aux connaissances issues de l’état de l’art sur les représentations graphématique et graphique des langues des signes et du corps. Actuellement dans une phase de développement, plus de 200 configurations manuelles sont d’ores et déjà représentées par des caractères graphiques pour plus de 9 langues des signes. Les trois autres paramètres manuels auront une représentation glyphique à la fin de l’année 2015. A terme un dispositif original permettra de capturer en plus de la trace, les configurations, les orientations et le mouvement.
#typographie #LSF
Le document et son texte de présentation sont un peu anciens (2015). Repéré dans la liste des projets financés « Langues et numériques 2017 » par le Ministère de la culture.
▻http://www.culturecommunication.gouv.fr/Thematiques/Langue-francaise-et-langues-de-France/Politiques-de-la-langue/Langues-et-numerique/Resultats-de-l-appel-a-projets-Langues-et-numerique-2017