[{"data":1,"prerenderedAt":216},["ShallowReactive",2],{"DefaultLayouten":3,"language-blog-slug-responsive-text-daft-punk-style-i18n-slugs":-1,"language-blog-slug-en-responsive-text-daft-punk-style":134},{"app":4,"menu":31,"footer":66},{"githubUrl":5,"youtubeUrl":6,"linkedinUrl":7,"phoneNumber":8,"emailAddress":9,"legal":10,"addresses":20},"https:\u002F\u002Fgithub.com\u002Fvoorhoede\u002F","https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCzHuhQVYFRixtQN2-swcuGg","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fde-voorhoede","+31 20 2610 954","post@voorhoede.nl",[11,14,17],{"title":12,"value":13},"KvK","56017235",{"title":15,"value":16},"BTW","NL851944620B01",{"title":18,"value":19},"IBAN","NL14TRIO0320142078",[21,26],{"address":22,"city":23,"googleMapsLink":24,"postalCode":25},"Koivistokade 70","Amsterdam","https:\u002F\u002Fwww.google.com\u002Fmaps\u002Fplace\u002FDe+Voorhoede+%7C+Front-end+Development\u002F@52.396847,4.8700823,17z\u002Fdata=!3m1!4b1!4m5!3m4!1s0x47c5e21d502d2d59:0xbf570944a96ebf45!8m2!3d52.347647!4d4.8502154","1013 BB",{"address":27,"city":28,"googleMapsLink":29,"postalCode":30},"Koornmarkt 22","Delft","https:\u002F\u002Fwww.google.nl\u002Fmaps\u002Fplace\u002FKoornmarkt+22,+2611+EG+Delft\u002F@52.0093477,4.3573054,17z\u002F","2611 EG",{"title":32,"callToActions":33,"links":39},"Site Menu",[34],{"id":35,"title":36,"link":37},"163140902","Contact",{"__typename":38},"ContactRecord",[40,46,51,56,61],{"id":41,"title":42,"link":43},"163140904","Impact",{"__typename":44,"slug":45},"PageRecord","impact",{"id":47,"title":48,"link":49},"163140905","Services",{"__typename":50},"ServiceOverviewRecord",{"id":52,"title":53,"link":54},"163140906","Cases",{"__typename":55},"CaseOverviewRecord",{"id":57,"title":58,"link":59},"163140908","About us",{"__typename":44,"slug":60},"about-us",{"id":62,"title":63,"link":64},"d6WdFJq2SOuc3dWtpibbXQ","Work at",{"__typename":44,"slug":65},"work-at",{"links":67,"copyrightTitle":93,"copyrightLabel":94,"copyrightLink":95,"privacyTitle":96,"privacyLabel":97,"privacyLink":98,"certificatesGrid":99},[68,71,74,77,82,85,88],{"id":69,"title":42,"link":70},"144185264",{"__typename":44,"slug":45},{"id":72,"title":48,"link":73},"144185265",{"__typename":50},{"id":75,"title":53,"link":76},"144185266",{"__typename":55},{"id":78,"title":79,"link":80},"144185267","Blog",{"__typename":81},"BlogPostOverviewRecord",{"id":83,"title":58,"link":84},"144185268",{"__typename":44,"slug":60},{"id":86,"title":36,"link":87},"144185269",{"__typename":38},{"id":89,"title":90,"link":91},"144185270","FAQ",{"__typename":44,"slug":92},"faq","Creative Commons licence and disclaimer","CC BY 4.0","https:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby\u002F4.0\u002F","De Voorhoede privacy statement (pdf)","Privacy statement","https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1763455455-vh-isms-006-privacy-statement-de-voorhoede-en.pdf",[100,112,123],{"id":101,"image":102,"link":107},"Xq4bBfg_TZ6Fkjax9mkbLQ",{"url":103,"alt":104,"width":105,"height":106},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353463-b-corp-logo-black-rgb.png","B Corp logo",404,680,{"__typename":108,"id":109,"title":110,"url":111},"ExternalLinkRecord","fGW1ak8XQYaYDLkBSyncog","B Corp","https:\u002F\u002Fwww.bcorporation.net\u002Fen-us\u002Ffind-a-b-corp\u002Fcompany\u002Fde-voorhoede\u002F",{"id":113,"image":114,"link":119},"c5mCXRTiSraRIB25fw1p7Q",{"url":115,"alt":116,"width":117,"height":118},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353461-dda-boxlogo-black.png","Dutch Digital Agencies logo",627,480,{"__typename":108,"id":120,"title":121,"url":122},"P6Jh7B0cTv2cKyNEeKVWVQ","Dutch Digital Agencies","https:\u002F\u002Fdutchdigitalagencies.com\u002Fleden\u002Fde-voorhoede\u002F",{"id":124,"image":125,"link":129},"MT5SCyNxSTSr_v5eeATMZw",{"url":126,"alt":127,"width":128,"height":128},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1775730283-dnv.png","DNV logo",518,{"id":130,"title":131,"link":132},"BRtNB5HnT5i-7HkA8IYzBw","DIV",{"__typename":44,"slug":133},"impact\u002Fdigitale-producten-privacy-by-design",{"page":135},{"slug":136,"i18nSlugs":137,"social":140,"title":145,"subtitle":79,"isArchived":146,"headerIllustration":147,"date":148,"authors":149,"introTitle":158,"items":159,"pivots":203,"relatedBlogPosts":214,"tags":215,"onMountedScript":152,"onUnmountedScript":152},"responsive-text-daft-punk-style",[138],{"locale":139,"value":136},"en",{"title":141,"description":142,"image":143},"Responsive Text, Daft Punk Style | De Voorhoede","How do you want your text to behave responsively?\nWrap it, Cut it, Scroll it, Calc it, Stretch it!",{"url":144},"https:\u002F\u002Fwww.datocms-assets.com\u002F2850\u002F1506149533-responsive-text-daft-punk-style.jpg","Responsive Text, Daft Punk Style",true,null,"2019-02-14T13:10:15.608+01:00",[150],{"name":151,"lastName":152,"slug":153,"image":154},"Sanne","","sanne",{"url":155,"alt":147,"width":156,"height":157},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534636-placeholder.jpg",1235,1646,"Wrap it, Cut it, Scroll it, Calc it, Stretch it",[160,164,173,177,180,184,188,192,197,200],{"__typename":161,"id":162,"title":152,"body":163},"TextSectionRecord","458505","\u003Cp>\u003Cspan>Since viewports vary in size indefinitely, the length of a line can quickly become too long (or too short). Here's a couple of possibilities to handle this, \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=D8K90hX4PrE\">Daft Punk Style\u003C\u002Fa>\u003Cspan>:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":165,"id":166,"image":167,"caption":168,"fullWidth":171,"captionPosition":172},"ImageRecord","401447",{"url":144,"alt":168,"width":169,"height":170},"Daft Punk Technologic subtitled Wrap it, Cut it, Scroll it, Calc it, Stretch it.",2244,1542,false,"bottom",{"__typename":161,"id":174,"title":175,"body":176},"584378","Wrap it","\u003Cp>By default the browser wraps texts on overflow.\u003C\u002Fp>\n\u003Cfigure class=\"content-figure\">\n\u003Cdiv class=\"demo-content demo-content--wrap\">\n\u003Cp>How do you want your text to behave responsively?\u003C\u002Fp>\n\u003Cp>Wrap it!\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cfigcaption>By default text wraps on overflow\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>",{"__typename":161,"id":178,"title":152,"body":179},"584379","\u003Cp>You can prevent long strings of text from overflowing its content box:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>use the \u003Ccode>overflow-wrap: break-word;\u003C\u002Fcode> rule in CSS to tell the browser to insert a line break.\u003C\u002Fli>\n\u003Cli>use the \u003Ccode>hyphens\u003C\u002Fcode> property to specify that a word should be hyphenated. Setting this property to \u003Ccode>auto\u003C\u002Fcode> tells the browser to insert hyphens at an appropriate point, \u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen\u002Fdocs\u002FWeb\u002FCSS\u002Fhyphens#Browser_compatibility\">if the browser supports it\u003C\u002Fa>.\u003C\u002Fli>\n\u003Cli>use a hard (\u003Ccode>-\u003C\u002Fcode>) or soft (\u003Ccode>­\u003C\u002Fcode>) hyphen to manually specify line break points. The 'hard' hyphen will always be rendered, even if the line is not actually broken at that point. A 'soft' hyphen is not displayed unless a break is inserted, in which case a dash will appear.\u003C\u002Fli>\n\u003C\u002Ful>",{"__typename":161,"id":181,"title":182,"body":183},"584380","Cut it","\u003Cp>If it's okay for text to be partially hidden, you can set the \u003Ccode>overflow: hidden;\u003C\u002Fcode> rule. Modern browsers support truncating text using an ellipsis, for a more elegant way of cutting of text. Besides hiding overflow, you need to prevent wrapping on white spaces and set \u003Ccode>text-overflow: ellipsis;\u003C\u002Fcode> on the element to truncate.\u003C\u002Fp>\n\u003Cfigure class=\"content-figure\">\n\u003Cdiv class=\"demo-content demo-content--cut\">\n\u003Cp>How do you want your text to behave responsively?\u003C\u002Fp>\n\u003Cp>Cut it!\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cfigcaption>Truncate text using ellipsis\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>",{"__typename":161,"id":185,"title":186,"body":187},"584381","Scroll it","\u003Cp>When you want text to always be on one line and fully readable, you can set the \u003Ccode>overflow-x: scroll;\u003C\u002Fcode> and \u003Ccode>white-space: nowrap;\u003C\u002Fcode> rule. Add a subtle shadow effect to let users know there's more content.\u003C\u002Fp>\n\u003Cfigure class=\"content-figure\">\n\u003Cdiv class=\"demo-content demo-content--scroll\">\n\u003Cp>How do you want your text to behave responsively?\u003C\u002Fp>\n\u003Cp>Scroll it!\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cfigcaption>Scroll text on single line\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>",{"__typename":161,"id":189,"title":190,"body":191},"584382","Calc it","\u003Cp>A font-size declared with viewport units will scale depending on the browser's viewport dimensions. By combining viewport units with \u003Ccode>calc()\u003C\u002Fcode> we can create fluid typography that scales well between specific values, within a specific viewport range.\u003C\u002Fp>",{"__typename":193,"id":194,"language":195,"body":196},"CodeBlockRecord","584383","css",":root {\n  --font-range: 24 - 16;\n  --min-font: 1.2em;\n  --min-viewport: 400px;\n  --viewport-range: 800 - 400;\n}\n\nh2 { \n  font-size: calc( \n   var(--min-font) + var(--font-range) \n    * (100vw - var(--min-viewport)) \n   \u002F var(--viewport-range) ); \n}",{"__typename":161,"id":198,"title":152,"body":199},"584384","\u003Cp>By setting a minimum and maximum font size and the viewport range over which the font should scale, we don't end up with too small or ridiculously large font sizes.\u003C\u002Fp>\n\u003Cfigure class=\"content-figure\">\n\u003Cdiv class=\"demo-content demo-content--calc\">\n\u003Cp>How do you want your text to behave responsively?\u003C\u002Fp>\n\u003Cp>Calc it!\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cfigcaption>Using \u003Ccode>calc()\u003C\u002Fcode> to create fluid typography\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Cp>Read more about \u003Ca href=\"https:\u002F\u002Fwww.smashingmagazine.com\u002F2016\u002F05\u002Ffluid-typography\u002F\">Fluid Typography on Smashing Magazine\u003C\u002Fa>.\u003C\u002Fp>",{"__typename":161,"id":201,"title":152,"body":202},"584385","\u003Cp>Unfortunately, browsers have no built-in method to stretch text to fit its parent element. So we need a bit of script to make this work. \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Frikschennink\u002Ffitty\">Fitty\u003C\u002Fa> is a nice little script that does exactly this:\u003C\u002Fp>\n\u003Cfigure class=\"content-figure\">\n\u003Cdiv class=\"demo-content demo-content--stretch\">\n\u003Cdiv>\n\u003Cp data-fitty=\"\">How do you want your text to behave responsively?\u003C\u002Fp>\n\u003Cp data-fitty=\"\">Stretch it!\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cfigcaption>Fitty stretches text to fit its parent\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Cp>Following the idea that content is key, typography is one of the most important parts of any website's design. So make sure you take some time to think through and discuss how your text should behave responsively.\u003C\u002Fp>\n\u003Cp>If you're playing around with typography on the web, you may also be interested in \u003Ca href=\"https:\u002F\u002Fwww.voorhoede.nl\u002Fen\u002Fblog\u002Faddressing-the-fout-reflow-issue\u002F\">addressing the Flash of Unstyled Text (FOUT) reflow issue\u003C\u002Fa>.\u003C\u002Fp>",[204],{"title":205,"body":206,"links":207,"mailchimpValue":152,"mailchimpName":152,"mailchimpId":152,"formType":152,"contactPerson":147},"Also in love with the web?","\u003Cp>For us, that’s about technology and user experience. Fast, available for all, enjoyable to use. And fun to build. This is how our team bands together, adhering to the same values, to make sure we achieve a solid result for clients both large and small. Does that fit you?\u003C\u002Fp>\n",[208],{"__typename":209,"id":210,"title":211,"link":212},"InternalLinkRecord","163140992","Join our team",{"__typename":44,"slug":213},"jobs",[],[],1776256175542]