Type Set Match: Creating for the Brain in the Body

17 Responses

  1. Tim Brown Tim Brown

    This is the initial volley of a Type Set Match, a fun way to spend time on Dribbble and an easy way to practice typography. Plus, swell excerpts from Contents Magazine.


    Find simple instructions and more about Type Set Match here: http://nicewebtype.com/x/75


    See the live Typecast composition.

    Long headline, so I started with that. I wanted a condensed face, and Atrament, with its rounded features, felt perfect for a text about the human aspects of technology.

    I also wanted a tightly woven texture out of the heading; this much big type, spaced loosely, would be tough to manage. The white space congruity was a stroke of luck — compare the vertical volumes of counter height and line spacing to the similarly proportioned relationship between counter width and letterspacing.

    Myriad Pro was the only text face, of the ten or so I tried, that felt compatible with Atrament. Flipping among text faces in Typecast made it easy to find one by feel. Before doing that I tried picking a text face in isolation, bringing to bear various bits of advice I've heard about combining fonts; it didn't work.

    Another thing to mention here is how I've brought the paragraph up into a pocket created by the headline. Some elements of this composition make me wonder how I'd make it all work responsively — it would be a good challenge, and it would take more than an afternoon! But at least I would have this idea, here, in my catalog of assumptions.


    * https://typekit.com/fonts/myriad-pro/n4/wfs
    * http://modularscale.com/scale/?px1=20&px2=&ra1=1.667&ra2=0

    over 1 year ago

  2. Maxim Leyzerovich Maxim Leyzerovich

    Thank you for giving italics a chance.

    over 1 year ago

  3. "Substance" is my word for the day. This combo wears it well.
    ChunkFive / Aaux Next Semibold.

    over 1 year ago

  4. Another round of Type set match! :)

    This time, I used colors & typography I am playing with for my own site. Dark rich blue background, the super awesome Clarendon URW, in white slightly-off, topped with super-architectural (I know!) DIN in orange.

    Clarendon is such a great font.

    See live version on this long URL http://beta.typecastapp.com/adam-kiss/share/3710986001f356bffd9aee310a1b3e9da67e3f893VHnPQmt


    Thanks for likes ;)

    over 1 year ago

  5. ➔ Typesetting inspired by Rainer Maria Rilke & Erik Spiekermann
    ➔ Headings set in Meta Serif SC
    ➔ Body copy set in Meta Serif
    ➔ Metadata set in Meta
    ➔ 28pt header, 26pt line height, 21pt copy
    ✲ This has been the second of many Type Set Match volleys.

    View it live on typecast: http://beta.typecastapp.com/hofweber/share/2e391669af9a99af1b9b303a90bf190238d63b7eBtd9zBLZ4

    over 1 year ago

  6. What a neat little project this is - thanks Tim!
    I've used Coustard for the headline (both the bold and regular), and good old Calibri for the body. Seemed to pair pretty well!

    over 1 year ago

  7. I used an extra condensed Gothic for the last Type Set Match, so I wanted to try something different. The long headline was a real challenge for me and I spent a good amount of time wrestling it into shape. Kerning a tightly tracked display face in Photoshop proved no easy task.

    After I read the text, the first typeface that came to mind was Eva from the Ourtype foundry. It's especially warm and fluid in character and, in my opinion, carries a distinct human touch—much like the work of the famed ceramicist Eva Zeisel after which the typeface was named.


    For body text, I selected the wonderful and timeless Scala by Martin Majoor. It proportions are similar to Eva and the faces seem to share a commonality of letterform. Still, they contrast nicely. Aside from being serif to Eva's sans, I find that the sharpness (angularity?) of Scala plays nicely with the casual smoothness of Eva.


    For captions and footnotes, I chose Cora form Type Together. It's an odd experimental face that I've had trouble settling with in the past. I chose it primarily because of its rather large x-height and the fact that it holds up well at small sizes. Essentially, I wanted something with the feel of Lucida without having to, well, use Lucida. Cora does possess a shape the reminds me of Optima which, in some ways, feels to me like a [much] more formal cut of Eva. I could be way off base here, but that's what I was thinking when I made my selection.


    Finally, I tried to add a touch of typographic flair by employing a glyph from the ITC Ancestor family. The visceral, almost primordial bent of the article sent me searching for icons I could use to set (or at least mirror) the conceptual mood of the article. I tried my standard set, but nothing felt quite right. I began thinking about cave paintings and pictographs and, quite by luck, found ITC Ancestor which turned out to be exactly what I was looking for :)


    Feedback, as always, is welcomed.

    over 1 year ago

  8. Not so much theory behind this one, this was based more on my own visual preferences based on the theme. I like how Abril Display works at wide widths and when paired with the publication-friendly Magneta they seem to work quite well together.

    I hacked a drop cap into the canvas by using the strong tag - as I have recently learned: they don't work too consistently across different browsers (and operating systems it seems), but hey, we're having fun here right? And on that note, I used a lowercase "c" from Abril Display simply because it's nicer than the uppercase variant in both Abril and Magneta.

    I tried to keep to the modular scale based on 16px and the golden ratio both vertically and horizontally, so I used rems frequently to ensure different font sizes would adhere to the scale in relation to their spacing and relationships between each other.

    The multiple columns caused concern when adding the blockquote, the baseline alignment between columns was knocked off slightly so there is some negative margin work in there to realign the baselines (again, the live version could be slightly off across different browsers). And finally I used Tim's previous tip for text indenting to align the drop cap with the left edge.

    Live - http://beta.typecastapp.com/jordanmoore/share/a7927980c76913c8721d3a51adfe09232195c271j

    over 1 year ago

  9. Here's my take on Tim Brown's Recent Typematch.

    The headline is Archer. The thought behind it was that the serifs spoke to technology while the round terminals brought in the human aspect.

    The body is Avenir due to similar x-heights and widths.

    Please let me know what you think. I'm still young and would love to learn.

    over 1 year ago

  10. I continued with the primitive pictograph motif and chose a minimal typographic palette to set this version:

    I used the "edgy" and "showy" Quadraat italics for display which seemed to work well with the ITC Ancestor pictographs.

    I used Quadraat roman for text and for captions and author info rounded out the set with Quadraat Sans.

    over 1 year ago

  11. My entry for the second round of the typecast competition.

    Been wanting to give Exo some love (http://www.fontsquirrel.com/fonts/exo). All the type is set in Exo.

    Clean, contrasting stroke shapes lined up with a rigid grip and geometric header block. Fun, loose, and structured at the same time.

    See the live here: http://whitespase.com/typecast/2/

    over 1 year ago

  12. I used Adelle Web here (by the ever so awesome Type Together) because the article has a positively confident tone, devoid of hubris.

    Large, 19px text and a wide measure was chosen for the extra beefiness.

    See the full thing on Typecast: http://beta.typecastapp.com/robinrendle-team/share/844cfda20cad638462c60f783245f7f875bd9cc2PdC7q

    over 1 year ago

  13. With my last entry for this Type Set Match I chose to continue my established theme and again go for a typographic flourish utilizing ITC Ancestor.

    This time, I modified a glyph from the ITC Ancestor set and wrangled it a bit so that it resembled an uppercase "T" and then made a drop cap out of it. This allowed me to retain the flair and conceptual direction that ITC Ancestor provides while at the same time deriving some utility from the face. I'm not sure how successful the drop cap is, but I had fun with it nonetheless.

    Again I kept it simple for the headline, Fresco Plus Bold. For text, Fresco Plus normal.

    The caption is set using Fresco Plus Sans.

    over 1 year ago

  14. Please view the full version or the live version.

    I opted to go for a little bit of a fashion style layout with this match. The headline is set in Raleway and the body is Museo.

    I really like the idea of having the circle mimicking the world and the headline spilling out of it. Due to the large nature of the headline and movement away from the article itself, I opted for a heavier intro body type.

    over 1 year ago

  15. An assertive friendly headline in Marion 35pt, an airy Aller Light 14pt paragraph, and a tight Avenir 10pt attribution. The layout of all text adheres to a 7px baseline grid.

    All based on what I felt, practically no science or rules were used in the making of this shot.

    over 1 year ago

  16. Less focused on the classic, fine details of typographic study and more on attempting to resonate with the content. Movements of typographic design are focused on the period prior. The web, in the past years, has had a limited array of fonts to choose from. In recent years, this has expanded and given type, typographic and web designers alike, more opportunities for experimentation to reach a wider audience. This pairing of Rowdy and Museo Sans, not "typographically sound", to me, represents the power that's held.

    A strange pairing, bright colors, hover effects, etc. This is my take, see it live via Typecast at: http://beta.typecastapp.com/jonathan-stephens/share/35b2f3f806417943340bf6c1bf281add1a938f37.

    over 1 year ago

  17.  TJ Lomas TJ Lomas

    @Tim Brown - I really enjoyed this playoff. Are you thinking a series? I'm waiting on typecastapp.com - but this is a fun idea - and next time I'd be curious to use the app.

    over 1 year ago

keyboard shortcuts: previous shot next shot L or F like