#typographie

The History of Typography - Animated Short - YouTube
►http://www.youtube.com/watch?feature=player_embedded&v=wOgIkxAfJsk

A paper-letter animation about the history of fonts and typography.
291 Paper Letters.
2,454 Photographs.

from @thibnton

Je me culture avec l’interwebz : pourquoi James Cameron porte-t-il un t-shirt « Papyrus 4 Ever » sur le tournage d’Avatar ?
http://www.fastcodesign.com/1665318/the-8-worst-fonts-in-the-world

http://thecreativesideshow.files.wordpress.com/2010/01/jc_shirt.jpg

Avatar cost more to make than any other film in history but it did its best to recoup whatever it spent on 3-D special effects and computer-generated blue people by using the cheapest and least original font it could find: Papyrus, a font available free on every Mac and PC. They did tweak it a little for the posters, but they used the standard version for credits and the subtitling for the Na’vi conversations. (On the website iheartpapyrus.com you’ll see an amusing Photoshop of James Cameron briefing star Sam Worthington in a T-shirt proudly asserting “Papyrus 4 Ever!”)

#typographie #merci_arno

L’origine médiévale de l’hyperlien, des pointeurs et des smileys | Frederic Kaplan

http://fkaplan.wordpress.com/2013/04/19/lorigine-medievale-de-lhyperlien-des-pointeurs-et-des-smileys

Signalé par Mona Chollet qui n’aura certainement pas pensé à mettre ce lien sur seenthis

L’origine médiévale de l’hyperlien, des pointeurs et des smileys
avril 19, 2013

http://fkaplan.files.wordpress.com/2013/04/manicule-31.jpg?w=300&h=261

Le second manuscrit que nous présentons dans une vitrine holographique pour l’exposition «  Le lecteur à l’oeuvre  » est une copie du XIVe siècle produite à Bologne d’un texte juridique de l’empereur byzantin Justinien Ier. Sa décomposition révèle d’étranges surprises et nous invite, comme pour le Guido delle colonne à un voyage dans le temps. Je me base pour ce billet sur le texte de Valérie Hayaert (à paraitre dans le livre le lecteur à l’oeuvre chez Infolio) qui s’appuie elle-même sur certaines conclusions d’Élisabeth Pellegrin (1982, pp. 195-198.). Et toujours un grand merci à Radu Suciu qui me guide dans la compréhension dans ces mondes des manuscrits médiévaux.

#typographie

Actes - 7e Forum Européen de l’Accessibilité Numérique Faire de l’e-accessibilité une compétence professionnelle
http://inova.snv.jussieu.fr/evenements/colloques/colloques/article.php?c=78&l=fr&a=428

Ces bonnes pratiques, qui s’appliquent majoritairement au moment de la conception et de l’habillage graphique, garantissent une bonne lisibilité de la page #web et valident les critères Accessiweb précités.

Une présentation de @tetue sur les bonnes pratiques en matière de #typo sur le web. Peut être pratique quand il s’agit de sensibiliser quelqu’un à ce sujet.

#fonts #accessibilite

Logical Breakpoints For Your Responsive Design | Smashing Magazine
http://www.smashingmagazine.com/2013/03/01/logical-breakpoints-responsive-design

https://dl.dropbox.com/s/64udo58xdeceosi/international-measure-slider.png

classic typographic theory can help you determine the right breakpoints for your responsive website. You could even go so far as to create different layouts for different languages.

http://nerd.vasilis.nl/code/measure-help

#typographie #responsive #web_design #mobile #internationalisation

E-TeX : Guidelines for Future #TeX Extensions - revisited

http://latex-community.org/know-how/latex/55-latex-general/475-e-tex

#LaTex #Typographie

Introducing Adobe Blank « Typblography
http://blogs.adobe.com/typblography/2013/03/introducing-adobe-blank.html

Earlier this year, the Adobe Type Team was approached by one of our other development teams to produce a special-purpose font with two fascinating—at least to me—characteristics:

All Unicode code points are covered.
All code points are rendered using a non-spacing and non-marking glyph.

#typographie #webfonts #@fontface

Tu dois absolument aller voir les créations de FONTYOU, parce qu’ils sont jeunes ils sont fous ils sont plein de talent :
http://shop.fontyou.com

Il y a notamment Valentine Proust, Micaela Neustadt et Sofia Proisy Lesnik, trois excellentissimes anciennes du #dsaa_ct d’Estienne.

#shameless_copinage #typographie

Ditching the Shoehorn: Designing #Type That Works on #ePubs, Mobi and the Web | #Design in the browser with web fonts and real content — Typecast
http://typecast.com/blog/ditching-the-shoehorn-designing-type-that-works-on-epubs-mobi-and-the-web

