--- title: Setting type like a printed page | daily.dev description: A graphic designer with print roots walks through six CSS typographic controls that bring professional typesetting to the web: fluid type scales with clamp(),... canonical: https://daily.dev/posts/setting-type-like-a-printed-page-z83t7dy2y twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Setting type like a printed page | daily.dev og:description: A graphic designer with print roots walks through six CSS typographic controls that bring professional typesetting to the web: fluid type scales with clamp(),... og:url: https://daily.dev/posts/setting-type-like-a-printed-page-z83t7dy2y og:image: https://api.daily.dev/og/posts/z83t7Dy2y.png og:image:alt: Setting type like a printed page og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Setting type like a printed page **[Creative Design Technologist](https://daily.dev/sources/carmenansio)** · 12 min read · 9 upvotes · 3 comments ## Summary A graphic designer with print roots walks through six CSS typographic controls that bring professional typesetting to the web: fluid type scales with clamp(), balanced headings via text-wrap: balance, widow prevention with text-wrap: pretty, drop caps using initial-letter, optical sizing with font-optical-sizing: auto, and hanging punctuation. Each technique is explained with its print origins, practical CSS code, browser support caveats, and a progressive enhancement strategy. The piece emphasizes that all controls ship off by default and degrade gracefully, requiring no JavaScript. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do I stop headlines from leaving a single word alone on the last line in CSS? Use text-wrap: balance on the heading element, which evens out line lengths across the whole block instead of greedily filling each line and dumping the leftover onto the last line. It's best applied to headings, blockquotes, and captions rather than body text, since browsers like Chromium cap balancing at around six lines because the layout cost grows with line count; past that limit it silently falls back to a normal rag. _daily.dev surfaces practical CSS techniques like this for developers refining real-world typography._ ### What is the difference between text-wrap: balance and text-wrap: pretty in CSS? text-wrap: balance evens out line lengths across an entire block and is meant for short text like headings, capped around six lines in Chromium for performance reasons. text-wrap: pretty is tuned for long text instead, leaving most of a paragraph untouched and only adjusting the final few lines to avoid orphans and widows, re-evaluating continuously as the column width changes. _developers weighing CSS text-wrapping options can track browser support nuances like this on daily.dev._ ### Does initial-letter work in Firefox for CSS drop caps? No, Firefox does not support the initial-letter CSS property at all, while Chrome supports it (version 110+) and Safari requires the -webkit-initial-letter prefix (from version 9). Because it's applied through the ::first-letter pseudo-element, the fallback is graceful: Firefox users simply see a normal-sized, colored first letter instead of a broken layout, making it safe to ship as progressive enhancement. _anyone shipping cross-browser CSS drop caps can check compatibility gaps like this on daily.dev._ ## Community discussion Top comments from developers on daily.dev. **@allinonetools** · 3 upvotes > `text-wrap: balance` has been one of those tiny CSS changes that makes a surprisingly big visual difference. Nice to see browser typography finally catching up with print thinking. **@agustinbarrientos** · 0 upvotes > Good, maybe we can finally stop faking drop caps with floats. **@springtofigh** · 0 upvotes > It was an interesting review👌👏 ## Similar posts on daily.dev - [Chris’ Corner: Type](https://daily.dev/posts/chris-corner-type-k8fst8gqg) · CodePen · 0 upvotes · 0 comments - [Responsive and Fluid Typography with Baseline CSS Features](https://daily.dev/posts/responsive-and-fluid-typography-with-baseline-css-features-rnoepawxs) · OddBird · 4 upvotes · 0 comments - [Building Fluid Typographic Scales with clamp\(\) and :heading\(\)](https://daily.dev/posts/building-fluid-typographic-scales-with-clamp-and-heading--nxpmqzaqh) · Always Twisted · 0 upvotes · 0 comments - [Headings: Semantics, Fluidity, and Styling — Oh My\!](https://daily.dev/posts/headings-semantics-fluidity-and-styling-oh-my--w2kfkv1uv) · CSS-Tricks · 13 upvotes · 1 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#css](https://daily.dev/tags/css), [#typography](https://daily.dev/tags/typography) [View this post on daily.dev](https://daily.dev/posts/setting-type-like-a-printed-page-z83t7dy2y) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Setting type like a printed page","url":"https://daily.dev/posts/setting-type-like-a-printed-page-z83t7dy2y","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/setting-type-like-a-printed-page-z83t7dy2y"},"datePublished":"2026-07-12T09:35:14.744Z","dateModified":"2026-09-14T08:39:56.700Z","description":"A graphic designer with print roots walks through six CSS typographic controls that bring professional typesetting to the web: fluid type scales with clamp(),...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/b9364f353191b5ec1bb8426ac3a310bd?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/b9364f353191b5ec1bb8426ac3a310bd?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Creative Design Technologist","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Creative Design Technologist","logo":"https://media.daily.dev/image/upload/s---mEUJS2U--/f_auto,q_auto/v1783236228/logos/carmenansio","url":"https://daily.dev/sources/carmenansio"},"commentCount":3,"discussionUrl":"https://daily.dev/posts/setting-type-like-a-printed-page-z83t7dy2y","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":9},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":3}],"keywords":"webdev,css,typography","timeRequired":"PT12M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Creative Design Technologist","item":"https://daily.dev/sources/carmenansio"},{"@type":"ListItem","position":3,"name":"Setting type like a printed page"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/setting-type-like-a-printed-page-z83t7dy2y","comment":[{"@type":"Comment","text":"text-wrap: balance has been one of those tiny CSS changes that makes a surprisingly big visual difference. Nice to see browser typography finally catching up with print thinking.","datePublished":"2026-07-13T03:11:18.532Z","url":"https://daily.dev/posts/z83t7Dy2y#c-my02Om7ZP","author":{"@type":"Person","name":"AllInOneTools","url":"https://daily.dev/allinonetools","image":"https://media.daily.dev/image/upload/s--4ZT8QlF0--/f_auto/v1769790028/avatars/avatar_igzBsWloJeaegzm9bQltZ?_a=BAMAMiiu0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}},{"@type":"Comment","text":"Good, maybe we can finally stop faking drop caps with floats.","datePublished":"2026-08-01T20:04:38.578Z","url":"https://daily.dev/posts/z83t7Dy2y#c-uEOoV45dQ","author":{"@type":"Person","name":"Agustin Barrientos","url":"https://daily.dev/agustinbarrientos","image":"https://media.daily.dev/image/upload/s--5ayxQnqn--/f_auto/v1788281802/avatars/avatar_wQYYVe5Tbj0NJ7C7qPoa8?_a=BAMAMicg0"}},{"@type":"Comment","text":"It was an interesting review👌👏","datePublished":"2026-07-12T14:26:11.948Z","dateModified":"2026-07-12T14:26:36.393Z","url":"https://daily.dev/posts/z83t7Dy2y#c-Dh67VzkRs","author":{"@type":"Person","name":"Spring Tofigh","url":"https://daily.dev/springtofigh","image":"https://avatars.githubusercontent.com/u/90114320?v=4"}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/setting-type-like-a-printed-page-z83t7dy2y#faq","mainEntity":[{"@type":"Question","name":"How do I stop headlines from leaving a single word alone on the last line in CSS?","acceptedAnswer":{"@type":"Answer","text":"Use text-wrap: balance on the heading element, which evens out line lengths across the whole block instead of greedily filling each line and dumping the leftover onto the last line. It's best applied to headings, blockquotes, and captions rather than body text, since browsers like Chromium cap balancing at around six lines because the layout cost grows with line count; past that limit it silently falls back to a normal rag. daily.dev surfaces practical CSS techniques like this for developers refining real-world typography."}},{"@type":"Question","name":"What is the difference between text-wrap: balance and text-wrap: pretty in CSS?","acceptedAnswer":{"@type":"Answer","text":"text-wrap: balance evens out line lengths across an entire block and is meant for short text like headings, capped around six lines in Chromium for performance reasons. text-wrap: pretty is tuned for long text instead, leaving most of a paragraph untouched and only adjusting the final few lines to avoid orphans and widows, re-evaluating continuously as the column width changes. developers weighing CSS text-wrapping options can track browser support nuances like this on daily.dev."}},{"@type":"Question","name":"Does initial-letter work in Firefox for CSS drop caps?","acceptedAnswer":{"@type":"Answer","text":"No, Firefox does not support the initial-letter CSS property at all, while Chrome supports it (version 110+) and Safari requires the -webkit-initial-letter prefix (from version 9). Because it's applied through the ::first-letter pseudo-element, the fallback is graceful: Firefox users simply see a normal-sized, colored first letter instead of a broken layout, making it safe to ship as progressive enhancement. anyone shipping cross-browser CSS drop caps can check compatibility gaps like this on daily.dev."}}]} ```