Tag

Typography

1 views collected around this technical thread.

Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jan 26, 2024 · Frontend Development

Visual Hierarchy in UI Design: Using Font Weight, Color, and Layout to Emphasize Elements

This article explains how visual hierarchy in UI design can be achieved by strategically using font weight, color, and contrast instead of size, offering practical examples of emphasizing primary elements, weakening secondary ones, handling label-value patterns, and applying semantic HTML for clearer, more effective interfaces.

TypographyUI designcolor contrast
0 likes · 8 min read
Visual Hierarchy in UI Design: Using Font Weight, Color, and Layout to Emphasize Elements
Kuaishou Tech
Kuaishou Tech
Apr 1, 2022 · Fundamentals

Understanding Glyph Metrics and Text Layout in the Y‑tech Cangjie Engine

This article explains the core concepts of glyph metrics, horizontal and vertical text layout, kerning, line breaking, and alignment techniques used by the Y‑tech Cangjie engine to provide rich text effects for video editing applications.

Text LayoutTypographyY‑tech
0 likes · 7 min read
Understanding Glyph Metrics and Text Layout in the Y‑tech Cangjie Engine
Sohu Tech Products
Sohu Tech Products
Jan 5, 2022 · Frontend Development

Key Takeaways from the CSS Annual Report – Layout, Graphics, Interaction, Typography and Emerging Features

The article reviews the latest CSS Annual Report, highlighting popular layout techniques such as Flex, Grid and Subgrid, new graphic capabilities like shape‑outside and blend modes, interactive properties including scroll‑snap and container queries, as well as typography advances, preprocessors, frameworks, CSS‑in‑JS trends and award‑winning features, all illustrated with real code examples.

CSSGraphicsTypography
0 likes · 24 min read
Key Takeaways from the CSS Annual Report – Layout, Graphics, Interaction, Typography and Emerging Features
KooFE Frontend Team
KooFE Frontend Team
Dec 12, 2021 · Frontend Development

Mastering a Modern CSS Reset: 11 Essential Rules Explained

This tutorial walks through a custom CSS reset, explaining each of the eleven concise rules—including box‑sizing, margin removal, height handling, line‑height, font smoothing, media defaults, form inheritance, overflow handling, and root isolation—while providing clear code examples and visual illustrations to improve both developer experience and user accessibility.

AccessibilityBox-sizingCSS
0 likes · 18 min read
Mastering a Modern CSS Reset: 11 Essential Rules Explained
Baidu Geek Talk
Baidu Geek Talk
Sep 15, 2021 · Frontend Development

Technical Overview of Baidu Reading/Wenku Cross‑Platform Layout Engine

Baidu Reading/Wenku’s cross‑platform layout engine delivers professional book‑level typesetting on Android and iOS by using a single native engine that parses diverse formats into an abstract DOM, generates a memory‑resident layout description, and supports relative, multi‑directional, and reusable layout techniques for high‑quality, adaptive document rendering.

Typographycross‑platformdocument rendering
0 likes · 11 min read
Technical Overview of Baidu Reading/Wenku Cross‑Platform Layout Engine
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Apr 6, 2021 · Frontend Development

Boost Your Front-End UI: Master Layout, Alignment, and Color in 3 Simple Principles

This article teaches front‑end developers how to improve UI quality by applying three core layout principles—block segmentation, proper alignment, and effective color usage—backed by practical examples, commit‑message standards, and color‑model insights.

Typographycolor theorydesign
0 likes · 10 min read
Boost Your Front-End UI: Master Layout, Alignment, and Color in 3 Simple Principles
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Sep 9, 2020 · Frontend Development

Understanding Font Metrics and Vertical Alignment for Accurate CSS Vertical Centering

The article explains why common CSS vertical‑centering tricks can leave pixel offsets when fonts differ, details how font metrics such as ascent, descent, and x‑height determine the true baseline, and provides a calculable vertical‑align offset method—while noting its metric‑gathering overhead and anticipating native Houdini support.

CSSFont MetricsTypography
0 likes · 16 min read
Understanding Font Metrics and Vertical Alignment for Accurate CSS Vertical Centering
360 Tech Engineering
360 Tech Engineering
Oct 9, 2019 · Fundamentals

TrueType Font Fundamentals: From Design to Rendering

This article explains how TrueType fonts are designed, digitized into FUnit‑based outlines, scaled to device pixels, and rendered through grid‑fitting and scan‑conversion, covering key concepts such as em squares, upem, ppem, instruction programs, and graphics state.

Digital FontsFUnitFont Rendering
0 likes · 14 min read
TrueType Font Fundamentals: From Design to Rendering
流利说 Design Team
流利说 Design Team
Sep 10, 2019 · Fundamentals

Master the 4 Core Principles of Graphic Design: A Practical Learning Plan

This article presents a comprehensive graphic design learning plan that covers the four fundamental design principles, the role of proportion and grid systems, the effective use of point, line, and plane, and practical tips with visual examples to help designers build a solid design foundation.

Typographydesign principlesgraphic design
0 likes · 8 min read
Master the 4 Core Principles of Graphic Design: A Practical Learning Plan
Yuewen Frontend Team
Yuewen Frontend Team
Jun 26, 2018 · Frontend Development

Why 16px Should Be the Default Font Size for Front‑End Design

The article explores how front‑end typography standards—covering base font size, font‑scale formulas, and line‑height rules—can be derived from visual ergonomics, mathematical ratios, and practical engineering constraints, ultimately recommending 16 px as the optimal base size and a line‑height of font‑size + 8.

CSSDesign GuidelinesTypography
0 likes · 17 min read
Why 16px Should Be the Default Font Size for Front‑End Design
AntTech
AntTech
Jan 9, 2018 · Frontend Development

Ant Design 3.0: The Story Behind the Design System and Its Principles

The article recounts the first Ant Financial SEE Conf 2018, then details the conception, mathematical foundations, and practical implementation of Ant Design 3.0's design system—including design language, assets, typography, layout, and color—aimed at improving efficiency, consistency, and user experience for enterprise products.

Typographyant-designdesign system
0 likes · 22 min read
Ant Design 3.0: The Story Behind the Design System and Its Principles