Designing typography that works across multiple platforms is no small task. Today, Stewart Curry of Woopie shares what he’s learned in the publishing trenches.

#typographie

Un bon bouquin qui vient de sortir aux éditions B42, Le Transformateur sur les principes de création des diagrammes Isotype, qui ont servi à donner une image visuelle à des informations statistique. Un langage visuel qui va bien au delà de la simple compilation de pictogrammes.
http://www.editions-b42.com/static/uploads/books/B42_Neurath_Le_Transformateur_thumb_143.jpg
#Livres #typographie #statistiques #pictogrammes #copinage_éhonté

Paris Web – Petit florilège de bonnes pratiques graphiques
http://www.paris-web.fr/2012/ateliers/petit-florilege-de-bonnes-pratiques-graphiques.php

conférence de Tetue sur les bonnes pratiques pour le graphisme d’un site : tous les points à examiner illustrés d’exemples

#graphisme #ergonomie #style #pratique #typographie #webdesign

Movies title screens -
Vaste collection de photos d’ecran de titre de films
http://www.shillpages.com/movies/aa.htm

http://www.shillpages.com/movies/arsenicandoldlace1944ld.gif

#cinéma #typographie

Using Type: Getting #font-face Right, Preventing Faux Bold « FontShop Blog
http://blog.fontshop.com/2013/02/14/using-type-getting-font-face-right-preventing-faux-bold

First, thanks Art Blanc for requesting that I add this brief bit as an extension to Using Styles Properly. Designing with professional webfonts, you’ve generally got two options. Host your own, or go with someone like Typekit or Webtype that handles the hosting and serving of font files as needed. I’ll focus on the first case, but this is still pretty applicable to the second, as it will point out why problems like faux bold and faux italic occur, and how to fix them.

#typographie

[Boîte à outils] Quelques ressources pour améliorer la lisibilité de nos médias
http://atelier.mediaslibres.lautre.net/Boite-a-outils-Quelques-ressources.html
Une page de ressources pour les #médias_alternatifs sur la #typographie, en particulier sur le web. Ami-e-s de Seenthis, si vous avez des liens de référence à proposer, merci :-)

Responsive Typography: The Basics | Information Architects
►http://informationarchitects.net/blog/responsive-typography-the-basics

howto faire une typographie responsive

#typographie #responsive #css #mobile #smartphone

Le graphiste Pierre Di Sciullo affiche ses idées - Arts et scènes - Télérama.fr
http://www.telerama.fr/scenes/le-graphiste-pierre-di-sciullo-affiche-ses-idees,89584.php

http://expositionafficheaction.fr/wp-content/uploads/2012/10/exposition_affiche_action.jpg

Depuis 1789, la politique s’écrit dans la rue, sur des affiches. C’est le thème de la passionnante #exposition « Affiche-action : quand la politique s’écrit dans la rue » à l’Hôtel des Invalides, à Paris (jusqu’au 24 février 2013). Plus de 150 documents y font revivre les moments exacerbés de deux siècles d’histoire : La Commune de Paris, avec ses appels à rejoindre les barricades, les petits placards concoctés à la main par des résistants anonymes pendant l’Occupation, ou encore les slogans insolents de mai 68.

L’expo présente aussi les œuvres de deux affichistes contemporains : Pierre Di Sciullo et Vincent Perrottet, qui sont justement des héritiers de 68. Si Pierre Di Scuillo n’a jamais été encarté, il revendique une filiation avec #Grapus, un groupe de graphistes très influent dans les années 1970-80. Grapus était actif dans le monde communiste, mais ses images ont toujours été refusées par la propagande officielle du PCF. Il avait pour commanditaires des communistes en marge de la ligne du parti, comme Jack Ralite. Pierre Di Sciullo et Vincent Perrottet ont tous deux travaillé avec d’ex-membres de Grapus.

http://images.telerama.fr/medias/2012/11/media_89584/le-graphiste-pierre-di-scullio-affiche-ses-idees,M98040.jpg

L’EXPOSITION
http://expositionafficheaction.fr/lexposition

Aujourd’hui très largement associée aux messages publicitaires, elle fut avant tout l’expression d’une parole publique forte. Nombreux sont les exemples qui ont marqué l’histoire : des affiches révolutionnaires de 1789 à celles de mai 68, les écrits politiques n’ont eu de cesse de recouvrir les murs de la ville, faisant de la rue le terrain d’affirmation de la démocratie.

#affichiste #graphisme

