Stories with Tag web typography

• Better typography with text-wrap pretty

  permalink

  Posted: 2025-04-08 15:10:29

  Verbose tl;dr

  WebKit now supports the text-wrap: pretty CSS property, improving typography for justified text. This property optimizes word spacing and hyphenation to produce more visually appealing and readable justified text, addressing issues like excessive whitespace or too many hyphenated lines. text-wrap: pretty aims to prioritize aesthetics and comprehension by intelligently balancing these typographic elements, leading to a more refined and professional look for justified text on the web. It provides a simple way for developers to enhance the appearance of justified text blocks without resorting to complex manual adjustments or JavaScript workarounds.

  The WebKit blog post entitled "Better Typography with text-wrap: pretty" elucidates advancements in text wrapping within the WebKit rendering engine, aiming to elevate typographic aesthetics and enhance readability on the web. Traditionally, web browsers have employed a simplistic approach to line breaking, primarily considering spaces and hyphens as viable breaking points. This rudimentary method often results in visually jarring disparities in line lengths, particularly noticeable in narrow columns or when using justified text alignment. This phenomenon, sometimes referred to as "rags" or "uneven text flow," detracts from the overall reading experience.

  The introduction of the text-wrap: pretty property addresses this issue by enabling the browser to utilize more sophisticated line-breaking algorithms. These algorithms consider a wider range of factors, such as the distribution of whitespace within a line and the overall visual balance of the paragraph, to determine optimal breaking points. This more nuanced approach results in a more aesthetically pleasing and balanced text flow, minimizing the stark variations in line lengths and producing a visually harmonious presentation. Furthermore, the blog post highlights that text-wrap: pretty aims to improve the balance between minimizing the number of lines (compactness) and achieving even line lengths (balance). It attempts to distribute lines more evenly without significantly increasing the total number of lines required.

  The post details how WebKit now supports several advanced typographic features enabled by text-wrap: pretty. These include micro-typography techniques like character-level kerning adjustments, which finely tune the spacing between individual characters to enhance readability and visual appeal. Additionally, text-wrap: pretty unlocks support for hyphenation in justified text, further refining the distribution of text within lines and reducing the occurrence of excessive whitespace. This contributes to a more consistent and polished appearance, especially in languages with long words or complex orthography. The blog post emphasizes that these enhancements are designed to seamlessly integrate with existing web standards, allowing web developers to leverage these features without requiring extensive modifications to their existing codebases. By adopting text-wrap: pretty, developers can significantly enhance the typographic quality of their web content, ultimately leading to a more enjoyable and engaging reading experience for users.

  • Typography
  • text-wrap
  • CSS
  • WebKit
  • Web Development
  • browser rendering
  • line breaking
  • text layout
  • pretty print
  • web typography

  Summary of Comments ( 137 )
  https://news.ycombinator.com/item?id=43622703

  Verbose tl;dr

  Hacker News users generally praised the new text-wrap: pretty CSS property for addressing a long-standing typography issue with justified text. Several commenters pointed out the benefits for accessibility, particularly for users with dyslexia or other cognitive differences, as the more consistent spacing makes text easier to parse. Some expressed concern about potential performance implications, especially with large blocks of text, but others downplayed these concerns given modern browser optimizations. A few users wished for further refinements, like hyphenation control or integration with existing text justification methods, but overall the sentiment was positive, viewing the feature as a significant improvement for web typography. The discussion also touched upon the subtle differences between text-wrap: pretty and text-justify: distribute, with some clarifying the distinct functionalities and advantages of each.

  The Hacker News post "Better typography with text-wrap: pretty" generated several comments discussing the new CSS property text-wrap: pretty. Many commenters express enthusiasm for the feature, viewing it as a significant improvement for web typography.

  Several commenters highlight the practical benefits of text-wrap: pretty, especially for East Asian languages. They point out how it intelligently handles word breaks and spacing, creating a more visually appealing and readable layout. One commenter specifically mentions the improvement in handling punctuation marks, which often caused awkward line breaks in the past. The enhanced control over widows and orphans, preventing single lines of text at the beginning or end of paragraphs, is also mentioned as a positive aspect.

  Some comments delve into the technical details of the implementation, discussing how it differs from existing methods of achieving similar results. One commenter mentions the challenges of balancing typographic beauty with performance, and praises the WebKit team for finding a good compromise. Another explains how text-wrap: pretty goes beyond simply preventing widows and orphans, and also considers other typographic nuances for a more refined appearance.

  The discussion also touches upon the broader implications of this feature for web design. Some commenters anticipate wider adoption of advanced typographic techniques now that they are easier to implement. Others express hope that this will encourage a greater focus on typography in web development overall.

  A few commenters raise questions and concerns. One asks about the potential impact on accessibility, particularly for users with dyslexia. Another wonders about browser compatibility and the timeline for wider adoption.

  Overall, the comments reflect a positive reception to the text-wrap: pretty property. Commenters see it as a valuable addition to CSS that will improve the quality of web typography, particularly for East Asian languages, by providing a more elegant and refined way to handle text flow and line breaks. While some practical questions remain about implementation and accessibility, the general sentiment is one of excitement and anticipation for its wider adoption.

