How to increase size of serial number in OL

You can use the CSS pseudo-element ::marker. (Demo snippet below.)

ol li::marker {
    font-size: 2em;
}

ol li::marker {
  font-size: 2em;
  color: red;
}

<ol>
  <li>Hello</li>
</ol>

The numbers of the li elements are formatted according to the CSS rules for the li elements themselves; therefore to style the numbers differently to the text you have to wrap the text itself into another element (in this case a span):

<ol>
    <li><span>list element one</span></li>
    <li><span>list element two</span></li>
</ol>

CSS:

li {
    list-style: decimal-leading-zero;
    font-size: 5em;
    margin: 0 0 0 2em;
}

li span {
    font-size: 0.25em;
}

li {
  list-style: decimal-leading-zero;
  font-size: 5em;
  margin: 0 0 0 2em;
}
li span {
  font-size: 0.25em;
}

<ol>
  <li><span>list element one</span>
  </li>
  <li><span>list element two</span>
  </li>
</ol>

JS Fiddle demo.

If you're able to sacrifice certain older browsers that can't handle generated content, then you could use, instead:

<ol>
    <li>list element one</li>
    <li>list element two</li>
</ol>

and:

ol {
    counter-reset: listNumbering;
}

li {
    font-size: 1em;
    counter-increment: listNumbering;
}

li:before {
    content: counter(listNumbering,decimal-leading-zero) '.';
    font-size: 5em;
}

ol {
  list-style-type: none;
  counter-reset: listNumbering;
}
li {
  font-size: 1em;
  counter-increment: listNumbering;
}
li:before {
  content: counter(listNumbering, decimal-leading-zero)'.';
  font-size: 5em;
}

<ol>
  <li>list element one</li>
  <li>list element two</li>
</ol>

JS Fiddle demo.

Revisiting this answer, it seems that the ::marker pseudo-element is beginning to be more widely adopted (albeit behind flags in Chrome and Edge 80+, as of writing). This means it may be a better option than the above in the relatively near future:

li {
  /* something of a magic number to position the ::marker
     on the page: */
  margin-left: 2em;
}

/* the generated list-marker for the <li> element: */
li::marker {
  color: #f90;
  font-size: 5em;
}

Please note that the below snippet – and the above CSS – requires a compatible browser, some browsers such as Chrome, Chromium and Edge in versions 80 and above require that enable-experimental-web-platform-features flag be enabled, whereas in Firefox 68+ it should work).

li {
  margin-left: 2em;
}

::marker {
  color: #f90;
  font-size: 5em;
}

<ol>
  <li>list element one</li>
  <li>list element two</li>
</ol>

JS Fiddle demo.

References:

• counter().
• counter-increment.
• counter-reset.
• ::marker pseudo-element (compatibility).