DM Sans 与 Nunito Sans:简洁无衬线体对比
DM Sans vs Nunito Sans: Clean Sans Compared
Both DM Sans and Nunito Sans occupy a particular niche in contemporary UI design: they are clean, geometric-leaning sans-serifs that feel modern without the clinical detachment of fonts like Inter. Designers reach for them when they want warmth with professionalism, or friendliness without losing structure. But despite appearing similar in screenshots, DM Sans and Nunito Sans make fundamentally different design choices — choices that ripple through readability, typographic tone, and cross-platform rendering. This guide unpacks those differences in the depth they deserve.
Design History and Philosophy
DM Sans
DM Sans was commissioned by Google as part of the DeepMind visual identity system — hence the "DM" prefix. The original design was undertaken by Colophon Foundry and released on Google Fonts in 2019. The brief was specific: a typeface that felt contemporary, text-first, and minimal without being cold. Colophon drew on a geometric sans framework, but deliberately introduced optical corrections that prevent the mechanical stiffness common in pure geometric designs.
What distinguishes DM Sans historically is that it was designed with a specific corporate identity context in mind, which shaped its neutrality. It was built to carry long-form text in interfaces — white papers, documentation, dashboards — not to headline posters or punch out from branding. This focus produced a font with tight spacing defaults, a restrained character width, and very little decorative differentiation between letterforms. DM Sans 2.0, released in 2022, expanded the family significantly into a fully variable font with a weight axis ranging from 100 to 700 and an optical size axis. The optical size variation is a notable technical feature: the font subtly adjusts stroke contrast, spacing, and apertures depending on the display size, making it genuinely adapted for both display and body usage within the same typeface.
The design philosophy of DM Sans is one of restraint. Letters like the 'a' and 'g' use double-story constructions at regular weights, adding a layer of legibility differentiation crucial for dense UI text, while single-story alternates are available through OpenType features for situations requiring a softer, more humanistic appearance. The overall impression is of a font that has been engineered to function rather than to charm — which, paradoxically, makes it charming in the right contexts.
Nunito Sans
Nunito Sans was designed by Vernon Adams and subsequently expanded by Jacques Le Bailly and Manvel Shmavonyan, with contributions from several collaborators over multiple major versions. It was released on Google Fonts in 2017 as a companion and alternative to the original Nunito (a rounded display sans), but Nunito Sans deliberately removes the rounded terminals that define the parent family, producing a more traditional, square-terminal sans-serif that nevertheless retains the warmth and open apertures of its rounded sibling.
The philosophy behind Nunito Sans is distinctly humanistic. Adams drew on the tradition of humanist sans-serifs, incorporating subtle calligraphic influence into the letter-construction. Where DM Sans is designed to recede, Nunito Sans is designed to engage. The spacing is slightly more generous, the apertures on letters like 'c', 'e', and 's' are more open, and the overall character width tends toward the wider end of the spectrum. Nunito Sans has also evolved into a variable font, offering both weight and width axes in its current version, giving designers more control than the older static instances provided.
One important characteristic of Nunito Sans's design history is that it was built to serve a very wide range of scripts and weights from the outset. The Latin coverage is extensive, including all major Latin Extended character sets, and the family spans nine weights from ExtraLight (200) through Black (900) in non-variable form, with the variable version covering that entire range continuously. This breadth reflects Adams's intention to make a font useful for complete typographic systems, not just for display text or isolated interface components.
Visual Differences at a Glance
At first glance, DM Sans and Nunito Sans look quite similar — both are clean, modern, without strong humanistic pen influence or conspicuous geometric rigidity. But side-by-side comparison reveals meaningful differences.
The most immediately visible distinction is in character width and overall spacing. Nunito Sans runs noticeably wider than DM Sans at equivalent sizes and weights. Set both at 16px with default letter-spacing and Nunito Sans will occupy roughly 8–12% more horizontal space on a comparable string of text. This is not incidental — it reflects fundamentally different design priorities. DM Sans was built to pack efficiently in dense interfaces; Nunito Sans was built to breathe.
Terminal Design and Letterform Details
DM Sans uses oblique cut terminals — the ends of strokes on letters like 'c', 'f', 'j', 'r', and 's' are cut at an angle rather than perfectly horizontal. This is a subtle but effective technique that adds visual dynamism without the explicit warmth of rounded terminals. Nunito Sans, by contrast, uses flat perpendicular terminals cut squarely, which contributes to its more structured, slightly more formal impression compared to the original rounded Nunito.
The 'a', 'g', and 'y' are worth examining specifically. DM Sans uses a double-story 'a' and double-story 'g' by default, which aids legibility in smaller text by providing more distinctive letterforms. Nunito Sans also uses a double-story 'a' in its default configuration at most weights, but the 'g' tends toward a single-story design, which contributes to its more casual register. The descender on Nunito Sans's 'y' has a gentle curve; DM Sans's is straighter and more structured.
Weight Distribution and Stroke Contrast
Both fonts are essentially monolinear — that is, they exhibit very low stroke contrast across their forms. But the degree and quality of that monolinearity differs. DM Sans has marginally more stroke variation built into its curves, especially in the heavier weights, where the letter 'O' shows a slight thinning at the horizontal stress points. Nunito Sans maintains a more genuinely uniform stroke width throughout, which creates its characteristic even texture on the page.
Metrics Comparison
Understanding the font metrics of DM Sans and Nunito Sans clarifies why they behave so differently in layout systems.
The x-height of DM Sans is tall relative to its cap height — approximately 74% of the cap height — which is characteristic of fonts optimized for body text at small sizes. A taller x-height means lowercase letters occupy more vertical space, making them more readable at 14–16px without requiring artificially large font sizes. Nunito Sans also has a generous x-height, at roughly 72% of cap height, so the two are close, though DM Sans edges ahead slightly.
Line spacing considerations differ between the two. DM Sans has tighter default line-height metrics baked into its internal spacing tables, meaning it tends to set more densely with default line-height: normal in CSS. Designers using DM Sans for body text typically find that applying line-height: 1.5 to 1.6 is appropriate for comfortable reading. Nunito Sans, with its wider characters and more generous default spacing, is often comfortable with line-height: 1.4 to 1.5 before additional line-height adjustments are needed.
Variable Font Axes
DM Sans's variable font offers a wght axis from 100 to 700 and an opsz (optical size) axis from 9 to 40. The optical size axis is genuinely useful: at 9pt, the font opens up — apertures widen, spacing loosens, stroke contrast increases slightly — all in service of readability at small scales. At 40pt, the font tightens — spacing compresses slightly and the forms become more refined for display use. This is one feature that gives DM Sans a significant advantage over Nunito Sans in complex, multi-size typographic systems.
Nunito Sans's variable font covers wght from 200 to 1000 and wdth (width) from 75 to 125. The width axis is its distinguishing feature: you can compress Nunito Sans to 75% of its normal width for compact interfaces, or expand it to 125% for spacious layouts or display usage. This makes Nunito Sans the more versatile choice when you need to accommodate different spatial contexts within one typeface, even if it lacks the optical size refinements of DM Sans.
Rendering Across Platforms
Font rendering on screens is never fully within a designer's control, but understanding how DM Sans and Nunito Sans behave across rendering environments helps you make a more confident choice.
On macOS and iOS with Core Text rendering, both fonts render beautifully. Apple's sub-pixel antialiasing and text rendering pipeline handles high-contrast OpenType fonts extremely well, and both DM Sans and Nunito Sans benefit from the platform's reputation for clean typography. DM Sans tends to look particularly crisp at 13–15px body sizes, where its tight metrics and high x-height shine. Nunito Sans at the same sizes reads comfortably, with its generous spacing contributing to an airy, readable impression.
On Windows with ClearType rendering — historically the most challenging environment for web fonts — the two fonts diverge more noticeably. DM Sans, being a more geometrically precise font with minimal stroke variation, benefits from Windows's GDI hinting system reasonably well. The font ships with adequate TrueType hinting for Windows body text sizes. Nunito Sans also has reasonable hinting coverage, but its slightly wider letterforms can look looser on mid-resolution Windows displays compared to DM Sans's more compact presentation.
On Android, where text rendering depends heavily on Skia and the specific device, both fonts are well-supported given their Google Fonts origins. Google has a history of ensuring their commissioned typefaces perform on Android, and both DM Sans and Nunito Sans benefit from this attention. DM Sans, as a more recent commission, has particularly well-optimized variable font files for modern Android rendering.
Performance Considerations
DM Sans's variable font file (woff2) is approximately 55–65KB for the primary Latin subset, which is competitive with other variable fonts in its class. Nunito Sans's variable font file runs slightly larger due to its wider character set and the two axes — expect approximately 75–90KB for the Latin subset in woff2 format. If performance is paramount, subsetting both fonts aggressively using font subsetting is advisable, particularly for interfaces that only use a limited range of weights and characters.
Best Use Cases for Each
The differences between DM Sans and Nunito Sans, once understood, make choosing between them more intuitive.
DM Sans excels in information-dense interfaces: dashboards, developer tools, admin panels, documentation sites, and SaaS products where typography needs to carry data clearly without adding visual noise. Its optical size axis makes it particularly well suited to products where the same font needs to serve both body copy at 14px and headings at 36px with high visual coherence. Inter and Poppins are its closest competitors in this space; DM Sans typically wins on precision and the optical size feature, though Inter remains the dominant choice for general-purpose UI work.
Nunito Sans performs best in consumer-facing applications, e-learning platforms, children's educational tools, wellness apps, and any product where approachability, warmth, and legibility need to coexist. Its wide character set and variable width axis give it unusual flexibility for international products. The font also pairs particularly well with its rounded sibling Nunito for typographic hierarchy in consumer apps — using Nunito for headings with Nunito Sans for body text creates an internally coherent typographic system without requiring a completely different pairing.
CSS Implementation Examples
/* DM Sans with variable font and optical size */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..700;1,9..40,100..700&display=swap');
body {
font-family: 'DM Sans', sans-serif;
font-size: 16px;
font-optical-sizing: auto; /* activates opsz axis */
line-height: 1.55;
}
h1 {
font-size: 2.5rem;
font-weight: 600;
font-optical-sizing: auto;
}
/* Nunito Sans with variable font and width control */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wdth,wght@0,6..12,75..125,200..1000;1,6..12,75..125,200..1000&display=swap');
body {
font-family: 'Nunito Sans', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
}
/* Condensed variant for tight UI components */
.compact-label {
font-stretch: 87.5%;
}
The Verdict: When to Choose Which
The choice between DM Sans and Nunito Sans is less about quality — both are excellent, well-engineered typefaces — and more about the personality and function you need from your typography.
Choose DM Sans if your project involves dense information presentation, developer tooling, or enterprise SaaS interfaces where clarity and efficiency are paramount. Its optical size axis is a genuine technical advantage for complex typographic systems, and its restrained personality ensures it does not compete with data, UI components, or content for attention. DM Sans is a font that performs; its job is to disappear into the layout while keeping reading effortless. If you find Inter too ubiquitous or Poppins too geometric, DM Sans occupies a refined middle ground worth serious consideration.
Choose Nunito Sans if your project serves consumers rather than professionals, if warmth and approachability are core to your brand's typographic register, or if you need a versatile font with both weight and width axes that can accommodate very different spatial contexts within a single coherent family. Nunito Sans is better at looking friendly; DM Sans is better at looking precise. Consumer apps, educational platforms, health and wellness products, and brands that want to feel human rather than institutional will almost always find Nunito Sans the more fitting choice.
There is also a middle path: using the two together. DM Sans for data, form labels, and numerical content where precision matters, combined with Nunito Sans for prose descriptions, onboarding copy, and user-facing messaging — this combination exploits each font's strengths while keeping the typographic hierarchy coherent. The slight tonal difference between the two fonts, while visible to a trained eye, reads as complementary rather than conflicting, especially when unified by consistent weight and size choices across the system. For a deeper dive into how sans-serif fonts compare across the broader landscape, the serif vs sans-serif guide provides useful context on when either classification serves better.
字体对决
排版术语
试试这些工具
提及的字体
Rasmus Andersson 花费数年时间专门为电脑屏幕打磨这款新怪诞体,优化了字间距、x 高度与笔画对比,以确保在数字显示器的小尺寸下也拥有高可读性。光学尺寸轴(opsz)让字体能够在标注文字与标题之间自动调整设计,而字重轴则覆盖从纤细到极粗的完整范围。它已成为全球仪表盘、文档站点与开发者工具的事实标准选择。
由 Indian Type Foundry 开发,这款几何无衬线字体将近乎完美的圆形字碗和统一的笔画宽度,与原生天城文支持结合在一起,成为少数几款在设计层面真正融合拉丁文与印度文字的字体之一。精确现代的字形传递出自信与亲和力,使 Poppins 成为初创公司落地页和应用界面的宠儿。提供跨越 9 种字重的 18 种样式,无需可变字体即可获得实用的灵活性。
Colophon Foundry 将这款低对比度的几何无衬线字体设计为 DM 字体体系中专注于文本的伙伴字体,其光学尺寸与字重轴使它能够在小号正文与更大展示尺寸之间优雅切换。简洁、无装饰的字形将清晰度置于个性之上,因而在极简 UI 系统、SaaS 产品和现代编辑排版中尤为有效。其光学尺寸轴的实现尤为出色,能够根据渲染场景明显地调整间距与字重。
延续 Nunito 的圆润气质,Nunito Sans 通过略为常规化的笔画末端调和了曲线,呈现出更简洁、更中性的效果,适合长时间阅读。它的可变字体实现异常强大,同时提供字重、宽度、光学尺寸以及小写字母高度轴(YTLC),可针对不同场景精细调整垂直度量。西里尔文与越南文支持,使其成为国际化 UI 项目的实用之选。