• Kerning, the Hard Way

  permalink

  Posted: 2025-03-14 19:47:12

  Verbose tl;dr

  "Kerning, the Hard Way" details the painstaking process of manually kerning a font, specifically the author's Octet typeface. The post emphasizes that proper kerning isn't simply about consistent spacing, but about creating optically even gaps between letter pairs, which often requires asymmetrical adjustments. This involves meticulous visual examination of each pair and subtle nudging, a task complicated by the impact of neighboring letters and the varying shapes within a typeface. Ultimately, the article highlights the significant time investment and subjective judgment required for quality kerning, portraying it as a demanding yet essential step in font design for achieving visual harmony and readability.

  The blog post "Kerning, the Hard Way" by Rich Siegel delves into the intricate and often arduous process of kerning typefaces, specifically focusing on the challenges and nuances beyond simple pairwise adjustments. Siegel begins by establishing the foundational principle that kerning is not merely about achieving consistent spacing between individual letter pairs, but rather about creating a harmonious visual rhythm and balanced whitespace throughout entire words and lines of text. He illustrates this point with the example of "WAVE," explaining that adjusting the kerning between the 'W' and 'A' impacts the perceived spacing between the 'A' and 'V,' and so on, creating a chain reaction that requires a holistic approach.

  The author emphasizes the complexity introduced by the vast number of potential letter combinations in a typeface, explaining that adjusting each pair individually quickly becomes an impractical and unsustainable task. He highlights the difficulty of maintaining consistency across these numerous pairings, as subtle differences in letter shapes and the varying contexts they appear in can drastically affect the ideal kerning values. The blog post underscores the importance of considering the overall texture and grayscale of the text, arguing that a mechanically uniform approach often results in an uneven and aesthetically displeasing appearance.

  Siegel further elaborates on the concept of "classes" in font design, which group similar glyphs together to simplify the kerning process. He details how these classes, while helpful, also present their own set of challenges, as the inherent variations within a class can lead to inconsistencies when applying blanket kerning adjustments. He provides specific examples, like the subtle differences between a rounded 'o' and a more angular 'c,' to demonstrate the need for fine-tuning even within these pre-defined groups. This, in turn, necessitates careful consideration of the interplay between class-based kerning and individual pair adjustments to achieve optimal results.

  Finally, the post touches on the influence of optical illusions and the subjective nature of visual perception in kerning. Siegel argues that the eye doesn't perceive spacing in a purely mathematical way, and that what might appear mathematically even can actually look uneven to the human eye. This necessitates a degree of artistic judgment and an iterative process of refinement, relying on trained observation and meticulous adjustments to achieve a visually balanced and aesthetically pleasing result. Ultimately, Siegel presents kerning not as a simple mechanical task, but as a complex and nuanced craft requiring a deep understanding of typography, visual perception, and an immense amount of patience.

  • Typography
  • kerning
  • font design
  • type design
  • manual kerning
  • font engineering
  • optical kerning
  • metrics kerning
  • glyphs
  • fonts
  • web typography

  Summary of Comments ( 55 )
  https://news.ycombinator.com/item?id=43366479

  Verbose tl;dr

  HN users generally praised the article for its clear explanation of kerning and the complexities involved. Several commenters shared their own experiences with kerning, highlighting its subjective nature and the challenges of achieving optimal results. Some discussed the role of experience and "eye" in kerning, while others mentioned the usefulness of tools like kerning tables. A few users debated the merits of metric vs. optical kerning, and the impact of different rendering engines. One compelling comment thread explored the limitations of automated kerning and the importance of considering context and surrounding characters. Another pointed out the significance of kerning in non-Latin scripts, adding another layer of difficulty.

  The Hacker News post "Kerning, the Hard Way" (https://news.ycombinator.com/item?id=43366479) has several comments discussing the linked article about the complexities of kerning. Many commenters express appreciation for the deep dive into a topic often taken for granted.

  Several commenters discuss their personal experiences with kerning, highlighting the challenges and subtleties involved. One commenter recounts their time working with a typesetter who possessed an almost supernatural ability to kern by eye, emphasizing the skill and artistry that can be developed. Another commenter, identifying as a type designer, shares insights into the painstaking process of manually kerning fonts, noting the importance of context and the difficulty in achieving perfect kerning across all possible letter combinations.

  The discussion also delves into the technical aspects of kerning, with some commenters explaining the difference between kerning and tracking, and others discussing the role of font hinting and rendering engines in how kerning is ultimately displayed. A few commenters mention specific software tools and techniques used for kerning, both historically and in contemporary digital workflows.

  One particularly compelling comment thread explores the trade-offs between manual and automatic kerning. While acknowledging the advancements in automatic kerning algorithms, several commenters argue that the human eye and judgment are still essential for truly refined typography, especially in complex scripts or display settings. They suggest that automatic kerning can be a useful starting point, but manual adjustments are often necessary to achieve optimal results.

  The aesthetic considerations of kerning are also touched upon, with commenters debating the merits of "loose" versus "tight" kerning and the impact of kerning on readability and visual appeal. One commenter points out that kerning preferences can be subjective and culturally influenced.

  Finally, some commenters express a renewed appreciation for the craft of typography and the attention to detail required to create visually harmonious text. The article and subsequent discussion serve as a reminder of the often-unseen work that goes into making written language visually appealing and easy to read.