davidbgk
/
larlet-fr-david-cache

<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang=fr>
<!-- Has to be within the first 1024 bytes, hence before the <title>
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset=utf-8>
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
<!-- Required to make a valid HTML5 document. -->
<title>The billionaire’s typewriter (archive) — David Larlet</title>
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/static/david/icons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="David Larlet">
<meta name="application-name" content="David Larlet">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- That good ol' feed, subscribe :p. -->
<link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="http://practicaltypography.com/billionaires-typewriter.html">

<style>
/* http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, img, ins,
small, strike, strong, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* http://practicaltypography.com/equity.html */
/* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
/* https://www.filamentgroup.com/lab/js-web-fonts.html */
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ConcourseT3';
  src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
       url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


/* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
body {
  /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  font-family: "EquityTextB", Palatino, serif;
  background-color: #f0f0ea;
  color: #07486c;
  font-kerning: normal;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "kern", "liga", "clig", "calt";
}
pre, code, kbd, samp, var, tt {
  font-family: 'TriplicateT4c', monospace;
}
em {
  font-style: italic;
  color: #323a45;
}
strong {
  font-weight: bold;
  color: black;
}
nav {
  background-color: #323a45;
  color: #f0f0ea;
  display: flex;
  justify-content: space-around;
  padding: 1rem .5rem;
}
  nav:last-child {
    border-bottom: 1vh solid #2d7474;
  }
  nav a {
    color: #f0f0ea;
  }
  nav abbr {
    border-bottom: 1px dotted white;
  }

h1 {
  border-top: 1vh solid #2d7474;
  border-bottom: .2vh dotted #2d7474;
  background-color: #e3e1e1;
  color: #323a45;
  text-align: center;
  padding: 5rem 0 4rem 0;
  width: 100%;
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
}
  h1.single {
    padding-bottom: 10rem;
  }
  h1 span {
    position: absolute;
    top: 1vh;
    left: 20%;
    line-height: 0;
  }
    h1 span a {
      line-height: 1.7;
      padding: 1rem 1.2rem .6rem 1.2rem;
      border-radius: 0 0 6% 6%;
      background: #2d7474;
      font-size: 1.3rem;
      color: white;
      text-decoration: none;
    }
h2 {
  margin: 4rem 0 1rem;
  border-top: .2vh solid #2d7474;
  padding-top: 1vh;
}
h3 {
  text-align: center;
  margin: 3rem 0 .75em;
}
hr {
  height: .4rem;
  width: .4rem;
  border-radius: .4rem;
  background: #07486c;
  margin: 2.5rem auto;
}
time {
  display: bloc;
  margin-left: 0 !important;
}
ul, ol {
  margin: 2rem;
}
ul {
  list-style-type: square;
}
a {
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.09em;
}
article {
  max-width: 50rem;
  display: flex;
  flex-direction: column;
  margin: 2rem auto;
}
  article.single {
    border-top: .2vh dotted #2d7474;
    margin: -6rem auto 1rem auto;
    background: #f0f0ea;
    padding: 2rem;
  }
  article p:last-child {
    margin-bottom: 1rem;
  }
p {
  padding: 0 .5rem;
  margin-left: 3rem;
}
  p + p,
  figure + p {
    margin-top: 2rem;
  }

blockquote {
  background-color: #e3e1e1;
  border-left: .5vw solid #2d7474;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  margin: 1.5rem;
}
  blockquote cite {
    font-style: italic;
  }
  blockquote p {
    margin-left: 0;
  }

figure {
  border-top: .2vh solid #2d7474;
  background-color: #e3e1e1;
  text-align: center;
  padding: 1.5rem 0;
  margin: 1rem 0 0;
  font-size: 1.5rem;
  width: 100%;
}
  figure img {
    max-width: 250px;
    max-height: 250px;
    border: .5vw solid #323a45;
    padding: 1px;
  }
figcaption {
  padding: 1rem;
  line-height: 1.4;
}
aside {
  display: flex;
  flex-direction: column;
  background-color: #e3e1e1;
  padding: 1rem 0;
  border-bottom: .2vh solid #07486c;
}
  aside p {
    max-width: 50rem;
    margin: 0 auto;
  }

/* https://fvsch.com/code/css-locks/ */
p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  font-size: 1rem;
  line-height: calc( 1.5em + 0.2 * 1rem );
}
h1 {
  font-size: 1.9rem;
  line-height: calc( 1.2em + 0.2 * 1rem );
}
h2 {
  font-size: 1.6rem;
  line-height: calc( 1.3em + 0.2 * 1rem );
}
h3 {
  font-size: 1.35rem;
  line-height: calc( 1.4em + 0.2 * 1rem );
}
@media (min-width: 20em) {
  /* The (100vw - 20rem) / (50 - 20) part
     resolves to 0-1rem, depending on the
     viewport width (between 20em and 50em). */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
    margin-left: 0;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
}
@media (min-width: 50em) {
  /* The right part of the addition *must* be a
     rem value. In this example we *could* change
     the whole declaration to font-size:2.5rem,
     but if our baseline value was not expressed
     in rem we would have to use calc. */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * 1rem );
    line-height: 1.5em;
  }
  p, li, pre, details {
    margin-left: 3rem;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * 1rem );
    line-height: 1.2em;
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * 1rem );
    line-height: 1.3em;
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * 1rem );
    line-height: 1.4em;
  }
  figure img {
    max-width: 500px;
    max-height: 500px;
  }
}

