Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

What is pica? How to set the font size in CSS using pica?

Javascript Web Development Front End Scripts

A pica is a CSS unit of measurement primarily used in print design. One pica equals 12 points, and there are 6 picas per inch (1pc = 12pt = 1/6 inch). The pica unit is specified using "pc" in CSS.

Understanding Pica Units

Picas are absolute units like pixels, but they're based on traditional typography measurements:

  • 1 pica = 12 points
  • 6 picas = 1 inch
  • 1pc ? 16 pixels (at 96 DPI)

Syntax

font-size: value pc;

/* Examples */
font-size: 1pc;    /* 12 points */
font-size: 2.5pc;  /* 30 points */

Example: Setting Font Size with Pica

<!DOCTYPE html>
<html>
<head>
    <style>
        .pica-small { font-size: 1pc; }    /* 12pt */
        .pica-medium { font-size: 1.5pc; } /* 18pt */
        .pica-large { font-size: 2pc; }    /* 24pt */
        .highlighted {
            background-color: yellow;
            padding: 10px;
            margin: 5px 0;
        }
    </style>
</head>
<body>
    <div class="highlighted pica-small">
        Small text: font-size 1pc (12pt)
    </div>
    
    <div class="highlighted pica-medium">
        Medium text: font-size 1.5pc (18pt)
    </div>
    
    <div class="highlighted pica-large">
        Large text: font-size 2pc (24pt)
    </div>
</body>
</html>

Pica vs Other Units Comparison

Unit Type Best For Example
pc (pica) Absolute Print layouts 1pc = 12pt
px (pixels) Absolute Screen layouts 16px ? 1pc
em Relative Scalable text 1em = parent font
pt (points) Absolute Print media 12pt = 1pc

Practical Usage

<!DOCTYPE html>
<html>
<head>
    <style>
        .print-heading { 
            font-size: 3pc; 
            font-weight: bold;
            margin-bottom: 1pc;
        }
        .print-body { 
            font-size: 1pc; 
            line-height: 1.2pc;
        }
    </style>
</head>
<body>
    <h2 class="print-heading">Document Title (3pc)</h2>
    <p class="print-body">
        This paragraph uses 1pc font size, which equals 12 points. 
        Pica units are especially useful for documents intended for printing 
        where precise typography control is needed.
    </p>
</body>
</html>

When to Use Pica

Pica units are most appropriate for:

  • Print stylesheets and documents
  • Typography-heavy layouts
  • When working with designers familiar with traditional print measurements
  • Maintaining consistency between digital and print versions

Conclusion

Pica (pc) is a CSS unit where 1pc equals 12 points, making it useful for print-oriented designs. While pixels are more common for web layouts, picas provide precise typography control for print media.

Updated on: 2026-03-15T23:18:59+05:30

933 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements