Top all-time · #1775
Mark Boulton
Personal blog · markboulton.co.uk/journaldesignwriting
Mark Boulton's personal blog at markboulton.co.uk covers design and writing. Since 2007, 41 different Hacker News readers have linked it 46 times, most often “Five simple steps to better typography”. It is still writing: the last post was on 2025-09-09, and you can follow it by feed.
Too few sampled comments (20) to say how often HN recommends it.?
Why HN links it
HN readers link Mark Boulton's journal for its typography and grid design articles, especially the 'Five Simple Steps' series, which commenters describe as an introduction to web typography.
- Recommended for · 5 comments
- Called typography eye-openers and a good read; grid articles called amazing; a web typography primer called good.
Summarised by Claude from a sample of 20 HN comments that link here. Each comment is marked recommending, critical or neutral (citing without judging); how this works.
Most-linked posts?
- Five simple steps to better typography3 people · 3 mentions · first linked 2012-10-26
- Five simple steps to designing grid system3 people · 3 mentions · first linked 2010-08-03
- /journal/comments/five-simple-steps-to-better-typography-part-22 people · 2 mentions · first linked 2011-04-03
- Five simple steps to designing grid systems2 people · 2 mentions · first linked 2008-07-28
- /journal/five-simple-steps-to-designing-grid-systems-part-12 people · 2 mentions · first linked 2015-03-02
- Simple steps to better typography2 people · 2 mentions · first linked 2010-11-01
What Hacker News says?
The two main designers that started the grid-craze were Mark Boulton and Khoi Vinh. Some resources from them: http://www.markboulton.co.uk/journal/comments/five-simple-st... http://www.subtraction.com/2004/12/31/grid-computi How to use grids? It is usually as simple as adding some css, divs and classes. At its most basic, you can use a gridpaper background or this javascript gridder: http://gridder.andreehansson.se/…
Comment linking /journal/comments/five-simple-steps-to-designing-grid-systems-part-1
on “Twitter Bootstrap”Submitted Wysiwtfftwomg as a story · 131 points
HN discussionMark Boulton's posts really are some of the best typography eye-openers. Especially his "Five Steps" posts[1][2] were what got me into design and made me "get" it. And it didn't take a lot of time to read through them. I recommend that people skip his book and read these two pieces instead. Bear in mind that the grid guide is more of an intro piece; you probably won't be able to create grid-based websites after read…
Comment linking /journal/comments/five-simple-steps-to-designing-grid-systems-part-1
on “Crash Course: Design for Startups”Submitted Simple steps to better typography as a story · 66 points
HN discussionThank you; that's an excellent resource! A couple of other good ones: http://www.markboulton.co.uk/journal/five-simple-steps-to-be... http://webtypography.net/toc/
Comment linking /journal/five-simple-steps-to-better-typography
on “Tufte CSS”Submitted Rethinking CSS Grids as a story · 60 points
HN discussionYes they do eg http://www.markboulton.co.uk/journal/comments/five-simple-st...
Comment linking /journal/comments/five-simple-steps-to-better-typography-part-3
on “The New Web Typography”Submitted Blueprint: A CSS Framework as a story · 23 points
HN discussionI try to keep my subscription to an absolute minimum since I like to leave some time for reading books. After a lot of culling, I'm currently subscribed to some popular feeds: http://www.smashingmagazine.com/ (general web design / dev) http://www.alistapart.com/ (long form web design / front-end) http://dailyjs.com/ (Javascript / node.js) http://createdigitalmusic.com/ (digital music / software) http://www.creativea…
Comment linking /
on “Ask HN: What unknown technical blogs or sites do you read?”Submitted My Handbook – Environment as a story · 21 points
HN discussionI couldn't agree with you more. I have been working on trying to get some skills therein. I paste the notes from my personal expertise board. Graphic Design: Relationship Transition Layering Principles of Design: Repetition Opposition: Excitement and tension. Too much is bad. Particularly thick and thin lines in logos. Priority: The order of the items. Position: Use a grid. Divide in twos and connect corners diagona…
Comment linking /journal/five-simple-steps-to-designing-grid-systems-part-1
on “Coding is not the new literacy”Submitted Design is Open Source as a story · 10 points
HN discussionW3C has been hashing out new grid-based specs for quite some time now, because as admitted in the Grid Layout Module working draft, "As websites evolved... floats, were not necessarily well suited for application layout." http://www.w3.org/TR/css-grid-1/#background Dozens & dozens of CSS grid systems have emerged, but without retooling the internals of the browser's layout engine and adding new CSS language features…
Comment linking /journal/rethinking-css-grids
on “Grid Style Sheets – CSS polyfills from the future”Submitted In between — responsive design as a story · 4 points
HN discussionThere is nothing wrong with indenting lists negatively. In fact some say it is more correct: http://www.markboulton.co.uk/journal/comments/five-simple-st...
Comment linking /journal/comments/five-simple-steps-to-better-typography-part-2
on “Formatting your web content to be a pleasure to read”Submitted Structure First. Content Always. | Mark Boulton as a story · 3 points
HN discussionI am quite sure that is done deliberately. I can't find a good resource to point to, but this article by Mark Boulton describes why you would do that with bulleted lists. I would assume that the same applies to ordered lists: http://www.markboulton.co.uk/journal/comments/five-simple-st... > With the advent of desktop publishing it became suddenly very easy and cost-effective to produce bodies of text. The problem wa…
Comment linking /journal/comments/five-simple-steps-to-better-typography-part-2
on “Formatting your web content to be a pleasure to read”Submitted Design isn't about tools as a story · 3 points
HN discussionFun! But a heavy emphasis on doing things by eye. Personally I prefer the results of following stricter rules extracted from print typesetting. A few examples: - I recommend reading about [vertical rhythm]( https://24ways.org/2006/compose-to-a-vertical-rhythm ), which turns a lot of imprecise choice to exactly correct sizes. - I've never heard of there being a rule for how much space goes above a paragraph (this is…
Comment linking /journal/five-simple-steps-to-better-typography-part-4/
on “Learn the logic of great typography”Submitted Start Your Own Business by Mark Boulton as a story · 3 points
HN discussionAre you serious? Unless you're David Carson, you should always design based on a grid if you want good design. Mark Boulton wrote some amazing articles about grid design long before grid frameworks were a thing http://www.markboulton.co.uk/journal/five-simple-steps-to-de...
Comment linking /journal/five-simple-steps-to-designing-grid-systems-part-1
on “Pills: A simple responsive CSS grid for humans”Submitted Sparkicons and the humble Hyperlink as a story · 2 points
HN discussionI come from a graphic design background with training in typography. While you _can_ specify font-size in any units CSS understands, typography as a field has traditionally used PT and EM units for sizing and spacing. - for container size I use % or PX - for margins, spacing, and padding I use EM or PX - for text sizes I use PT or % Here's a short, good primer for typography on the web: http://www.markboulton.co.uk/…
Comment linking /journal/five-simple-steps-to-better-typography
on “Writ – Opinionated, classless styles for semantic HTML”Submitted Design is veneer as a story · 2 points
HN discussionHanging bullets/numerals have nothing to do with markdown, they're a typographic choice and in my opinion look better than the indented style that you normally get by default. In fact, the author of the post has previously written a hugely popular series about typography that specifically mentions this choice: http://www.markboulton.co.uk/journal/five-simple-steps-to-be...
Comment linking /journal/five-simple-steps-to-better-typography-part-2
on “Wysiwtfftwomg”Submitted Five simple steps to better typography as a story · 2 points
HN discussion> I wonder if we need a middle-class of open source contributor [...] I wish somebody would do the time-consuming and boring-but-valuable work of polishing these contributions into something merge-worthy... We need a valuing of non-coding contributions, and a way of welcoming them into projects. I like building community and dealing with people. I like project management, planning, and thinking about funding opportu…
Comment linking /journal/design-in-open-source/
on “The burden of an Open Source maintainer”Submitted Open letter to W3C CSS Working Group re CSS Grids. as a story · 2 points
HN discussionYeah it's not always been there, Mark Boulton helped CERN restore it to it's original URL a few years ago, http://markboulton.co.uk/journal/firstwebsite
Comment linking /journal/firstwebsite
on ““The WorldWideWeb (WWW) project aims to allow links to information” (1991)”Submitted Visual Design is not a thing as a story · 2 points
HN discussion