figure.unsquared {
  margin-bottom: 1.5rem;
}
  figure.unsquared img {
    height: inherit;
  }


@media print {
  body { font-size: 100%; }
  a:after { content: " (" attr(href) ")"; }
  a, a:link, a:visited, a:after {
    text-decoration: underline;
    text-shadow: none !important;
    background-image: none !important;
    background: white;
    color: black;
  }
  abbr[title] { border-bottom: 0; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  img { page-break-inside: avoid; }
  @page { margin: 2cm .5cm; }
  h1, h2, h3 { page-break-after: avoid; }
  p3 { orphans: 3; widows: 3; }
  img {
    max-width: 250px !important;
    max-height: 250px !important;
  }
  nav, aside { display: none; }
}

ul.with_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_columns {
    column-count: 2;
  }
}
@media (min-width: 50em) {
  ul.with_columns {
    column-count: 3;
  }
}
ul.with_two_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_two_columns {
    column-count: 1;
  }
}
@media (min-width: 50em) {
  ul.with_two_columns {
    column-count: 2;
  }
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
  .gallery figure img {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .gallery figure figcaption {
    font-family: 'ConcourseT3'
  }

footer {
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
  border-top: 3px solid white;
  padding: 4rem 0;
  background-color: #07486c;
  color: white;
}
  footer > * {
    max-width: 50rem;
    margin: 0 auto;
  }
  footer a {
    color: #f1c40f;
  }
  footer .avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
    margin-right: 2rem;
    padding: 2px 5px 5px 2px;
    background: white;
    border-left: 1px solid #f1c40f;
    border-top: 1px solid #f1c40f;
    border-right: 5px solid #f1c40f;
    border-bottom: 5px solid #f1c40f;
  }
</style>

<h1>
  <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  The billionaire’s typewriter (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="http://practicaltypography.com/billionaires-typewriter.html">Source originale du contenu</a></h3>
    <div id="doc"><p>A friend pointed me to a story on Medium called <a href="https://medium.com/designing-medium/death-to-typewriters-9b7712847639">“Death to Type­writ­ers,”</a> by Medium de­signer <a href="https://medium.com/@mwichary">Marcin Wichary.</a> The story is about the in­flu­ence of the type­writer on dig­i­tal type­set­ting. It ref­er­ences my “ex­cel­lent list” of <a href="typewriter-habits.html" class="xref">type­writer habits</a>.</p><p>Thank you for the com­pli­ment, Mr. Wichary. I can’t quib­ble with the de­tails of your piece. It’s true that Medium and I are op­posed to cer­tain ty­po­graphic short­cuts im­ported from the <span class="no-hyphens">typewriter.</span></p><p>But by the end, I re­al­ized I dis­agree deeply with Medium about the ethics of de­sign. And by ethics, I mean some­thing sim­ple: though Medium and I are both mak­ing tools for writ­ers, what I want for writ­ers and what Medium wants couldn’t be more dif­fer­ent. Medium may be avoid­ing what made the type­writer bad, but it’s also avoid­ing what made it good. Writ­ers who are tempted to use Medium—or sim­i­lar pub­lish­ing tools—should be con­scious of these <span class="no-hyphens">tradeoffs.</span></p><p>So, a few words about <span class="no-hyphens">that.</span></p><div style="height:1em"></div><p>For those who don’t in­ces­santly fol­low In­ter­net star­tups, <a href="http://medium.com">Medium</a> is a blog­ging ser­vice run by one of the founders of Twit­ter, multi­bil­lion­aire <a href="https://medium.com/@ev">Evan Williams.</a> Though it owes much to blog­ging ser­vices of the past (in­clud­ing <a href="http://en.wikipedia.org/wiki/Blogger_%28service%29">Blog­ger,</a> also founded by Mr. Williams), Medium is ori­ented to­ward longer, less di­aris­tic <span class="no-hyphens">stories.</span></p><p>Medium also dif­fers from ear­lier blog­ging ser­vices in a sig­nif­i­cant, con­trar­ian way: it of­fers you, the writer, nearly zero op­tions for the pre­sen­ta­tion of your sto­ries. No mat­ter what kind of story you write, or who your read­ers are, it gets pack­aged into a sin­gle, non-ne­go­tiable <span class="no-hyphens">template.</span></p><p>Medium isn’t the only blog­ging ser­vice rid­ing this wave, though so far it seems to have the biggest surf­board. Oth­ers in­clude <a href="http://svbtle.com">Svb­tle,</a> <a href="http://postagon.com">Posta­gon,</a> and <a href="http://silvrback.com">Sil­vr­back.</a> They all pro­mote a sim­i­larly con­strained ap­proach to de­sign, which is some­times called <a href="https://www.postagon.com">min­i­mal­ist.</a></p><div class="subhead">Minimalist vs. homogeneous design</div><p>As a fan of min­i­mal­ism, how­ever, I think that term is mis­ap­plied here. Min­i­mal­ism doesn’t fore­close ei­ther ex­pres­sive breadth or con­cep­tual depth. On the con­trary, the min­i­mal­ist pro­gram—as it ini­tially emerged in fine art of the 20th cen­tury—has been about di­vert­ing the viewer’s at­ten­tion from overt signs of au­thor­ship to the deeper pu­rity of the <span class="no-hyphens">ingredients.</span></p><aside>Ad Rein­hardt with some of his amaz­ing <a href="http://www.guggenheim.org/new-york/collections/collection-online/artwork/3698">black paint­ings.</a> (Spoiler alert: they’re not en­tirely <span class="no-hyphens">monochromatic.)</span></aside><p><img src="http://practicaltypography.com/images/reinhardt.jpeg" /></p><aside>Bryan Gar­ner notes that <em>ho­mo­ge­neous</em> is fre­quently mis­spelled <em>ho­moge­nous</em>, and has five syl­la­bles that are fre­quently mis­pro­nounced as four. (<a href="http://www.amazon.com/Garners-Modern-American-Usage-Garner/dp/0195382757">GMAU 3rd ed.</a> at <span class="no-hyphens">425.)</span></aside><p>If that’s the case, we can’t say that Medium et al. are of­fer­ing min­i­mal­ist de­sign. Only the ve­neer is min­i­mal­ist. What they’re re­ally of­fer­ing is a shift from de­sign as a choice to de­sign as a con­stant. In­stead of min­i­mal­ist de­sign, a bet­ter term might be <em>ho­mo­ge­neous</em> <span class="no-hyphens">design.</span></p><p>On the one hand, Medium’s ho­mo­ge­neous de­sign works and reads well. Mem­bers of Medium’s de­sign team have <a href="https://medium.com/designing-medium">cat­a­logued the many ty­po­graphic de­tails</a> they’ve im­ple­mented. Good for them. If they <a href="https://medium.com/@verbagetruck/dustin-senos-typesets-the-future-86fd91e9b6ee">some­times act</a> as if they dis­cov­ered ty­pog­ra­phy like it was the Higgs bo­son, we can for­give their ex­cess of en­thu­si­asm. Bring­ing these de­tails to a wider au­di­ence, and rais­ing stan­dards for ty­pog­ra­phy on the web gen­er­ally, is a wor­thy <span class="no-hyphens">project.</span></p><p>On the other hand, a nec­es­sary side ef­fect of Medium’s ho­mo­ge­neous de­sign is that every story looks the same. If you agree that the role of ty­pog­ra­phy is to en­hance the text for the ben­e­fit of the reader (as I con­tend in <a href="who-is-typography-for.html" class="xref">who is ty­pog­ra­phy for?</a>), then it stands to rea­son that dif­fer­ent texts de­mand dis­tinct ty­pog­ra­phy. As I say in <a href="what-is-good-typography.html" class="xref">What is Good Ty­pog­ra­phy?</a>, one size never fits all. Ty­pog­ra­phy wants to be <span class="no-hyphens">heterogeneous.</span></p><div class="subhead">Delicious but not nutritious</div><p>Still, I wouldn’t say that Medium’s ho­mo­ge­neous de­sign is bad <em>ex ante</em>. Among web-pub­lish­ing tools, I see Medium as the equiv­a­lent of a frozen pizza: not as whole­some as a meal you could make your­self, but for those with­out the time or mo­ti­va­tion to cook, a po­ten­tially bet­ter op­tion than just eat­ing peanut but­ter straight from the <span class="no-hyphens">jar.</span></p><aside><dquo>“You don’t need to see our for­mat­ting </dquo><span class="no-hyphens">options.”</span></aside><p><img src="http://practicaltypography.com/images/obi-wan.jpg" /></p><p>The prob­lem, how­ever, is that Medium holds out its ho­mo­ge­neous de­sign as more than a frozen pizza. It has be­come, by the Jedi mind trick­ery fa­vored by to­day’s tech com­pa­nies, a Bel­la­gio buf­fet of de­li­cious <span class="no-hyphens">nonsense:</span></p><ol><li><p>Evan Williams <a href="https://medium.com/about/what-were-trying-to-do-with-medium-e2f5bfcf0434">frames Medium</a> as a “place for ideas” with an “ethos” of “open­ness and democ­racy—like the In­ter­net it­self.” Fine, but ide­al­is­tic plat­i­tudes ex­plain noth­ing. How, specif­i­cally, does Medium im­prove the <span class="no-hyphens">Internet?</span></p></li><li><p>Mr. Williams <a href="https://medium.com/about/writing-in-medium-df8eac9f4a5e">claims</a> that Medium is “the best writ­ing tool on the web.” Okay, that’s at least con­crete. But we’ve got a lot of good web-based writ­ing tools al­ready. Medium does more than <span class="no-hyphens">those?</span></p></li><li><p>Ac­tu­ally, no—Mr. Williams <a href="https://medium.com/about/writing-in-medium-df8eac9f4a5e">con­cedes</a> that Medium has “stripped out a lot of the power that other ed­i­tors give you.” So how is it pos­si­ble to be “the best” while of­fer­ing <span class="no-hyphens">less?</span></p></li><li><p>Here, Mr. Williams <a href="https://medium.com/about/writing-in-medium-df8eac9f4a5e">par­ries</a>—he claims that think­ing about the pre­sen­ta­tion of your work is “a ter­ri­ble dis­trac­tion and a waste of time.” <span class="no-hyphens">Why?</span></p></li><li><p>Ap­par­ently <a href="https://medium.com/about/writing-in-medium-df8eac9f4a5e">be­cause he’s</a> “one of those peo­ple who will open up Word and spend half [his] time defin­ing styles and ad­just­ing the spac­ing be­tween para­graphs.” Hmm, not every­one has that prob­lem with <span class="no-hyphens">Word.</span></p></li><li><p>Now comes the hand-wav­ing, as Mr. Williams as­sures us that Medium’s ho­mo­ge­neous de­sign isn’t a lim­i­ta­tion—it’s <a href="https://medium.com/about/writing-in-medium-df8eac9f4a5e">in fact es­sen­tial</a> to let your “bril­liance and cre­ativ­ity flow smoothly onto the <span class="no-hyphens">screen.”</span></p></li><li><p>More­over, any­one who dis­agrees <a href="https://medium.com/about/writing-in-medium-df8eac9f4a5e">is a Lud­dite</a>—be­cause “every­thing [other than Medium] feels like step­ping back in <span class="no-hyphens">time.”</span></p></li></ol><p>Like all non­sense, it’s in­tended to be easy to swal­low. But Mr. Williams’s ar­gu­ment is flawed in at least three <span class="no-hyphens">ways:</span></p><ol><li><p><strong>It makes no sense in the con­text of to­day’s web</strong>. If Medium had launched 10 years ago, it would’ve been as­ton­ish­ing. But it didn’t. To­day, the costs of web pub­lish­ing—in­clud­ing de­sign—have de­clined to al­most zero. Rel­a­tive to to­day’s web, Medium is not cre­at­ing new pos­si­bil­i­ties, but in­stead clos­ing them off. To pre­vail, Medium needs to per­suade you that you don’t care about the broader ex­pres­sive pos­si­bil­i­ties of web <span class="no-hyphens">publishing.</span></p></li><li><p><strong>It sets up a false di­chotomy about writ­ing tools</strong>. Mr. Williams de­picts the writer’s choice as Medium vs. com­pli­cated tools like Word. Not ac­cu­rate. First, dif­fer­ent tools ex­ist for dif­fer­ent needs. It would be silly to use Word to make a web page, but equally silly to use Medium to pre­pare a print-on-de­mand pa­per­back. Sec­ond, any­one who’s used cur­rent blog­ging tools ap­pre­ci­ates that web pub­lish­ing has be­come heav­ily au­to­mated. Much of the for­mat­ting can be han­dled au­to­mat­i­cally (e.g., via <a href="https://wordpress.org/themes/">Word­Press themes</a>) or man­u­ally, as you <span class="no-hyphens">prefer.</span></p></li><li><p><strong>You’re giv­ing up far more than de­sign choice</strong>. Mr. Williams <a href="https://medium.com/about/writing-in-medium-df8eac9f4a5e">de­scribes</a> Medium’s key ben­e­fit as res­cu­ing writ­ers from the “ter­ri­ble dis­trac­tion” of for­mat­ting chores. But con­sider the cost. Though he’s bait­ing the hook with de­sign, he’s also ask­ing you, the writer, to let him con­trol how you of­fer your work to read­ers. Mean­ing, to get the full ben­e­fit of Medium’s de­sign, you have to let your story live on Medium, send all your read­ers to Medium, have your work per­ma­nently en­tan­gled with other sto­ries on Medium, and so on—a sig­nif­i­cant <span class="no-hyphens">concession.</span></p></li></ol><p>As for that en­tan­gle­ment among sto­ries, Mr. Williams <a href="https://medium.com/@ev/sarah-lacys-latest-medium-me-critique-makes-no-sense-1917c67405ca">has con­ceded</a> that it’s “con­fus­ing.” But this am­bi­gu­ity isn’t a bug. It’s an es­sen­tial fea­ture of the busi­ness plan. The goal is to cre­ate the il­lu­sion that every­thing on Medium be­longs to one ed­i­to­r­ial ecosys­tem, as if it were the New York <em>Times</em>.</p><aside>No word yet on how Medium’s <a href="https://medium.com/policy/medium-privacy-policy-f03bf92035c9">sur­veil­lance poli­cies</a> square with all that open­ness and <span class="no-hyphens">democracy.</span></aside><p>But un­like the <em>Times</em>, Medium pays for <a href="https://medium.com/@ev/what-is-now-the-matter-at-medium-105a334f2ea">only a small frac­tion</a> of its sto­ries. The rest are sub­mit­ted—for free—by writ­ers like you. Af­ter a long time <a href="http://www.theatlantic.com/technology/archive/2013/08/what-is-medium/278965/">be­ing elu­sive</a> about its busi­ness model, Medium re­vealed that it plans to make money by—sur­prise!—<a href="http://adage.com/article/digital/bmw-runs-ads-medium-twitter-founders-platform/294321/">sell­ing ad­ver­tis­ing.</a> This means dis­play­ing ads, but also col­lect­ing and sell­ing data about read­ers and writ­ers. So Medium will ex­tract rev­enue from every story, whether it paid for that story or not. (By the way, will that rev­enue be shared with writ­ers? <a href="https://medium.com/inside/there-will-be-money-d80f7d0178a9">Um, no.</a>)</p><p>And com­ing full cir­cle—what’s the in­dis­pens­able tool for cre­at­ing this il­lu­sion of an ed­i­to­r­ial ecosys­tem? The ho­mo­ge­neous de­sign. The but­ter­fly bal­lot of 2000 (de­picted in <a href="why-typography-matters.html" class="xref">Why ty­pog­ra­phy mat­ters</a>) proved that er­rors of ty­pog­ra­phy can have his­toric con­se­quences. Medium proves that ty­pog­ra­phy can be used as a tool of eco­nomic lever­age and <span class="no-hyphens">control.</span></p><p>In truth, Medium’s main prod­uct is not a pub­lish­ing plat­form, but the pro­mo­tion of a pub­lish­ing plat­form. This pro­mo­tion brings read­ers and writ­ers onto the site. This, in turn, gen­er­ates the us­age data that’s valu­able to ad­ver­tis­ers. Boiled down, Medium is sim­ply mar­ket­ing in the ser­vice of more mar­ket­ing. It is not a “place for ideas.” It is a place for ad­ver­tis­ers. It is, there­fore, ut­terly <span class="no-hyphens">superfluous.</span></p><p><dquo>“But what about all the writ­ing on Medium?” The mea­sure of su­per­fluity is not the writ­ing on Medium. Rather, it’s what Medium </dquo><em>adds</em> to the writ­ing. Re­call the ques­tion from above: how does Medium im­prove the In­ter­net? I haven’t seen a sin­gle story on Medium that couldn’t ex­ist equally well else­where. Nor ev­i­dence that Medium’s edit­ing and pub­lish­ing tools are a man­i­fest im­prove­ment over what you can do with other <span class="no-hyphens">tools.</span></p><p>In sum—still <span class="no-hyphens">superfluous.</span></p><div class="subhead">What we can learn from typewriters</div><aside><img src="http://practicaltypography.com/images/olivetti.jpeg" /> Olivetti was fa­mous for its <a href="https://www.flickr.com/photos/19855494@N00/sets/72157603713300507/">graphic and ad­ver­tis­ing de­sign</a> as well as its <span class="no-hyphens">typewriters.</span></aside><p>Let’s re­mem­ber two points that get lost among the torches and pitch­forks car­ried by <a href="https://medium.com/designing-medium/death-to-typewriters-9b7712847639">“Death to <span class="no-hyphens">Typewriters.”</span></a></p><p>First, al­though the type­writer did im­pose ho­mo­ge­neous (and ugly) ty­pog­ra­phy, it had ex­cel­lent ethics. The type­writer made it pos­si­ble to write more quickly, leg­i­bly, and ac­cu­rately than ever be­fore, with low cost and high porta­bil­ity. In short, it of­fered free­dom. For that, ho­mo­ge­neous de­sign was a small price to <span class="no-hyphens">pay.</span></p><p>Sec­ond, though type­writer ty­pog­ra­phy was ter­ri­ble, it wasn’t a choice made by type­writer man­u­fac­tur­ers out of lazi­ness or ig­no­rance. These com­pro­mises were ne­ces­si­tated by the me­chan­i­cal lim­i­ta­tions of the type­writer. Type­writ­ers were never ideal, but as cer­tain lim­i­ta­tions were over­come, they got <span class="no-hyphens">better.</span></p><aside>IBM in­vented the “type ball” tech­nol­ogy that made it pos­si­ble to use dif­fer­ent fonts in a type­writer. I stud­ied this one as part of my re­search for <a href="triplicate.html" class="xref">Trip­li­cate</a>.</aside><p><img src="http://practicaltypography.com/images/selectric-ball.jpeg" /></p><p>With to­day’s net­worked com­put­ers, we’re get­ting closer to the ideal. We en­joy the ben­e­fits of the type­writer with­out any of its lim­i­ta­tions. We get more ef­fi­ciency, speed, stor­age, de­sign op­tions, and free­dom. The com­puter is the most re­mark­able de­vice in the 500-year his­tory of print­ing (which al­ready in­cludes a lot of re­mark­able <span class="no-hyphens">devices).</span></p><p>This leads back to why those <a href="typewriter-habits.html" class="xref">type­writer habits</a> are so aw­ful in the dig­i­tal age. Com­put­ers have none of the me­chan­i­cal lim­i­ta­tions of type­writ­ers. So the ty­po­graphic short­cuts that were a nec­es­sary evil with type­writ­ers are like­wise ob­so­lete. Why per­pet­u­ate <span class="no-hyphens">them?</span></p><aside>For more on this, see <a href="http://typo.la/rtde">“Re­vers­ing the Tide of De­clin­ing <span class="no-hyphens">Expectations.”</span></a></aside><p>I rely on a broader ver­sion of this prin­ci­ple in my own work. Tech­nol­ogy keeps im­prov­ing, thereby ex­pand­ing pos­si­bil­i­ties for us. So we have a choice. We can ei­ther ig­nore those pos­si­bil­i­ties, and merely ac­cept what tech­nol­ogy of­fers, which will ul­ti­mately make us lazy. Or we can ex­plore those new pos­si­bil­i­ties. But to do that, we need to ex­pect more of <span class="no-hyphens">ourselves.</span></p><p>We also need bet­ter tools. I’d char­ac­ter­ize most of my work as tool­smithing—whether the project is <a href="http://concoursefont.com">de­sign­ing a font,</a> <a href="http://practicaltypography.com">writ­ing a book,</a> or <a href="http://pollenpub.com">cre­at­ing pub­lish­ing soft­ware.</a> I don’t con­trol how oth­ers use these tools. I don’t want to, ei­ther. For me, it’s far more in­ter­est­ing to share these tools and then be sur­prised by how oth­ers use <span class="no-hyphens">them.</span></p><p>To that end, I de­lib­er­ately avoid cre­at­ing tools that do too much. Some as­sem­bly is al­ways re­quired. For in­stance, I’ll tell you the qual­i­ties of good <a href="websites.html" class="xref">web­site</a> ty­pog­ra­phy, but I’m not go­ing to sell you a tem­plate. I want the cus­tomers for my tools to be re­spon­si­ble for some of the heavy lift­ing. That way, they dis­cover that what they get out of the tool has a con­nec­tion to what they put <span class="no-hyphens">in.</span></p><p>So even though I op­pose the <a href="typewriter-habits.html" class="xref">type­writer habits</a>, I still ap­pre­ci­ate that core ethic of the type­writer—re­mov­ing lim­i­ta­tions when you can, do­ing your best with them when you can’t. That’s a great idea. Yes, let’s ex­plore all the pos­si­bil­i­ties of the tech­nol­ogy avail­able to us. Let’s hack the hell out of every­thing and see what hap­pens. In the type­writer era, the tech­no­log­i­cal lim­i­ta­tions were mostly hard­ware. To­day, mostly soft­ware. But if we treat these lim­i­ta­tions as some­thing to obey—not over­come—we’ll just be­come in­den­tured to who­ever con­trols that <span class="no-hyphens">technology.</span></p><div class="subhead">What we can learn from Medium</div><p>In <a href="https://medium.com/designing-medium/death-to-typewriters-9b7712847639">“Death to Type­writ­ers,”</a> Medium in­sists that the type­writer is its “sworn en­emy.” In cer­tain ty­po­graphic de­tails, maybe so. But as a de­vice that im­poses ho­mo­ge­neous de­sign, Medium still has a lot in com­mon with the <span class="no-hyphens">typewriter.</span></p><p>In fact, its ethics are ac­tu­ally <em>worse</em> than the tra­di­tional type­writer. Why? Be­cause Medium’s ho­mo­ge­neous de­sign has noth­ing to do with lim­i­ta­tions of the un­der­ly­ing tech­nol­ogy (in this case, the web). As dis­cussed above, it’s a de­lib­er­ate choice that lets Medium ex­tract value from the tal­ent and la­bor of <span class="no-hyphens">others.</span></p><p>Medium is a new kind of type­writer—the bil­lion­aire’s type­writer. It’s not the only bil­lion­aire’s type­writer. So is the Kin­dle. So is iBooks. So is Twit­ter. What dis­tin­guishes these new type­writ­ers is not the pos­si­bil­i­ties they make avail­able to writ­ers, but what they take <span class="no-hyphens">away.</span></p><p><strong>Whereas the tra­di­tional type­writer of­fered free­dom at the cost of de­sign, the bil­lion­aire’s type­writer of­fers con­ve­nience at the cost of <span class="no-hyphens">freedom.</span></strong></p><p>As a writer and tool­smith, I’ve found the rush to em­brace these sys­tems per­plex­ing. Not be­cause I’m cur­mud­geonly. Not be­cause I fail to un­der­stand that peo­ple, in­clud­ing writ­ers, en­joy things that are free and <span class="no-hyphens">convenient.</span></p><p>Rather, be­cause gen­tle scrutiny re­veals that these sys­tems are pow­ered by a form of hu­man frack­ing. To get his frack­ing per­mit on your ter­ri­tory, Mr. Williams (the multi­bil­lion­aire) needs to per­suade you (the writer) that a key con­sid­er­a­tion in your work (namely, how &amp; where you of­fer it to read­ers) is a “waste of <span class="no-hyphens">time.”</span></p><p>If you re­ally be­lieve that, then by all means, keep us­ing the bil­lion­aire’s <span class="no-hyphens">typewriter.</span></p><div style="height:1em"></div><p>But if you have doubts, here’s a <span class="no-hyphens">counterproposal.</span></p><p>As a writer, the biggest po­ten­tial waste of your time is not ty­pog­ra­phy chores, but Medium it­self. Be­cause in re­turn for that snazzy de­sign, Medium needs you to re­lin­quish con­trol of how your work gets to <span class="no-hyphens">readers.</span></p><p>Tempt­ing per­haps. But where does it lead? I fear that writ­ers who limit them­selves to pro­vid­ing “con­tent” for some­one else’s “branded plat­form” are go­ing to end up with as much lever­age as cows on a dairy farm. (A prob­lem at the core of the re­cent <a href="http://www.vanityfair.com/news/business/2014/12/amazon-hachette-ebook-publishing">Ha­chette–Ama­zon dis­pute.</a>)</p><p>If you want to be part of some­thing open and de­mo­c­ra­tic, use open-source soft­ware. If you want to have your writ­ing look great, learn some­thing about ty­pog­ra­phy (or hire a de­signer). If you need a plat­form for writ­ing, try <a href="http://pollenpub.com">Pollen</a> (the sys­tem I made for this site), or <a href="http://wordpress.org">Word­Press,</a> or a sub­scrip­tion ser­vice like <a href="http://svbtle.com">Svb­tle.</a> I pre­fer web pub­lish­ing de­spite <a href="economics-year-one.html">its short­com­ings,</a> but if you don’t, then make an e-book or PDF and dis­trib­ute it <span class="no-hyphens">yourself.</span></p><p>As writ­ers, we don’t need com­pa­nies like Medium to tell us how to use the web. Or de­fine open­ness and democ­racy. Or tell us what’s a “waste of [our] time” and what’s not. Or de­ter­mine how and where read­ers ex­pe­ri­ence our work. We need to de­cide those things for <span class="no-hyphens">ourselves.</span></p><p><sig>—Matthew But­t­er­ick<br />17 Feb <span class="no-hyphens">2015</span></sig></p><div class="btw"><div class="btw-title">by the way</div><ul><li><p>Though I’ve been pok­ing holes in its rhetoric, I don’t have an­tipa­thy to­ward Medium any more than I do <a href="http://typographyforlawyers.com/why-google-web-fonts-arent-really-open-source.html">Google Fonts.</a> I get it—it’s a com­pany set up to make money. It’s not a lit­er­ary foun­da­tion. I’m sure the peo­ple in­volved with it are tal­ented and sin­cere. And they cer­tainly don’t care what I <span class="no-hyphens">think.</span></p></li><li><p>A cou­ple read­ers have pointed out that Medium doesn’t re­quire ex­clu­siv­ity—you own your sto­ries, and you can pub­lish them else­where. Fair enough. But this doesn’t change the core ar­gu­ment. Medium is def­i­nitely <a href="https://medium.com/@Medium/medium-connects-the-people-stories-and-ideas-that-matter-to-you-495655fb8459">pitch­ing it­self to writ­ers</a> as an all-in­clu­sive plat­form (“Build your pub­li­ca­tion, blog, or writ­ing port­fo­lio”). As for those writ­ers who are us­ing it as a sec­ondary out­let, Medium is still ex­tract­ing rev­enue from their sto­ries that isn’t <span class="no-hyphens">shared.</span></p></li><li><p>I’m not the first to raise these is­sues. See also <a href="http://www.elezea.com/2013/08/medium-is-eating-all-the-content/">Rian van der Merwe</a> (“Medium seems to be more about Medium than about au­thors … The bar­rier to set­ting up your own site has never been lower”), <a href="http://www.marco.org/2013/08/05/be-your-own-platform">Marco Ar­ment</a> (“con­sider whether it’s wise to in­vest your time and writ­ing in some­one else’s plat­form for free”), and <a href="http://www.theatlantic.com/technology/archive/2013/08/what-is-medium/278965/">Alexis Madri­gal</a> (“me­dia pro­duc­ers … have to de­cide whether Medium is a friend or a <span class="no-hyphens">foe”).</span></p></li><li><p>Con­fi­den­tial to graphic de­sign­ers <a href="https://medium.com/vvvvvv-studio/albers-in-command-b3184edd7746">who are pub­lish­ing sto­ries</a> on Medium: if you wouldn’t set your <a href="business-cards.html" class="xref">busi­ness cards</a> in <a href="times-new-roman.html" class="xref">Times New Ro­man</a>, then why would you … ah, for­get <span class="no-hyphens">it.</span></p></li></ul></div></div>

<p><a id="links"></a><div style="height:1em"></div><ul class="children"></ul></p>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="http://practicaltypography.com/billionaires-typewriter.html">Source originale</a> |
    <a href="/david/stream/2019/">Accueil du flux</a>
  </p>
</nav>

<footer>
  <div>
    <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
    <p>
      Bonjour/Hi!
      Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>
      Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).
    </p>
    <p>
      Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.
    </p>
    
    <p>
      Voici quelques articles choisis :
      <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
      <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
      <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
      <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
      <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
      <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
      <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
      <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
      <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
      <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
      <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
      <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
      <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
      <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
      <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
      et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
    </p>
    <p>
      On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.
    </p>
    <p>
      Je ne traque pas ta navigation mais mon
      <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
      conserve des logs d’accès.
    </p>
  </div>
</footer>
<script type="text/javascript">
  ;(_ => {
    const jumper = document.getElementById('jumper')
    jumper.addEventListener('click', e => {
      e.preventDefault()
      const anchor = e.target.getAttribute('href')
      const targetEl = document.getElementById(anchor.substring(1))
      targetEl.scrollIntoView({behavior: 'smooth'})
    })
  })()
</script>