How to treat monospace alike fonts in a tech blog – Typographic Review скачать в хорошем качестве

How to treat monospace alike fonts in a tech blog – Typographic Review

Watch this if you want to learn how to best use a monospace font for your body text. Jan sent in his tech blog for typographic review. I cover how to handle the monospace alike type choice by pimping the headings, the paragraph’s line height and spacing. TL;DW For headings in monospace and monospace alike fonts reduce the letter and word spacing. Only use a few different font sizes. Longer lines need more line height, and relate your margins to the line height. ☑️ Submit your web design or app design for typographic review: https://pimpmytype.com/review​ 💌 Pimp my Type Newsletter with weekly font recommendations: https://pimpmytype.com/newsletter​ 📰 Corresponding article with images: https://zeichenschatz.net/typography/... 1. The design briefing 👉 The key audience are software developers 👉 Their top 3 values are curiosity, sharing knowledge, the joy of tinkering with technology 👉 The atmosphere of the blog should be technical, elegant, clear, focussed 2. The Current Design Jan already did a great job on the current design. The feeling his type choice evokes fits the atmosphere he wants to create. He uses the monospace alike typeface Input Sans. I also appreciate that a lot of attention to typographic detail went into the web design as well. Like at the superscript “th” in the date, or the gorgeous footnotes on the left side of the text column. Where I see some room for improvement are in the spacing and font size of the heading, and the line height to get out even more of this already very well done blog design. 3. Pimpin’ it 👍 Reduce the letter spacing for large headings Many fonts at display sizes (20 to 24 px and above) get a very loose spacing, and monospace and monospace alike fonts especially. The letter spacing should be reduced to make them appear more compact and connected. So I lowered the letter spacing even more than Jan already did from -0.032em to letter-spacing: -0.5em. 👍 Reduce the word spacing for large headings Especially monospaced fonts come with a relatively wide word space, compared to other fonts. When they are set in larger sizes this is problematic, since the words are not that closely connected anymore. To get them closer together I reduce the word spacing with word-spacings: -0.1em. 👍 Use less different font sizes The subheading is not set in the same size as the heading but larger than the body text. This creates a rather noisy impression. To harmonize it, I reduce the font-size to visually the same size as the body text (1.1rem). 👍 Increase the line height for longer lines The longer the lines, the larger you line height should be. The ideal line is about 60 to 80 characters long, and Jan’s lines are around 80 characters long. Originally the line height is set to line-height: 1.57;. It is quite low for that long lines of text. Setting it to a factor of 1.8 makes it lighter, easier to read and gives it a cleaner look. 👍 Adjust the spacing in relation to the line-height It’s a proven technique to use the line-height as a base size for your vertical spacing. This means factions or multiples of it could be the margins for your paragraphs or headings. Jan already considered that principle in his original design. But since I changed the line height I have to apply this in the reviewed version as well. Additionally, I move the heading a bit away from the body text, to let it appear more decided. 👍 Clearly align the layout It’s not so obvious if the design is left aligned, but it definitely is not centered. I suggest deciding on one approach and choose to center it. 👍 Bonus tip Zoom the whole text at a certain breakpoint to 120% or even larger. This will make it easier to read, when the blog is browsed full screen on a 27″ monitor which probably is positioned further away from the viewer. Links 🔗 Jan’s Blog: https://www.jotaen.net/ 🔗 Typeface Input: https://input.djr.com/preview/ Chapters: 0:00 Intro 1:03 Briefing 1:54 The current design 3:32 Challenges with monospaced fonts 4:38 1. Pimpin’ the heading 6:32 2. Pimpin’ the line height 7:18 3. Pimpin’ the margins 08:57 Comparison 10:06 Outro 10:35 Outtakes Sound from freesound.org: tmp3jtgoi9 (Webdriver Torso) by kwahmah_02