[{"data":1,"prerenderedAt":245},["ShallowReactive",2],{"search-all-posts":3,"settings-global":47,"\u002Fblog\u002F2020-04-29-adobe-xd-en-line-height":70},[4,10,17,23,28,34,39],{"title":5,"description":6,"path":7,"tags":8},"Responsive aspect ratio in CSS","Hoe maak je een responsive aspect ratio in CSS? Een aspect ratio is bijvoorbeeld toepasbaar op afbeeldingen, video’s, placeholders en iframes.","\u002Fblog\u002F2017-04-18-responsive-aspect-ratio-in-css",[9],"CSS",{"title":11,"description":12,"path":13,"tags":14},"Sketch plugin tips voor een snellere workflow","Voor het versnellen van je workflow in Sketch, de digitale ontwerptool voor designers, zijn de volgende plugins interessant.","\u002Fblog\u002F2018-04-21-sketch-plugin-tips-voor-een-snellere-workflow",[15,16],"Design","Productiviteit",{"title":18,"description":19,"path":20,"tags":21},"WebKit naar watchOS 5","Tijdens de WWDC 2018 van Apple was er een leuk nieuwtje. WebKit komt naar watchOS. Dit betekent dat je, zodra watchOS 5 uit is, web content kan gaan consumeren!","\u002Fblog\u002F2018-06-11-webkit-naar-watchos-5",[22],"Apple",{"title":24,"description":25,"path":26,"tags":27},"CSS variabelen en preprocessor variabelen","In CSS zijn variabelen er voornamelijk om consistent hergebruikt te worden. De voor- en nadelen.","\u002Fblog\u002F2019-01-20-css-variabelen-en-preprocessor-variabelen",[9],{"title":29,"description":30,"path":31,"tags":32},"Adobe XD en line-height","Als designer & developer werk je met verschillende tools. Hierbij loop je soms tegen dingen aan die je werkproces verstoren. Zo ook bij Adobe XD.","\u002Fblog\u002F2020-04-29-adobe-xd-en-line-height",[33,15],"Adobe",{"title":35,"description":36,"path":37,"tags":38},"Mijn favoriete Mac apps 2022","MacOS en apps, ik zou niet zonder kunnen. Persoonlijk gebruik ik een handje vol apps die wellicht voor jou ook de moeite waard zijn.","\u002Fblog\u002F2022-07-23-mijn-favoriete-mac-apps-2022",[16],{"title":40,"description":41,"path":42,"tags":43},"Shopify en shop munteenheid symbool","Shopify's Liquid shop object met geneste currency object shop.currency.symbol werkt niet. Als workaround kan je het cart object gebruiken.","\u002Fblog\u002F2022-08-07-shopify-en-shop-munteenheid-symbol",[44,45,46],"Shopify","Snippets","Notities",{"id":48,"title":49,"description":50,"extension":51,"github_url":52,"lang":53,"linkedin_url":54,"meta":55,"navigation":56,"noindex":67,"stem":68,"__hash__":69},"settings\u002Fsettings.yaml","Roy","Inspiratie en slimme oplossingen voor Shopify & tech.","yaml",null,"nl","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Froy-van-neden-10549761",{},[57,60,63,65],{"title":58,"to":59},"Home","\u002F",{"title":61,"to":62},"Blog","\u002Fblog",{"title":45,"to":64},"https:\u002F\u002Fgist.github.com\u002Froyvn",{"title":66,"to":54},"LinkedIn",false,"settings","-UwRePwvcv6cIOnnqX6vHLS1vLrRiCvBGOSHiNv7qA0",{"id":71,"title":29,"authors":72,"body":73,"date":236,"description":30,"draft":67,"extension":237,"image":238,"meta":239,"navigation":240,"noindex":67,"path":31,"readingTime":233,"seo":241,"stem":242,"tags":243,"__hash__":244},"posts\u002Fblog\u002F2020-04-29-adobe-xd-en-line-height.md",[49],{"type":74,"value":75,"toc":224},"minimark",[76,94,99,114,117,128,131,135,144,158,165,168,172,177,180,184,187,191,194,198,201,210],[77,78,79,80,87,88,93],"p",{},"Als designer & developer werk je met verschillende tools. Hierbij loop je soms tegen dingen aan die je werkproces verstoren. Zo ook bij ",[81,82,86],"a",{"href":83,"rel":84},"https:\u002F\u002Fwww.adobe.com\u002Fnl\u002Fproducts\u002Fxd.html",[85],"nofollow","Adobe XD",". In eerste instantie lijkt het een werkbare tool. Tijdens het aflezen van design specificaties viel het echter op dat XD apart met de ",[81,89,92],{"href":90,"rel":91},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fline-height",[85],"line-height"," en de daarmee verbonden hoogte van een tekst object omgaat.",[95,96,98],"h2",{"id":97},"probleem","Probleem",[77,100,101,102,107,108,113],{},"Een onderdeel van een goed ontwerp is bijvoorbeeld het doordacht toepassen van incrementele ",[81,103,106],{"href":104,"rel":105},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fpadding",[85],"padding"," en ",[81,109,112],{"href":110,"rel":111},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fmargin",[85],"margin",". Horizontaal maar ook verticaal. Verticaal is waar het bij XD met tekst en line-height niet helemaal lekker gaat.",[77,115,116],{},"Op het Adobe forum staat het volgende over hoe XD afmetingen behandelt.",[118,119,120],"blockquote",{},[77,121,122,123],{},"XD currently uses a virtual pixel for most of its measurements (including font size), which should be the same unit of measure as a CSS pixel, or most measurements in iOS. It’s roughly equal to 1 physical pixel on a 72 dpi monitor (and, incidentally, a point).\n",[81,124,127],{"href":125,"rel":126},"https:\u002F\u002Fforums.adobe.com\u002Fthread\u002F2140211",[85],"Adobe forum",[77,129,130],{},"Op basis hiervan verwacht je dat afmetingen overeen moeten komen met een CSS pixel.",[95,132,134],{"id":133},"voorbeeld","Voorbeeld",[77,136,137,138,143],{},"Stel dat je voor een website een titel van 1 regel ontwerpt met een font-size van 24 pixels en een line-height van 32 pixels. De titel zou zoals je verwacht in CSS 32 pixels hoog moeten zijn. Zo werkt het in je browser. Als de titel over twee regels gaat zou dat 32+32=64 pixels hoog moeten worden. Logisch toch? Adobe XD denkt er anders over, namelijk 40 pixels voor een enkele regel en 72 pixels voor een dubbele (afhankelijk van lettertype). Dat is een verschil van 8 pixels 😬 (",[81,139,142],{"href":140,"rel":141},"https:\u002F\u002Ffonts.google.com\u002Fspecimen\u002FPoppins",[85],"lettertype Poppins",").",[145,146,148],"div",{"style":147},"width:100%;height:0;padding-bottom:73%;position:relative;",[149,150],"iframe",{"allow-full-screen":151,"className":152,"frame-border":154,"height":155,"src":156,"style":157,"width":155},"true",[153],"giphy-embed","0","100%","https:\u002F\u002Fgiphy.com\u002Fembed\u002FpPhyAv5t9V8djyRFJH","position:absolute",[77,159,160],{},[81,161,164],{"href":162,"rel":163},"https:\u002F\u002Fgiphy.com\u002Fgifs\u002Fwtf-obama-wth-pPhyAv5t9V8djyRFJH",[85],"via GIPHY",[77,166,167],{},"Niet te begrijpen voor een UX\u002FUI design tool.",[95,169,171],{"id":170},"gevolgen","Gevolgen",[173,174,176],"h3",{"id":175},"ontwerp","Ontwerp",[77,178,179],{},"Omdat de line-height en de daaraan verbonden hoogte niet klopt is het toepassen van verticale ruimte en het positioneren van elementen niet eenvoudig meer. De hoogte klopt niet, dus de Y-as positie van een aangrenzend component voor de juiste margin of padding ook niet.",[181,182],"video",{":autoplay":151,":controls":151,":loop":151,":muted":151,"src":183},"\u002Fadobe-xd-line-height-issue.mp4",[77,185,186],{},"De hoogte klopt niet op basis van de ingevoerde line-height en regels",[173,188,190],{"id":189},"overdracht","Overdracht",[77,192,193],{},"Als designer kan je het probleem rechttrekken door handmatig elk element een beetje te nudgen. Tijdsintensief, maar dat neemt niet weg dat ook de overdracht naar mede developers extra aandacht nodig heeft om er voor te zorgen dat een design goed geïmplementeerd wordt.",[95,195,197],{"id":196},"samenvattend","Samenvattend",[77,199,200],{},"Adobe XD behandelt de hoogte van een tekst element, die mede ontstaat door de line-height, niet zoals CSS pixels. De hoogte klopt niet waardoor eenvoudige design specificaties lastiger af te lezen zijn. Ook moet er extra opgelet worden bij het consistent toepassen van padding, margin en meer.",[77,202,203,204,209],{},"Vind je ook dat Adobe XD line-height en de daarmee verbonden hoogte moet functioneren zoals op het web? Stem dan op de volgende ",[81,205,208],{"href":206,"rel":207},"https:\u002F\u002Fadobexd.uservoice.com\u002Fforums\u002F353007-adobe-xd-feature-requests\u002Fsuggestions\u002F13813872-line-height-should-function-as-it-does-on-the-web",[85],"feature request"," bij het Adobe forum.",[77,211,212,213,107,218,223],{},"Gelukkig hebben andere tools zoals bijvoorbeeld ",[81,214,217],{"href":215,"rel":216},"https:\u002F\u002Fwww.sketch.com\u002F",[85],"Sketch",[81,219,222],{"href":220,"rel":221},"https:\u002F\u002Fwww.figma.com\u002F",[85],"Figma"," niet last van dit probleem ❤️.",{"title":225,"searchDepth":226,"depth":226,"links":227},"",2,[228,229,230,235],{"id":97,"depth":226,"text":98},{"id":133,"depth":226,"text":134},{"id":170,"depth":226,"text":171,"children":231},[232,234],{"id":175,"depth":233,"text":176},3,{"id":189,"depth":233,"text":190},{"id":196,"depth":226,"text":197},"2019-04-29T13:00:00.000Z","md","\u002Fadobe-xd-en-line-height.jpg",{},true,{"title":29,"description":30},"blog\u002F2020-04-29-adobe-xd-en-line-height",[33,15],"2SO-avHP9vRLBot4Z-TgLooCQBgf-18-pXoykh2S7tw",1780848345641]