Chemical kerning

Chemical drawing software uses various heuristics or hard-coded rules to determine the spacing between labels and bond lines. This leads to suboptimal results, with the structures looking either cramped or too spaced out.

To improve the appearance of chemical structures, we should consider the shapes of the glyphs and adjust the spacing between atoms and bonds accordingly. I call this "chemical kerning".

In the demo below, the gaps between atoms and bonds are calculated based on the offsetted glyph shapes to create the desired optical spacing. The result is a more visually pleasing structure.

You can edit the label to see how the kerning changes and even try inserting emojis.

Demo

See also

• Computer Modern Playground - An interactive demo of the Computer Modern metafont.
• RDKit WASM - Running RDKit in the browser with WebAssembly.
• Awesome cheminformatics - A curated list of awesome cheminformatics resources.
• Cheminformatics Crossword - A daily crossword puzzle for cheminformatics terms.
• Organic chemistry pronunciation guide - A pronunciation guide for organic chemistry terms.
• IUPAC Multiplicative Prefix Generator - Generate IUPAC multiplicative prefixes for naming chemical compounds.
• IUPAC to Structure - Convert IUPAC names to 2D structures.
• Canonical SMILES Generator - Convert a SMILES string to its canonical (kekulized) form.
• SMILES Parse Tree Viewer - Visualize the parse tree of a SMILES string.
• SMILES to Structure - Convert SMILES (simplified molecular-input line-entry system) to a structure online.
• SMILES to Structure API - A web service for converting SMILES (simplified molecular-input line-entry system) to MOL.
• Awesome SMILES - A curated list of awesome resources on SMILES (simplified molecular-input line-entry system).
• SMILES to IUPAC - Convert SMILES to IUPAC name online.
• IUPAC to SMILES - Convert IUPAC names to SMILES strings.
• SMILES to InChI - Convert SMILES to InChI string online.
• InChIKey to SMILES - An online tool for converting (resolving) InChIKeys to SMILES strings.
• Structural Formula Viewer - View structural formulas of chemical compounds.
• Working with ChemDraw JS - ChemDraw JS makes it possible to create, view, and edit chemical structures in the browser.
• Awesome ChemDraw - A curated list of awesome ChemDraw resources, tutorials, and more.
• 3D Mol Viewer - View molecular models in 3D.
• Mol Editor - An online editor for Mol files.
• Molecule of the Day - Discover a new molecule every day.
• Periodic Table - View the periodic table of the elements.
• Supramolecular chemistry pronunciation guide - A pronunciation guide for terms in supramolecular chemistry.
• Chemical elements pronunciation guide - A pronunciation guide for chemical elements.
• Big Chemical Structures - A book of chemical structures presented in a big format.
• Big Chemical Elements - A book of chemical elements presented in a big format.
• Biochemistry pronunciation guide - A pronunciation guide for biochemistry terms.
• Awesome Metafont - A curated list of awesome resources on Metafont.
• Asymptote Editor - Edit Asymptote scripts online.
• The nine best fonts of all time - The list of my top nine favorite fonts.
• Converting fonts with FontForge using the command line on macOS - How to convert font files using FontForge's scripting language on macOS?
• Timeless fonts I grew up with - A nostalgic journey into the fonts that shaped my perspective growing up and continue to be my source of inspiration.
• COLRv1 to SVG - Convert COLRv1 fonts to SVG.
• Awesome font engineering - A curated list of awesome resources on font engineering.
• Awesome typography - A curated list of awesome resources on typography.
• Typography quotes - A collection of quotes about typography.
• Typography Crossword - A daily crossword puzzle for typographical terms.
• Fonts pronunciation guide - A pronunciation guide for the names of fonts.
• Typographers and type designers pronunciation guide - A pronunciation guide to the names of typographers and type designers.
• Image Tracing Tool - Convert raster (bitmap) images to vector graphics online.
• Vector Graphics Editor - An online vector graphics editor (WIP).
• Emoji fonts - Compare and test different emoji fonts.