Você pode partir para qualquer uma das alternativas abaixo. Depende de quão preciso precise ser.

Método 1
========

O que eu costumo fazer em projetos pessoais e que não requerem muita precisão, é definir a o tamanho da fonte em `12pt` para o `html` em meu CSS por valer 100% do tamanho. Converto então o tamanho de uma folha A4 comum de milímetros (*210 x 297*) para  *pixels* (*793 x 1122*, aproximadamente). Assim, defino um `<div>` com as dimensões da folha e outro `<div>` para servir de isolador e colocar o conteúdo: cada informação poderá ter seu tamanho de fonte que não irá modificar as dimensões do `<div>` que representaria o papel A4 comum (não o A4 ofício). Adicione margem conforme necessário.

Devo dizer que funciona para mim, principalmente com fonte mono-espaçada. Veja um exemplo:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    html { font-size: 12pt; }

    .folha { background-color: #ccc; padding: 0.5em; }
    .a4_vertical { width: 793px; height: 1122px; }
    .a4_horizontal { width: 1122px; height: 793px; }

<!-- language: lang-html -->

    <div id="folha-a4" class="folha a4_vertical">
       <div id="conteudo">
           Folha A4
       </div>
    </div>

<!-- end snippet -->

Método 2
========

Se quer mais precisão, recomendo utilizar o [Paper CSS][1] que tem a licença [MIT][2]. Para usar, basicamente você precisa...

... No `<header>`
-----------------

 - Carrega o estilo: `<link rel="stylesheet" href="dist/paper.css">`
 - Define o tamanho do papel: `<style>@page { size: A5 }</style>`

... No `<body>`
---------------

 - Adiciona a classe do tamanho do papel (`A4`)
 - Adiciona se quer em formato *paisagem* (`landscape`) - retrato é padrão
 - Na tag (`<div>`, `<section>`, *et cetera*) que terá todo o conteúdo de uma folha, adicione a classe `sheet`. Cada folha é um `sheet` diferente!

Existem outros pormenores que podem ser aprendidos conforme a necessidade. Também existem vários exemplos no site. Segue um adaptado:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

    <link href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.3.0/paper.css" rel="stylesheet" />
    <style>
      @page {
        size: A4
      }
    </style>

    <body class="A4">

      <section class="sheet padding-10mm">

        <article>Exemplo de folha A4</article>

      </section>

    </body>

<!-- end snippet -->


  [1]: https://github.com/cognitom/paper-css
  [2]: https://mit-license.org/