DS HTML typography + Figma discussion

The basic HTML used in the rest of these examples.

A paragraph <p> element is a block-level HTML element. If you could only have one element, this would be it. You apply styles to it like how paragraph styles work in desktop publishing software. But it can have some inline-level sub elements like <span>, <em>, <strong>, <a> (anchor link), <mark> that generally align with how publishing software uses character styles.

People used to use “bold” and “italic” but those have been replaces with the semantic “emphasis” and “strong emphasis” (which aren’t attached to visual styles – but rather to the way we speak),

Figma doesn’t have a separation of paragraph/character styles – and instead just has “text styles” – so, this requires a lot of duplication vs the children deferring to the parent styles. Desktop publishing software back to 1986 had some additive/override concept for this. Figma also doesn’t have a way to mark a word or style a group of characters with things like a background.

Note: You can apply bold and italic inline in Figma (command + b / etc), but they’re just hardcoded toggles. You can’t define what “bold” means (maybe you want semibold, or maybe bold plus a slight color shift). You can’t save an inline style. The overrides exist outside the style system entirely.

Note: Each paragraph is self contained. It’s not a text box with inferred “paragraph spacing” like Figma. This is an important distinction. In a way, you could really say that Figma ONLY has character styles  – and no paragraph styles because it’s not aware of anything but strings of characters and boxes.

Just a note about the more recent native nesting CSS (in case you haven’t seen that) (since I use it in the examples)

The initial raw CSS. (the real conversation is in the code comments)

(Note: this is all 100% “responsive” by default / until someone tells it not to be and breaks it)

(noting the line width / relative max-width with ch)

You might not want to set this on the type pattern / and only at a component/scope level – but also, why would you want to allow longer line length anywhere?

Some contextual/conditional size type considerations. With CSS, it can be part of the type – but with Figma, it ends up having to be a collection.

Breaking things into custom properties.

Adding a more versatile variable font.

Showing how Figma forces you to reassign all the variables for each text style (but you wouldn’t have to do this in the code)

Mimicking how Figma collection modes hack together something sorta like a media query.

Light colors on dark backgrounds (especially thin lines) will appear to bleed and feel bigger than their dark on light counterparts. So, with the new variable fonts, you don’t have to jump from 400, 600, 700 etc – (because that’s how font weights have traditionally worked) – and we can really fine-tune and get those looking the same on both light and dark. If you’re icons support a little adjustment that would be helpful too.