What I learned this week.. (Class 5)
This week, I explored how design principles and CSS techniques work together to create visually balanced and readable web pages.
Design Principles
From the “Design Principles I” lecture, I learned that strong visual design relies on balance, gradation & contrast, and repetition & rhythm.
Balance ensures that visual weight is evenly distributed across a layout, creating harmony and clarity. It can be symmetric, asymmetric, radial, or crystallographic, depending on how elements are arranged. Factors such as position, size, color, space, and texture all influence balance.
Gradation & Contrast help establish visual hierarchy and guide user attention. By adjusting color, typography, and layout, designers can emphasize focal points and create depth.
Repetition & Rhythm bring consistency and unity to a design. Repeating visual elements like color, typography, or icons builds familiarity and improves usability across a site.
These principles are visible in professional websites that maintain clear structure, consistent typography, and visually engaging layouts.
Research in some CSS properties
I also researched some CSS properties that improve text readability and presentation. The text-rendering: optimizeLegibility; property enhances letter spacing and ligatures, resulting in smoother and more readable text. Similarly, -webkit-font-smoothing: antialiased; and -moz-osx-font-smoothing: grayscale; make text appear softer and cleaner by reducing rough pixel edges.
These properties are used by popular websites such as Apple, Medium, CNN, and The Guardian to achieve a polished typographic look. However, they should be applied cautiously: excessive use can make text appear thinner or inconsistent across devices and browsers, and on some mobile devices or older browsers, optimizeLegibility may cause performance issues, rendering delays, or inconsistent text display.
I also explored the ch unit, which measures width based on the size of the “0” character of the font. It can be useful for setting text-based widths, such as column lengths or input fields (e.g., width: 60ch;). While I was trying to determine a character length that is optimal for users to read, I ended up discovering the ch unit. However, it’s not always reliable, since the width of “0” varies between fonts, which can cause layout inconsistencies. For this reason, it’s best avoided for precise or fully responsive designs.
Even though these properties have drawbacks, it was interesting and valuable to research and experiment with them, as they offer insight into how subtle CSS techniques can enhance typography and user experience.
References
https://medium.com/@meyerweb/what-is-the-css-ch-unit-20b999426ac0
https://css-tricks.com/almanac/properties/t/text-rendering/
https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering
https://medium.com/@wblekhoa/talk-aboutthe-optimal-length-of-text-in-ux-ui-525e689f0b71