Les polices ont du caractère. Les polices ont du caractère | La-Croix.com
http://www.la-croix.com/Archives/2012-11-15/Les-polices-ont-du-caractere.-Les-polices-ont-du-caractere-_NP_-2012-11-15

Alors que le tout-venant voit dans la page le noir de la lettre, le créateur de typographie s’attache au blanc. « Ce qui nous intéresse, explique Philippe Millot, enseignant à l’École nationale supérieure des arts décoratifs (Ensad) et dessinateur de livres, c’est ce qui n’est pas visible, c’est-à-dire tous les espaces de politesse de la typographie : les marges, les contreformes (les blancs à l’intérieur des lettres et entre elles). Ils expriment pour moi la qualité de nos échanges avec les autres. »

et http://www.la-croix.com/Archives/2012-11-15/Les-polices-ont-du-caractere.-Regards-d-ecrivains-_NP_-2012-11-15-876570

#typographie

Hacen propose une (excellente) collection de polices arabes :
http://www.hacen.net/spip.php?rubrique9

– c’est du shareware (pas libre-libre, mais c’est mieux que rien),
– le site est sous #SPIP dis-donc !
– il y a les ligatures dans les features « init », « medi » et « fina », ce qui me laisse penser qu’on peut facilement les transformer en webfonts. (Je fais l’essai et je te dis ça rapidement.)

#typographie

http://www.metaflop.com/modulator

metaflop is a web based platform for experimental fonts and type related projects using metafont. metafont is a programming language for creating entire families of fonts from a set of dimensional parameters and outline descriptions.

with the modulator it is possible to render custom and flexible metafonts without dealing with the programming language and coding by yourself. this enables you to focus on the design part – adjusting parameters of a typeface to your own taste. all the repetitive tasks are automated in the background.
the unique result can be downloaded as a webfont package for embedding on your homepage or an opentype postscript font (.otf) which can be used on any system in any application supporting .otf.

metaflop is open source - you can find us on github, both for the source code of the platform and for all the fonts.

via @julienbidoret

#typographie #font #design #metafont

Toi aussi, procrastine avec l’alphabet glagolitique

http://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Glagolica.png/300px-Glagolica.png
Alphabet glagolitique et ses équivalents en cyrillique (version bulgare). (via wikipedia)
http://fr.wikipedia.org/wiki/Alphabet_glagolitique

Existe même en unicode http://www.unicode.org/charts/PDF/U2C00.pdf

Résurrection de l’alphabet glagolitique http://fr.etapes.com/resurrection-de-lalphabet-glagolitique
Neoglagolitic Alpha - Because each sound deserves a face
http://www.behance.net/alphadesigner/Frame/625789
La police glago en .otf
http://alphadesigner.com/fonts/neoglagolitic-alpha.otf
http://behance.vo.llnwd.net/profiles4/115542/projects/625789/7f022bc2b0fc9a222c867ea79d4b1b86.jpg

Selon Cubberley (1996 : 346 sq.), le glagolitique aurait été créé sur la base de l’écriture grecque cursive avant le milieu du IXe siècle et formalisé ensuite par Constantin. Le cyrillique aurait été créé en Bulgarie par ses disciples sur le modèle de l’onciale grecque, « plus digne » pour l’écriture de textes liturgiques. – Pour Schaeken & Hendrik (1999 : 75), par contre, le glagolitique serait l’œuvre du seul Constantin. – Par ailleurs, note Cubberley, on a trouvé des manuscrits en glagolitique surchargés avec des inscriptions en cyrillique, et jamais l’inverse. Mais aucun de ces deux faits ne peut être considéré comme une preuve définitive de l’antériorité du glagolitique.

http://j.poitou.free.fr/pro/html/scr/cyrl.html

Un sujet un peu chargé en Bulgarie (à propos d’une expo artistique sur les runes glagolitiques)

« L’objectif de l’exposition est de provoquer dans la mesure du possible l’intérêt pour l’histoire bulgare, de provoquer de la fierté de notre appartenance nationale, explique Pavlin Pétrov. Le Bulgare a besoin qu’on lui remonte le moral et je crois que par le biais d’expositions de ce genre, grâce à la découverte de l’histoire bulgare nous nous sentirons plus fiers et plus dignes de prendre la place qui nous revient au sein de la famille européenne ».

http://bnr.bg/sites/fr/Lifestyle/HistoryAndReligion/Pages/201211_glagolitique.aspx

Et en musique (à l’origine de ces 3/4 d’heures de dérive glagolitique) :

