Une petite sélec­tion de visages réa­li­sés à par­tir de textes et lettres.

Via Abduzeedo

Brook­lyn we Go Hard, le nou­veau clip de Jay-Z avec San­to­gold, qui sera la BO du film “Noto­rious”, sur Noto­rious B.I.G.

Typographic Posters est un site visant à pré­sen­ter une col­lec­tion de pos­ters à base de typo­gra­phie de qualité.

On y retrou­vera de nom­breux styles et auteurs, comme le fameux Alex Trochut, ou encore Wim Croumwell, Peter Saville etc… ayant pour point com­mun leur attrait pour la lettre.

Typographic Posters

Non, ce post ne par­lera pas d’un groupe de musique rétro-punk post-anarchique, mais plu­tôt de la célèbre l’identité visuelle du métro New-Yorkais, et de son his­toire depuis les pre­mières lignes en 1908.

Une his­toire détaillée et riche en illus­tra­tions se trouve sur le site de l'AIGA,

La police Trixie est sûre­ment la plus connue et la plus uti­li­sée des polices “Machine à écrire”.

Un défaut per­sis­tait pour­tant, sa basse réso­lu­tion.
Il était impos­sible de l’utiliser en grande taille, sous peine de clai­re­ment voir son côté numérique.

Font­Shop vient donc de la recréer, et d’en faire une ver­sion de grande qua­lité, et dis­po­sant de ver­sion alter­na­tives pour chaque carac­tère, afin de rendre les textes plus réalistes.

Ama­teurs de Grunge et de Polars, à vos Logiciels !

Le tra­vail très ori­gi­nal de Si Scott, à mi che­min entre typo­gra­phie cus­tom et illus­tra­tion néo-baroque.

Le tra­vail du Direc­teur Artis­tique Anglais Craig Ward, très élé­gant et mini­ma­liste, tout en gar­dant une forte identité.

Alpha­bet Pho­to­gra­phique, par Lisa Rienermann.

Lau­réat du Type Director’s Club NYC 2007

HandMadeFont.com réa­lise des polices de carac­tères ori­gi­nales, faites à la main.

Très cool.
On adore par­ti­cu­liè­re­ment celle-ci :

View English version

Un post Déve­lop­pe­ment, pour changer :

Si vous avez essayé d’utiliser sIFR (Shaun Inman’s Flash Repla­ce­ment, du nom de son géni­teur), vous avez sûre­ment constaté quelques sou­cis dans l’utilisation de textes de nos contrées, à savoir des textes dis­po­sant de carac­tères accentués :

Par exemple, sur ce blog, vous pour­rez consta­ter que les titres sont en capi­tales.
La ges­tion des accents fut un tant soit peu pro­blé­ma­tique jusqu’à ce que nous met­tions en place un “workaround”.

Voici le pro­blème en ques­tion :

Pour régler ce pro­blème, qui ne peut pas être sup­primé par les deux variables tune­Height et off­set­Top, 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 expor­ta­tion :

La rai­son pour laquelle sIFR ne peut pas régler cela avec les variables pré­vues (off­se­tHeight, et off­set­Top) est la suivante :

off­set­Top effec­tue une trans­la­tion simple : vous spé­ci­fiez “offsetTop:5″ dans votre fichier .js, et chaque bloc de texte sera décalé par rap­port à l’objet flash ver­ti­ca­le­ment de ce nombre de pixels pré­ci­sé­ment, sans plus de véri­fi­ca­tions.
Si vous spé­ci­fiez par exemple “offsetTop:30″, cela va pla­cer le champ texte à y=30, donc 30px vers le bas.

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

tune­Height change la hau­teur du fichier flash du nombre de pixels spé­ci­fiés, sans se sou­cier 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 sim­ple­ment cou­per 5px en bas de l’objet flash.

Ces deux variables ont une grande uti­lité pour ajus­ter fine­ment la hau­teur de votre texte, et la place qu’il occupe verticalement.

Cer­taines polices en effet ont de longues ascen­dantes et des­cen­dantes, et il est néces­saire d’utiliser off­set­Top et tuneHeight.

Mal­heu­reu­se­ment, concer­nant notre pro­blème, cela n’est pas suf­fi­sant, car Flash pré­sente un bug qui coupe pure­ment et sim­ple­ment 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 dis­pose d’une cer­taine 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.

Heu­reu­se­ment, ce pro­blème n’est pré­sent que sur la PREMIERE ligne de texte flash, les sui­vantes s’afficheront correctement.

Notre solu­tion est donc de créer une pre­mière ligne invi­sible, et de déca­ler ver­ti­ca­le­ment le texte.
Il faut en fai­sant cela bien faire atten­tion à gar­der la pos­si­blité de faire varier la hau­teur de cette ligne, voire de la sup­pri­mer com­plè­te­ment depuis le fichier javas­cript, pour gar­der la flexi­bi­lité de sIFR.

Nous allons donc rajou­ter un para­graphe “invi­sible”, et confi­gu­rable à tous les textes conçernés :

Ouvrez le fichier sIFR.as, et, dans la fonc­tion “write(content)”, (aux alen­tours 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 para­graphe de classe “accent­fix”, invisble, et de police de hau­teur 1 par défaut.

Il reste main­te­nant à l’utiliser au sein du fichier javas­cript :
Si vous vou­lez déca­ler votre texte ver­ti­ca­le­ment pour régler les pro­blèmes d’accentuation, vous pou­vez main­te­nant ajou­ter 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 wor­ka­round ne convien­dra pas à tout le monde, mais il per­met déjà de régler sim­ple­ment et élé­gam­ment une bonne par­tie des pro­blèmes inhé­rents à ce bug de flash.

Si vous vous en ser­vez pour votre site, lais­sez nous un commentaire !

Romain