Une petite sélection de visages réalisés à partir de textes et lettres.

Via Abduzeedo

Brooklyn we Go Hard, le nouveau clip de Jay-Z avec Santogold, qui sera la BO du film “Notorious”, sur Notorious B.I.G.

Typographic Posters est un site visant à présenter une collection de posters à base de typographie de qualité.

On y retrouvera de nombreux styles et auteurs, comme le fameux Alex Trochut, ou encore Wim Croumwell, Peter Saville etc… ayant pour point commun leur attrait pour la lettre.

Typographic Posters

Non, ce post ne parlera pas d’un groupe de musique rétro-punk post-anarchique, mais plutôt de la célèbre l’identité visuelle du métro New-Yorkais, et de son histoire depuis les premières lignes en 1908.

Une histoire détaillée et riche en illustrations se trouve sur le site de l’AIGA,

La police Trixie est sûrement la plus connue et la plus utilisée des polices “Machine à écrire”.

Un défaut persistait pourtant, sa basse résolution.
Il était impossible de l’utiliser en grande taille, sous peine de clairement voir son côté numérique.

FontShop vient donc de la recréer, et d’en faire une version de grande qualité, et disposant de version alternatives pour chaque caractère, afin de rendre les textes plus réalistes.

Amateurs de Grunge et de Polars, à vos Logiciels !

Le travail très original de Si Scott, à mi chemin entre typographie custom et illustration néo-baroque.

Le travail du Directeur Artistique Anglais Craig Ward, très élégant et minimaliste, tout en gardant une forte identité.

Alphabet Photographique, par Lisa Rienermann.

Lauréat du Type Director’s Club NYC 2007

HandMadeFont.com réalise des polices de caractères originales, faites à la main.

Très cool.
On adore particulièrement celle-ci :

View English version

Un post Développement, pour changer :

Si vous avez essayé d’utiliser sIFR (Shaun Inman’s Flash Replacement, du nom de son géniteur), vous avez sûrement constaté quelques soucis dans l’utilisation de textes de nos contrées, à savoir des textes disposant de caractères accentués :

Par exemple, sur ce blog, vous pourrez constater que les titres sont en capitales.
La gestion des accents fut un tant soit peu problématique jusqu’à ce que nous mettions en place un “workaround”.

Voici le problème en question :

Pour régler ce problème, qui ne peut pas être supprimé par les deux variables tuneHeight et offsetTop, il faut d’abord le comprendre.

Le bug ne vient pas de sIFR, mais bien de Flash.
pour vous en convaincre, voici deux screenshots :

Dans l’IDE flash.

Et voici le rendu après exportation :

La raison pour laquelle sIFR ne peut pas régler cela avec les variables prévues (offsetHeight, et offsetTop) est la suivante :

offsetTop effectue une translation simple : vous spécifiez “offsetTop:5″ dans votre fichier .js, et chaque bloc de texte sera décalé par rapport à l’objet flash verticalement de ce nombre de pixels précisément, sans plus de vérifications.
Si vous spécifiez par exemple “offsetTop:30″, cela va placer le champ texte à y=30, donc 30px vers le bas.

Il y a donc de grandes qu’il dépasse verticalement.

tuneHeight change la hauteur du fichier flash du nombre de pixels spécifiés, sans se soucier du fait que le texte soit coupé, et sans s’occuper de la taille du champ texte qu’il contient.
tuneHeight:-5 va donc tout simplement couper 5px en bas de l’objet flash.

Ces deux variables ont une grande utilité pour ajuster finement la hauteur de votre texte, et la place qu’il occupe verticalement.

Certaines polices en effet ont de longues ascendantes et descendantes, et il est nécessaire d’utiliser offsetTop et tuneHeight.

Malheureusement, concernant notre problème, cela n’est pas suffisant, car Flash présente un bug qui coupe purement et simplement les polices

Ce n’est donc pas le bloc de texte qui dépasse de l’objet Flash,
mais bien le texte qui dépasse de l’objet texte.

On remarque d’ailleurs que Flash dispose d’une certaine tolérance, et ne coupe pas “a ras” le contenu, mais quelques pixels au dessus.

Pour cela, on ne peut rien faire, car flash ne mesure pas ce dépassement.

Heureusement, ce problème n’est présent que sur la PREMIERE ligne de texte flash, les suivantes s’afficheront correctement.

Notre solution est donc de créer une première ligne invisible, et de décaler verticalement le texte.
Il faut en faisant cela bien faire attention à garder la possiblité de faire varier la hauteur de cette ligne, voire de la supprimer complètement depuis le fichier javascript, pour garder la flexibilité de sIFR.

Nous allons donc rajouter un paragraphe “invisible”, et configurable à tous les textes conçernés :

Ouvrez le fichier sIFR.as, et, dans la fonction “write(content)”, (aux alentours de la ligne 375), remplacez :

375
376
377

this.textField.htmlText = ['<p class="', CSS_ROOT_CLASS, '">',
						content, '</p>'
					].join('');

par :

375
376
377

this.textField.htmlText = ['<p class="accentfix"> </p>','<p class="', CSS_ROOT_CLASS, '">',
						content, '</p>'
					].join('');

ensuite, à la ligne 114, remplaçez :

114
115
116
117
118

  public static function setDefaultStyles() {
	...
      'a:hover { color: #0000FF; text-decoration: none; }'
    ].join(''));
  }

par :

114
115
116
117
118
119
120

  public static function setDefaultStyles() {
    sIFR.styles.parseCSS([
	...
      'a:hover { color: #0000FF; text-decoration: none; }',
	  'p.accentfix {font-size:1;}'
    ].join(''));
  }

Nous avons donc ici un paragraphe de classe “accentfix”, invisble, et de police de hauteur 1 par défaut.

Il reste maintenant à l’utiliser au sein du fichier javascript :
Si vous voulez décaler votre texte verticalement pour régler les problèmes d’accentuation, vous pouvez maintenant ajouter la règle css suivante :

1
2
3
4
5
6
7

sIFR.replace(flash_font, {
	selector: '#someSelector',
	css: [
		'.sIFR-root { /* Your regular sIFR setup goes here*/ }'
	],
	offsetTop:0 /* You can also use this variable, if you feel like it */
});

devient :

1
2
3
4
5
6
7
8

sIFR.replace(flash_font, {
	selector: '#someSelector',
	css: [
		'.sIFR-root { /* Your regular sIFR setup goes here*/ }',
		'.accentfix{display:block; font-size:1; leading:5; }'
	],
	offsetTop:0 /* You can also use this variable, if you feel like it */
});

Pour conclure, ce workaround ne conviendra pas à tout le monde, mais il permet déjà de régler simplement et élégamment une bonne partie des problèmes inhérents à ce bug de flash.

Si vous vous en servez pour votre site, laissez nous un commentaire !

Romain