<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
			<channel>
				<title>Clagnut</title>
				<link>https://clagnut.com/</link>
				<atom:link href="https://clagnut.com/feeds/fullposts.xml" rel="self" type="application/rss+xml" />
				<description>A blog by Richard Rutter. Root through a heap of web design and development stuff and a few other tasty morsels. (latest 5 posts in full)</description>
				<language>en-gb</language>
				<copyright>Copyright 2003-2026, Richard Rutter</copyright>
				<webMaster>rich@clagnut.com (Richard Rutter)</webMaster>
				<managingEditor>rich@clagnut.com (Richard Rutter)</managingEditor>
				<image>
					<url>https://clagnut.com/images/clagnut_rss.png</url>
					<link>https://clagnut.com/</link>
					<title>Clagnut</title>
					<width>88</width>
					<height>31</height>
				</image>
		<item>
			<pubDate>Tue, 10 Feb 2026 09:23:47 PST</pubDate>
			<title>What&#8217;s new in web typography?</title>
			<link>https://clagnut.com/blog/2447/</link>
			<guid>https://clagnut.com/blog/2447/</guid>
			<description><![CDATA[<section><div class='prose'><p>This is a question I’ll be answering next month at <a href="https://webdayout.com">Web Day Out</a> conference. I’ll be clinging on to the coat-tails of a host of <a href="https://webdayout.com/#:~:text=reasons%20to%20attend…-,Speakers">brilliant people</a> who’ll be answering the wider question “what you can do in web browsers today?” I can’t wait!</p>

<figure><a href="https://webdayout.com"><img loading='lazy' src="https://clagnut.com/images/2447/web-day-out-lanyard.png" alt="A mock-up of my Web Day Out lanyard." /></a></figure>

<p>There have been so many advances in <abbr class='c2sc'>HTML</abbr>, CSS and browser support over the past few years. These are enabling phenomenal creativity and refinement in web typography, and I’ve got a mere 28 minutes to tell you all about it.</p>

<div class="group-with-aside stack">

<p>Using my <a href="https://book.webtypography.net">Web Typography book</a> as a starting point I’ll take you on a whirlwind tour of what <abbr class='c2sc'>CSS</abbr> now enables you to achieve with web typography.</p>

<aside>Despite its advancing years, the book still holds up as a practical guide to contemporary typography on the web.</aside>

</div>

<p>I’ll run along the cowpaths that have been paved (waves at <code>size-adjust</code>), pausing at the brilliantly simple but impactful (hello <code>text-wrap</code>) and spend time with the new and shiny things that bring expressiveness, fine detail, responsiveness, consistency and efficiency to your work: variable fonts in all their glory, typographic units like <code>lh</code> and <code>cap</code>, drop-caps, hanging punctuation, <code>text-box-trim</code>, container-aware fonts, fluid type and surprising things with lists.</p>

<p>It’s gonna be a wild ride! Join me at <a href="https://webdayout.com">Web Day Out</a> in Brighton on 12 March 2026. <strong>Use <span class="c2sc">JOIN_RICH</span> to get 10% off</strong> and you’ll also get a free online ticket for <a href="https://stateofthebrowser.com">State of the Browser</a>.</p></div></section>
<p><a href='https://clagnut.com/blog/2447/'>Read or add comments</a></p>]]></description>
			<category domain="https://clagnut.com/archive/standards/">Web standards</category>
			<category domain="https://clagnut.com/archive/typography/">Typography</category>
			<category domain="https://clagnut.com/archive/css_techniques/">CSS techniques</category>
			<category domain="https://clagnut.com/archive/clearleft/">Clearleft</category>
			<category domain="https://clagnut.com/archive/conferences/">Conferences</category>
		</item>
		<item>
			<pubDate>Wed, 03 Dec 2025 09:35:53 PST</pubDate>
			<title>Helpful rather than hurtful to the interests of mankind</title>
			<link>https://clagnut.com/blog/2446/</link>
			<guid>https://clagnut.com/blog/2446/</guid>
			<description><![CDATA[<section><div class='prose'><p>In the early 1940s, <a href="https://www.bbc.com/historyofthebbc/research/directors-general">Directors General of the <abbr class='c2sc'>BBC</abbr></a>, Cecil Graves and William Haley had this to say about the revolutionary technology of radio and television broadcasting:</p>

<blockquote>
  <p>This country has in its hands an instrument of incalculable power for good. An instrument that can be given to spreading among the nation the true knowledge of each other. Helpful rather than hurtful to the interests of mankind.</p>
  
  <p>These newly acquired skills of mankind will move at a breathtaking pace. Broadcasting, which we begin to see now as a worldwide international service, is a step into the future even more dramatic than the devеlopment of flying.</p>
</blockquote>

<p></p>

<blockquote>
  <p>Broadcasting without its responsibilities is nothing. It’s not a way of thought, it’s not a way of culturе, it’s not a way of life. It’s there to serve thought, so that people think for themselves.</p>
  
  <p>It’s there to serve culture in such a way that people will turn more and more to active participation in the arts. Go to the theatre, attend concerts, read books, use their hands. And help to build a community in which broadcasting is only a very small part of a full and satisfying life.</p>
  
  <p>It has helped something living in us to keep alive. And it has reminded us in its graver moments that life won’t last. And that for this very reason, there are things more important than success or power.</p>
</blockquote>

<p>Now read that again, this time replacing ‘broadcasting’ with ‘AI’ and imagine how different things could be if the tech giants and their acolytes took that approach rather than the complete opposite.</p>

<p>The band <a href="https://www.publicservicebroadcasting.net">Public Service Broadcasting</a> put those speeches to music in a <a href="https://publicservicebroadcasting.bandcamp.com/album/this-new-noise">wonderful concert</a> at the Royal Albert Hall. It’s beautiful and well worth a few minutes of your day:</p>

<figure>
<iframe style="max-width:700px; height: 120px; --iframe-aspect-ratio: auto" src="https://bandcamp.com/EmbeddedPlayer/album=352573560/size=large/bgcol=ffffff/linkcol=de270f/tracklist=false/artwork=small/track=208252773/transparent=true/" seamless><a href="https://publicservicebroadcasting.bandcamp.com/album/this-new-noise">This New Noise by Public Service Broadcasting, <abbr class='c2sc'>BBC</abbr> Symphony Orchestra, Jules Buckley</a></iframe>
</figure></div></section>
<p><a href='https://clagnut.com/blog/2446/'>Read or add comments</a></p>]]></description>
			<category domain="https://clagnut.com/archive/music/">Music</category>
			<category domain="https://clagnut.com/archive/industry/">New media industry</category>
		</item>
		<item>
			<pubDate>Mon, 08 Sep 2025 08:44:49 PST</pubDate>
			<title>My requests for Interop 2026</title>
			<link>https://clagnut.com/blog/2445/</link>
			<guid>https://clagnut.com/blog/2445/</guid>
			<description><![CDATA[<section><div class='prose'><p>It’s the time of year again when <a href="https://github.com/web-platform-tests/interop/blob/main/proposal_guide.md">browser makers ask</a> which shiny new features they should implement in preference to addressing outstanding bugs and omissions. Apologies for the cynicism, but having attempted to participate in the process over the past few years, that’s the way it seems to me.</p>

<p>None-the-less, I’m trying again with these submissions. Many I’ve tried to get into Interop before, but all have fallen on deaf ears. They all refer to existing, stable <abbr class='c2sc'>CSS</abbr> properties that have been documented as part of the spec for many years (in one case for 28 years!).</p>

<p>My asks are mostly typographic, as you might expect, but in some cases really important in that there are harmful implementations that need to be addressed. I’ve listed them in order of priority, based on severity, impact and age.</p>

<p>If you’d like to see browser makers agree to fix and implement any of these please click through to the Interop submission and voice your support (give it a thumbs up at least).</p>

<h2>Required to stop the&nbsp;web&nbsp;sucking</h2>

<h3>font-variant-position</h3>

<p>This is the most problematic as the lack of full support can make some text either misunderstood or incomprehensible. I’ve <a href="https://clagnut.com/blog/2434/">written about the issues before</a>. The property tells browsers to choose proper OpenType subscript and/or superscript glyphs if they are available in the font. This works across the board, however only Firefox supports the most important part of the specification which says:</p>

<blockquote>
  <p>Because of the semantic nature of subscripts and superscripts, when the value [of font-variant-position] is either sub or super for a given contiguous run of text, if a variant glyph is not available for all the characters in the run, simulated glyphs should be synthesised for all characters using reduced forms of the glyphs that would be used without this feature applied.</p>
</blockquote>

<p>What happens without supporting this part of the spec, is this is that the subscript and superscript glyphs are displayed as regular full size characters, thus you lose all the visual semantics provided by superscripts and subscripts.</p>

<p>For me, this is exactly the kind of thing that should be in Interop, as the current partial implementations make use of the property problematic to say the least.</p>

<p><strong>Up-vote the <a href="https://github.com/web-platform-tests/interop/issues/1038">Interop request for font-variant-position</a></strong>.</p>

<h3>break-after:&nbsp;avoid</h3>

<p>This one <a href="https://clagnut.com/blog/2426">breaks my heart</a>. It affects multicolumn layout and all <abbr class='c2sc'>EPUB</abbr> ebooks (which use <abbr class='c2sc'>HTML</abbr> &amp; <abbr class='c2sc'>CSS</abbr>, and include all ebooks not on a Kindle), as well as printed media.</p>

<p>As it stands browsers will happily render a heading at the bottom of a column or page, with the following paragraph starting on the next column or out of sight on the next page. This is a typographic no-no, and has been for  six centuries. Far better for the reader to have the heading attached to its paragraph on the next page, even if that means leaving some redundant whitespace in its place.</p>

<p>Since 1997(!) and the early drafts of <abbr class='c2sc'>CSS2</abbr>, there has been an easy way to tell browsers not insert a page break directly after a heading:</p>

<figure class="pre"><div data-element="code-block"><div class="code-block__header"><div role="alert"></div></div><pre><code class="language-css">h2 {
    page-break-after: avoid;
}
</code></pre></div></figure>

<p>Nowadays the modern way to do that is defined in the <a href="https://drafts.csswg.org/css-break/#breaking-controls">CSS Fragmentation Module Level 3</a> even more simply as:</p>

<figure class="pre"><div data-element="code-block"><div class="code-block__header"><div role="alert"></div></div><pre><code class="language-css">h2 {
    break-after: avoid;
}
</code></pre></div></figure>

<p>This 28 year old bug (and counting) affects all of the millions of ebooks which have subheadings, and is only fixed in Chromium.</p>

<p><strong>Up-vote the <a href="https://github.com/web-platform-tests/interop/issues/1039">Interop request for break-after:avoid</a></strong></p>

<h2>Overdue&nbsp;implementation</h2>

<h3>Advanced&nbsp;hyphenation</h3>

<p>There is more to setting hyphenation than just turning on the hyphens. The <a href="https://www.w3.org/TR/css-text-4/#hyphenation">CSS Text Module Level 4</a> has introduced the same kind of hyphenation controls provided in the likes of InDesign and even Word. These controls provide different ways to define how much hyphenation occurs through your text.</p>

<p>While not a deal-breaker it would be great to see these in browsers, especially as <a href="https://clagnut.com/blog/2395/">the current implementations</a> vary from non-existent to patchy or using deprecated properties.</p>

<p><strong>Up-vote the <a href="https://github.com/web-platform-tests/interop/issues/1042">Interop request for advanced hyphenation</a></strong></p>

<h2>Nice&nbsp;to&nbsp;have</h2>

<h3>Hanging&nbsp;punctuation</h3>

<p>This particularly refers to the quote marks used with blockquotes and pull-quotes. When quotation marks appear at the beginning of a line they nudge the start of the text inwards, causing an unsightly gap and unevenness within the paragraph, which can make reading a slightly jerky experience. If you open a blockquote with a quotation mark, the first <em>letter</em>  should be aligned with the first letter of all the other lines. To do so, you <dfn>hang</dfn> the opening quote mark by moving it into the margin or indent. For example:</p>

<blockquote class="quoted"><p>One more attribute the modern typographer must have: the capacity for taking great pains with seemingly unimportant detail. To them, one typographical point must be as important as one inch, and they must harden their heart against the accusation of being too fussy.</p></blockquote>

<p>But more than that, if the text is centred, the browsers should effectively ignore the presence of the opening and closing punctuation, and lay out the text as if the quote marks weren't present, and add them in afterwards. Similarly fully justified text (including the final line) should have the final quote hanging in the margin too.</p>

<p>The <code>hanging-punctuation</code> property makes that trivial to do so without resorting to negative margins, text indents and magic numbers. There is <a href="https://clagnut.com/sandbox/hanging-punctuation.html">partial support</a> in Safari, but only for opening quotes not closing ones.</p>

<p><strong>Up-vote the <a href="https://github.com/web-platform-tests/interop/issues/1043">Interop request for hanging punctuation</a></strong></p>

<h3>wrap-inside</h3>

<p>This property addresses the situation where you have sequences of text whose lines you may want to break only at particular points, and preferably not at all. To achieve this currently, you may resort to inserting non-breaking spaces to keep text together, but this is a very manual and fragile approach. You could be introducing problems brought on by automated translation, or end up with text disappearing off the side of a screen.</p>

<p>By using <code>wrap-inside:avoid</code> you can try to prevent text in a phrase from wrapping. You can use <a href="https://www.w3.org/TR/css-text-4/#wrap-inside">this property</a> on any <dfn>inline element</dfn>, that is to say a tag such as <code>&lt;em&gt;</code> or <code>&lt;span&gt;</code> that is used to mark up a phrase rather than a block of text like a paragraph.</p>

<p>Another typographic nicety, but one that removes manual intervention and fragility. Again, it would be handy to know it works across browsers (there’s no support currently).</p>

<p><strong>Up-vote the <a href="https://github.com/web-platform-tests/interop/issues/1044">Interop request for wrap-inside</a></strong></p></div></section>
<p><a href='https://clagnut.com/blog/2445/'>Read or add comments</a></p>]]></description>
			<category domain="https://clagnut.com/archive/standards/">Web standards</category>
			<category domain="https://clagnut.com/archive/browsers/">Browsers</category>
			<category domain="https://clagnut.com/archive/typography/">Typography</category>
			<category domain="https://clagnut.com/archive/css_techniques/">CSS techniques</category>
		</item>
		<item>
			<pubDate>Thu, 19 Jun 2025 16:21:57 PST</pubDate>
			<title>Critical questions for design leaders working with AI</title>
			<link>https://clagnut.com/blog/2444/</link>
			<guid>https://clagnut.com/blog/2444/</guid>
			<description><![CDATA[<section><div class='prose'><p>Earlier this year, through its <a href="https://leadingdesign.com">Leading Design</a> program, <a href="https://clearleft.com/">Clearleft</a> brought 40 design leaders together in New York to shape a shared vision for the future of design leadership in a world of artificial intelligence.</p>

<p>Collectively we wanted to share an asset at the end of the day which would reflect the discussions, meditations and conclusions about the impact of this disruptive technology. I was privileged to be there on the day, and I’m delighted to share the outcome with you now.</p>

<p>Whether we like it or nor, generative <abbr class='c2sc'>AI</abbr> has arrived to the masses. It has brought with it a huge amount of hype and understandable discontent. It also brings a set of capabilities to every desktop which would have seemed like science fiction just a few years ago. But as the saying goes, with great power comes great responsibility.</p>

<figure><img loading='lazy' src="https://clagnut.com/images/2444/ny-ai-table.jpeg" alt="Multiple round tables in a brightly lit room, each with 7 diverse-looking people in conversation." /><figcaption>Design leaders discussing the future at the Leading Design event in New York</figcaption></figure>

<p>As design leaders we need to tread a fine line between what is acceptable and useful, and what is problematic and harmful. This is precisely what the discussions on the day addressed, and why they came together as a set of <a href="https://leadingdesign.com/new-york-2025-ai">critical questions for design leaders</a> working with artificial intelligence.</p>

<p>I had the pleasure of editing the document into series of prompts, conceived by design leaders for design leaders. It does not attempt to provide any answers, but it does offer up critical questions to ask of yourself, your colleagues and your organisation.</p>

<p>To give you a flavour, here are some key questions we captured:</p>

<ul>
<li><em>Product design</em>: <strong>Is <abbr class='c2sc'>AI</abbr> necessary to solve this problem?</strong> Consider the problem you are trying to solve or the human need you are attempting to address. Ask your colleagues whether <abbr class='c2sc'>AI</abbr> is the right tool for the job, or whether there might be cheaper, better, more performant non-AI alternatives. Consider whether you are using <abbr class='c2sc'>AI</abbr> to improve the product, or inserting an <abbr class='c2sc'>AI</abbr> feature in search of a problem to solve. <abbr class='c2sc'>AI</abbr> should be an enabler not an irritant.</li>
<li><em>Design practice</em>: <strong>How do you preserve the human touch in the process?</strong> <abbr class='c2sc'>AI</abbr> can generate output quickly and tirelessly, but humans bring heart, soul, empathy, imagination and their lived experience. Think about where human craft should fit into your design processes, and whether you should deliberately add friction into the process around <abbr class='c2sc'>AI</abbr>.</li>
<li><em>Design leadership</em>: <strong>Who are you leaving behind?</strong> GenAI could potentially ease the entry of junior designers into the profession, but at what cost? Curiosity, collaboration and critical thinking are key tools of the experienced designer – they help us simplify and humanise solutions to tricky problems. Consider how you’ll ensure newer members of your team will gain these attributes on the job.</li>
<li><em>Organisational impact</em>: <strong>Are we prepared to stake our reputation on our use of <abbr class='c2sc'>AI</abbr>?</strong> The current crop of <abbr class='c2sc'>LLM</abbr>s does not come without their controversies and questionable ethics. Their significant energy consumption may not sit well with your organisation’s environmental commitments. Almost all models were trained on copyrighted material without permission of the intellectual property owners, including journalists, artists, authors and scientists. The models themselves contain inherent biases due to the nature of their training data – the good and the bad of the world wide web. What’s more, these biases can be tweaked in the direction of the political leanings of <abbr class='c2sc'>AI</abbr> company owners, which may also run counter to your organisation’s values.</li>
</ul>

<p><strong>Read all the <a href="https://leadingdesign.com/new-york-2025-ai">critical questions for design leaders</a> working with artificial intelligence</strong>.</p>

<p>I owe a huge thank you to all the design leaders who attended our Leading Design event in New York and contributed to this guide. They brought untold experience, wisdom and care to the conversation. I thoroughly enjoyed hosting a table and editing the document we came up with afterwards.</p></div></section>
<p><a href='https://clagnut.com/blog/2444/'>Read or add comments</a></p>]]></description>
			<category domain="https://clagnut.com/archive/industry/">New media industry</category>
			<category domain="https://clagnut.com/archive/clearleft/">Clearleft</category>
			<category domain="https://clagnut.com/archive/conferences/">Conferences</category>
		</item>
		<item>
			<pubDate>Tue, 03 Jun 2025 09:34:08 PST</pubDate>
			<title>I have Unfinished Business</title>
			<link>https://clagnut.com/blog/2443/</link>
			<guid>https://clagnut.com/blog/2443/</guid>
			<description><![CDATA[<section><div class='prose'><p>I’m starting a podcast. I hear they are all the rage at the moment. Yes that’s right, in shock news two middle aged men – my good friend <a href="https://stuffandnonsense.co.uk/">Andy Clarke</a>, and I – have decided to host a podcast. To be more precise, Andy is resurrecting a podcast and I’m joining him.</p>

<p>It’s called <a href="https://unfinished.bz">Unfinished Business</a>. As people who’ve spent the past two decades running design agencies in one form or another, we’ll be chewing the fat over what that’s like, what we learned, what we’d never do again and how we keep going.</p>

<p>Our <a href="https://unfinished.bz/episodes">inaugural episode</a> has the two of us catching up, delving into our back stories (how does one go from working on oil rigs to writing <abbr class='c2sc'>CSS</abbr>?) and questioning a place for art in the modern world.</p>

<p>Much better than that, though, is our plan for guests. No spoilers just yet, but it’ll feature all sorts of people whose backgrounds have ended up combining design with the world of business: agency founders, start-up entrepreneurs and more. But it’ll never get too far away from what we really love – the web and all the good stuff it can bring to modern life.</p>

<p><a href="https://unfinished.bz">Subscribe to Unfinished Business</a> using your favourite podcast app.</p></div></section>
<p><a href='https://clagnut.com/blog/2443/'>Read or add comments</a></p>]]></description>
			<category domain="https://clagnut.com/archive/blogging/">Blogging</category>
			<category domain="https://clagnut.com/archive/industry/">New media industry</category>
		</item>
	</channel>
		</rss>