htmlfonts
← Back to Directory

Times New Roman

The complete typography profile, history, and usage guide.

Times New Roman: Deconstructing the Web's Most Enduring (and Debated) Serif

In the vast universe of web typography, few fonts spark as much discussion as Times New Roman. Is it an outdated relic, a symbol of academic drudgery, or a timeless masterpiece of legibility and tradition? Despite the relentless march of modern sans-serifs, this classic serif remains ubiquitous, frequently appearing in web content, documents, and even UI mockups. But how well does it truly perform on the digital canvas, and what are its hidden strengths and weaknesses?

As master editorial web designers and UI typographers, we're diving deep into Times New Roman, dissecting its rich history, geometric finesse, and best practices for contemporary web design. Prepare to rediscover a typeface you thought you knew.

The Enduring Legacy: History and Origin of Times New Roman

The story of Times New Roman begins not in the digital realm, but in the bustling newsrooms of 1930s London. Specifically, with the legendary British newspaper, The Times. In 1931, the newspaper's management, under the critical eye of type expert Stanley Morison, commissioned Monotype to design a new typeface.

Morison, dissatisfied with the legibility and somewhat antiquated appearance of the paper's existing "Victorian" typeface, tasked Monotype designer Victor Lardent with the practical drawing work. The goal was ambitious: create a typeface that was not only more readable at small sizes, more economical with space (crucial for newspaper columns), and yet still possessed an air of authority and timelessness.

"I could see that the type on the page had not altered for many years, and it seemed to me that it was high time to redesign it."
— Stanley Morison

The result, first published in The Times on October 3, 1932, was an instant success. Its robust design quickly transcended newspaper pages, becoming a staple in books, magazines, and later, the digital world. Its widespread adoption by Microsoft as a default font further cemented its place in history, making it one of the most recognized typefaces globally.

Anatomy of a Classic: Geometric and Design Characteristics

Understanding Times New Roman's enduring appeal (and its occasional frustrations on the web) requires a look at its core design elements:

  • Strong, Bracketed Serifs: These are the small lines attached to the ends of strokes. Times New Roman features robust, somewhat blunt serifs that are integrated smoothly into the main letterform, providing excellent definition and guiding the eye horizontally across lines of text.
  • High X-Height: The x-height refers to the height of lowercase letters like 'x' relative to the full height of uppercase letters. Times New Roman has a generous x-height, which significantly enhances readability, especially at smaller point sizes, by making the lowercase characters appear larger and more distinct.
  • Open Counters: The "counters" are the enclosed or partially enclosed spaces within letters (like the loop of 'o' or 'e'). Times New Roman's counters are relatively open, preventing text from becoming a dense block and improving character differentiation.
  • Moderate Stroke Contrast: There's a clear distinction between thick and thin strokes, adding elegance and a classic feel without being overly dramatic. This contrast contributes to its formal, authoritative aesthetic.
  • Economy of Space: Its condensed design was a key requirement for its newspaper origins, allowing more characters per line than many other serif fonts without sacrificing readability.

Mastering Its Place: UI Design Best Practices and Optimal Use Cases

Times New Roman isn't inherently "bad" for the web, but its effectiveness depends entirely on the context and how it's implemented.

Optimal Use Cases: Where Times New Roman Shines

  • Long-Form Editorial Content: For academic articles, historical blogs, online books, or formal reports, its inherent readability and authoritative feel are excellent. It's designed for sustained reading.
  • Traditional or Classic Branding: Websites aiming for a timeless, serious, or sophisticated aesthetic can leverage its established reputation. Think legal firms, historical societies, or luxury brands with a heritage focus.
  • Print-First, Web-Second Content: If your content is primarily designed for print (e.g., PDFs of journals) and then adapted for the web, retaining Times New Roman can provide brand consistency.

Headings vs. Body Text: A Nuanced Approach

  • Body Text (16-18px+): This is its comfort zone. At appropriate sizes and with sufficient line-height (we recommend line-height: 1.8;), its serifs provide visual anchors that make long blocks of text easier to read on screen.
  • Headings: While it can be used for headings, it might feel a bit heavy or dated for modern, clean designs. Often, pairing it with a contrasting sans-serif for headings creates a more balanced and contemporary aesthetic, guiding the user's eye more effectively.

Mobile vs. Web: The Responsive Imperative

  • Desktop: Generally performs well at standard body text sizes.
  • Mobile: This is where caution is needed. At very small font sizes, serifs can sometimes become less distinct or even appear "spiky" on lower-resolution screens, potentially hindering readability. Always test thoroughly across various devices and resolutions. Ensure sufficient line-height and letter-spacing for optimal mobile legibility.

The Perfect Harmony: Absolute Best 3 CSS Font Pairings for Times New Roman

To truly elevate Times New Roman on the web, strategic font pairing is key. The goal is to create contrast and enhance the overall design without clashing. Here are our top 3 recommendations, providing excellent balance and visual appeal:

1. Times New Roman + Open Sans

Why it works: Open Sans is one of the most versatile and legible sans-serifs, designed for optimal readability across print and web. Its neutral, clean aesthetic provides a beautiful contrast to Times New Roman's classic formality, making it ideal for headings and UI elements. 

/* Import Open Sans from Google Fonts in your HTML  */
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">

/* CSS */
body {
    font-family: "Times New Roman", Times, serif;
    font-size: 18px; /* For good body readability */
    line-height: 1.8;
}

h1, h2, h3, h4, .button {
    font-family: "Open Sans", sans-serif;
    font-weight: 700; /* Bold for impact */
    letter-spacing: -0.02em; /* Slightly tighter for headings */
}

2. Times New Roman + Lato

Why it works: Lato is a warm, semi-rounded sans-serif that strikes a friendly yet professional tone. Its distinct character, without being overly decorative, complements the traditional feel of Times New Roman, offering a slightly softer and more approachable vibe than Open Sans. 

/* Import Lato from Google Fonts in your HTML  */
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">

/* CSS */
body {
    font-family: "Times New Roman", Times, serif;
    font-size: 17px;
    line-height: 1.75;
}

h1, h2, h3 {
    font-family: "Lato", sans-serif;
    font-weight: 700;
    text-transform: uppercase; /* Optional: for a strong header look */
    letter-spacing: 0.05em;
}

3. Times New Roman + Montserrat

Why it works: Montserrat is a geometric sans-serif, inspired by old posters and signs from Buenos Aires. It's bold, modern, and highly legible, making it an excellent choice for impactful headlines or navigation when paired with Times New Roman for body text. This pairing creates a sophisticated contrast between classic and contemporary. 

/* Import Montserrat from Google Fonts in your HTML  */
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;800&display=swap" rel="stylesheet">

/* CSS */
body {
    font-family: "Times New Roman", Times, serif;
    font-size: 16px;
    line-height: 1.9; /* More generous line-height for visual separation */
}

h1, h2 {
    font-family: "Montserrat", sans-serif;
    font-weight: 800; /* Extra bold for strong impact */
    color: #2d3748; /* Darker heading color */
}

h3 {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
}

Conclusion: A Timeless Tool, Thoughtfully Applied

Times New Roman is far from obsolete. Its remarkable history, coupled with its robust design characteristics like a generous x-height and clear serifs, continues to make it a powerful asset for specific web design contexts. Rather than dismissing it as merely a default, a discerning web designer recognizes it as a tool—one that, when thoughtfully selected and expertly paired, can imbue web content with a sense of authority, tradition, and most importantly, superb readability.

Embrace its legacy, understand its nuances, and unleash its potential to create truly engaging and timeless digital experiences.