diff --git a/public/brand/logo-eink.png b/public/brand/logo-eink.png index 331ca16..a129479 100644 Binary files a/public/brand/logo-eink.png and b/public/brand/logo-eink.png differ diff --git a/scripts/brand.ts b/scripts/brand.ts index b2dd6a5..a900ec2 100644 --- a/scripts/brand.ts +++ b/scripts/brand.ts @@ -21,7 +21,6 @@ import path from 'node:path'; import sharp from 'sharp'; -import { tighten } from '../lib/brand/tighten'; import { encodePng, toBitmap } from '../lib/screen/encode'; const LOGO_URL = @@ -30,15 +29,15 @@ const LOGO_URL = /** Wide enough to read from the pavement, short enough for a 76px header. */ const EINK_WIDTH = 260; -/** - * How many blank pixel columns may remain between two letters. +/* + * The wordmark keeps its original letter-spacing. * - * The logotype is drawn with wide spacing, which reads well on a website and - * wastes a third of the width on a panel. Compressing the gaps lets the same - * 260px hold letters a third taller — which the hairlines need more than the - * spacing does. Rendered at several values by `npm run brand:variants`. + * Compressing the gaps was tried: it buys letters a third taller at the same + * width, which helps the hairlines. It also changes the logotype's character, + * and the shop prefers the drawing as it was designed. `lib/brand/tighten.ts` + * and `npm run brand:variants` remain, so the decision can be revisited by + * looking rather than by imagining. */ -const EINK_LETTER_GAP = 8; /** * Where grey becomes ink. @@ -67,25 +66,10 @@ async function main(): Promise { await writeFile(path.join(directory, 'logo.png'), original); const band = await findWordmarkBand(original); - - // Tighten at full resolution, before any downscale: compressing columns that - // are already an average of ink and paper would smear the hairlines. - const full = await sharp(original) + const cropped = await sharp(original) .extract({ left: 0, top: band.top, width: band.width, height: band.height }) - .flatten({ background: '#ffffff' }) - .greyscale() - .raw() - .toBuffer({ resolveWithObject: true }); - - const tightened = tighten( - { data: full.data, width: full.info.width, height: full.info.height }, - EINK_LETTER_GAP, - ); - - const cropped = await sharp(tightened.data, { - raw: { width: tightened.width, height: tightened.height, channels: 1 }, - }) .resize({ width: EINK_WIDTH }) + .flatten({ background: '#ffffff' }) .ensureAlpha() .raw() .toBuffer({ resolveWithObject: true });