Consistentie in spacing
Ik loop momenteel tegen een vraagstuk aan waarbij ik jullie hulp goed kan gebruiken.
Op dit moment ben ik bezig met de bouw van een website/-shop i.c.m. onder andere Breakdance Builder, WooCommerce en Headspin. Ik wil graag advies om de spacing consistent te krijgen. Ik zal uitleggen wat ik bedoel.
Voorbeeld: https://hartwijk.boutier.dev/dienst/badkamer-renovatie/
Hier heb ik op de linkerkolom een gap ingesteld met:
var(--hsp-s)
Je ziet echter dat er boven- en onder de titel meer ruimte is als tussen de andere elementen. Mijn vermoeden is dat dit komt door de line-height van de headings. Deze staan nu in Headspin als volgt ingesteld (zie bijlage).
Dit is natuurlijk van toepassing op alle headings.
Adviseren jullie om dit simpelweg te verkleinen, of hoe gaan jullie hiermee om in de praktijk?
Alvast bedankt!
Ik heb ooit een interessant stuk gelezen van een UI-specialist, en kort samengevat kwam het erop neer dat er geen perfecte one-size-fits-all oplossing bestaat voor spacing.
In zulke gevallen draait het er vooral om dat het visueel aangenaam oogt, zelfs als dat technisch niet 100% symmetrisch is.
Twee goede voorbeelden zijn het Google-logo en het YouTube-logo. Geen van beide is volledig symmetrisch. De pijl in het YouTube-logo staat bijvoorbeeld niet exact in het midden. Als je die perfect zou centreren, zou het juist minder goed lijken.
Vanuit dat standpunt doe ik soms iets wat niet helemaal best practice is: ik geef de heading een kleine negatieve marge zodat het geheel visueel klopt, terwijl de rest netjes uitgelijnd blijft met de standaard spacing.
Tim De Cauwer Goede gedachtengang. Dank voor het delen! Ik kan het inderdaad oplossen met wat negatieve spacing, alleen probeer ik altijd zo min mogelijk 'vieze hacks' te gebruiken. Al zal de klant dat een worst wezen..
Ik snap je volledig, trust me, heb er ook al onnodig veel tijd ingestoken.
Het zal de klant inderdaad een worst wezen, maar je wil trots zijn op je werk natuurlijk.
Mocht je een goede oplossing vinden, hoor ik het graag 🙌🏼
Headings hebben een eigen spacing en het heeft volgens mij niets te maken met de lineheigt. Er zit nou eenmaal ruimte om headings. Dit kun je afvangen door custom css want Is is niet een headapin setting voor zover ik weet. Je zou dit eena kunnen proberen:
h1, h2, h3, h4, h5, h6 {
margin-top: 1.5em;
margin-bottom: 0.5em;
}
uiteraard kun je het ook per H-grootte doen. Ipv een exacte waarde kun je ook een headspin token gebruiken zoals var(—hsp-s).
Rob de Wit Ik heb net nog even de inspector erbij gepakt. Het is de line-height die zorgt voor discrepanties. Ik ga eens kijken of ik kan werken met een negatieve marge rondom de headings. Ik wil namelijk niet in de line-height gaan zitten wroeten, omdat dit ingeregeld is door Headspin (lees: fluid).
Jordy Boutier Ah je hebt gelijk idd. Negatieve marge is wel nasty. Je kunt lineheight ook uitzetten in Headspin. Dan moet je dat in de global settings regelen maar dan ga je wellicht nat bij fluid typography. Gewoon een percentage doen denk ik? Bijv. 102%. Ik zit er ook vaak mee te stoeien.