Janáček écrit cette messe avec une liturgie dite en slavon glagolitique, du slave ancien datant du temps de l’évangélisation des Balkans par St Cyrille — langue dont découlera ensuite l’alphabet cyrillique. C’est forcément un peu tapé du bulbe rachidien, mais dans la cathédrale, ce solo d’orgue c’est fantastique : les basses sont énormes, le son envahit l’espace dans les fumées d’encens.

http://www.yoboom.org/Leos-Janacek-Messe-glagolitique

Et un site pour encore des heures de découverte alphabétique (chic)
Le site de tous les alphabets http://pedroiy.free.fr/alphabets/index.php

LA GLAGOLITSA : the last glagolitic mass in Croatia (avec l’album en téléchargement en creative commons)
http://vimeo.com/45783509

#typographie #alphabet #nationalisme #musique #unicode #otf #procrastination #film #creative_commons

Fontly
http://font.ly

Use Fontly to capture, map, and explore the world of vintage typography around us.

How it works:
– Download the Fontly iPhone app.
– Take a picture of found lettering.
– Title and tag the picture using the available categories.
– Your picture will be automatically geo-tagged and added to Fontly’s feed, map, and website.
– Share on Twitter, and beyond.

Y’a aussi une appli #android.

#typographie

Oxford comma
http://en.wikipedia.org/wiki/Serial_comma

The serial comma (also known as the Oxford comma or Harvard comma) is the comma used immediately before a coordinating conjunction (usually and or or, and sometimes nor) preceding the final item in a list of three or more items. For example, a list of three countries can be punctuated as either “Portugal, Spain, and France” (with the serial comma) or as “Portugal, Spain and France” (without the serial comma).

Opinions vary among writers and editors on the usage or avoidance of the serial comma. In American English, the serial comma is standard usage in non-journalistic writing that follows the Chicago Manual of Style. Journalists, however, usually follow the AP Stylebook, which advises against it. It is used less often in British English, where it is standard usage to leave it out, with some notable exceptions such as the Oxford University Press, though its use is recommended in the British Fowler’s Modern English Usage.

#typographie_pas_de_chez_nous
#merci_arno

Il existe une draft pour la gestion d’une grille verticale dans une page Web : CSS Line Grid Module
http://dev.w3.org/csswg/css-line-grid

This specification provides features to align lines and blocks to invisible grids in the document.

Aligning lines and blocks to grids provides the following benefits:

Vertical rhythm is kept for better readability.
Lines are aligned between columns in multi-column documents.
The top and the bottom margins of pictures are made equal, while keeping the vertical rhythm of text before and after the pictures.
Layout lines are at the same position on every page in paged media. Keeping the position of the bottom line of a page has benefits for design and readability. This also improves the readability of duplex printing, two pages spreads, and displaying on slow display devices like e-ink.
East Asian layouts require vertical rhythm more often than other scripts do, even in single column, non-paged media documents, as defined in [JLREQ].

Il semble que ce soit déjà implémenté dans le webkit. Pas testé, mais c’est à étudier si on veut des maquettes aussi précises que sur papier. #CSS #typographie

Attention : sur Seenthis, modification subtile dans les blocs de citation. (Super-subtile.) Sous certains navigateurs (MSIE et ceux basés sur Webkit), il y a un contrôle plus fin du moteur de composition grâce à des #CSS3 dernier cri. Et les règles de césure deviennent moins restrictives quand on passe en très petite justification (hein que c’est subtile…).

blockquote {
text-align : justify ;
-spip-text-justify:newspaper ;
-spip-hyphens : auto ;
-spip-hyphenate-limit-before : 3 ;
-spip-hyphenate-limit-after : 3 ;
-spip-hyphenate-limit-lines : 2 ;
-spip-hyphenate-limit-chars : 6 3 3 ;

@media all and (max-width : 400px) {
-spip-hyphenate-limit-before : 2 ;
-spip-hyphenate-limit-after : 2 ;
-spip-hyphenate-limit-lines : 3 ;
-spip-hyphenate-limit-chars : 5 2 2 ;
}
}

C’est fait avec mon plugin « CSS imbriqués », alors faut pas que la syntaxe te heurte. #CSS #typographie #plugin #SPIP et tout ça.

Belle collection de suissitude typographique : les couvertures du Typographische Monatsblätter (TM-RSI) depuis 1960 :
http://www.tm-research-archive.ch

Et même depuis les années 30 :
http://www.tm-research-archive.ch/older-issues
(signalé par Julien du #DSAA_CT).

Sinon, tu peux continuer à suivre de nos jours :
http://www.tm-rsi-stm.com

Sur Flickr, une collection de couvertures :
http://www.flickr.com/photos/59825996@N00/sets/72157609608087650

#typographie