This week, I explored how design principles and CSS techniques work together to create visually balanced and readable web pages.<\/p>\n\n\n\n
From the \u201cDesign Principles I\u201d lecture, I learned that strong visual design relies on balance, gradation & contrast, and repetition & rhythm.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
Gradation & Contrast help establish visual hierarchy and guide user attention. By adjusting color, typography, and layout, designers can emphasize focal points and create depth.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
These principles are visible in professional websites that maintain clear structure, consistent typography, and visually engaging layouts.<\/p>\n\n\n\n
I also researched some CSS properties that improve text readability and presentation. The 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, I also explored the 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.<\/p>\n\n\n\n <\/p>\n\n\n\n https:\/\/medium.com\/@meyerweb\/what-is-the-css-ch-unit-20b999426ac0<\/a><\/p>\n\n\n\n https:\/\/css-tricks.com\/almanac\/properties\/t\/text-rendering\/<\/a><\/p>\n\n\n\n https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/text-rendering<\/a><\/p>\n\n\n\ntext-rendering: optimizeLegibility;<\/strong><\/code> property enhances letter spacing and ligatures, resulting in smoother and more readable text. Similarly, -webkit-font-smoothing: antialiased;<\/code> and -moz-osx-font-smoothing: grayscale;<\/code><\/strong> make text appear softer and cleaner by reducing rough pixel edges. <\/p>\n\n\n\noptimizeLegibility<\/code> may cause performance issues, rendering delays, or inconsistent text display.<\/p>\n\n\n\nch<\/code> unit<\/strong>, which measures width based on the size of the \u201c0\u201d character of the font. It can be useful for setting text-based widths, such as column lengths or input fields (e.g., width: 60ch;<\/code>). While I was trying to determine a character length that is optimal for users to read, I ended up discovering the ch<\/code> unit. However, it\u2019s not always reliable, since the width of \u201c0\u201d varies between fonts, which can cause layout inconsistencies. For this reason, it\u2019s best avoided for precise or fully responsive designs.<\/p>\n\n\n\nReferences<\/h6>\n\n\n\n