42
pre{font-family:cursive;font-style:italic;font-size:xxx-small}

How to change pre font size?

Michael Petrotta
  • 59,888
  • 27
  • 145
  • 179
user289346
  • 487
  • 2
  • 6
  • 7

9 Answers9

46

While the font-size cannot be changed for text directly inside pre tags, you can always wrap that text in another element (a span, for example) and change the font size of that element.

For example (this is inline-styles, but could be put in CSS if you wanted):

<pre><span class="inner-pre" style="font-size: 11px">
Blah blah
Multiple lines and no br's!
Oh yeah!
</span></pre>
Chris R
  • 2,875
  • 2
  • 28
  • 29
  • 4
    I almost didn't try this because I didn't think it could possibly work since the tag is inside the pre tag...but it does work (at least with the outlook html interpreter). Thanks! – kimon Nov 02 '12 at 23:13
  • 1
    If you are using `
    `, remember to set `pre code { white-space: pre; }` to preserve line breaks.     – Jack Nov 22 '14 at 18:31
  • I've found this incredibly helpful when emailing powershell text output to a teams channel (need the preformatted so you don't lose column spacing + need a smaller font) +1 – Smock Apr 14 '20 at 15:42
12

Your issue is probably due to Courer being used as the default font, if you set Courier New as the preferred font it should be fine.

The following works fine in both Firefox & IE

pre {
   font-family: "courier new", courier, monospace;
   font-size: 11px;
}
Jon Freedman
  • 9,469
  • 4
  • 39
  • 58
11

If you only need to change the font size once, you can write

<pre style="font-size: 10px">
    ...
</pre>
Steve
  • 7,171
  • 2
  • 30
  • 52
user2914821
  • 119
  • 1
  • 3
  • In Chrome it did change the font size, but "added" (?) significant spacing in between the lines, more or less nullifying the effect. – robbpriestley Jun 28 '16 at 17:04
9

Take a look here:

PRE - preformatted text

HTML tag

You cannot change font size within a PRE element (and you cannot put a PRE element inside a FONT element, for example), but the BASEFONT element affects preformatted text, too.

Leniel Maccaferri
  • 100,159
  • 46
  • 371
  • 480
6

One solution to fixing font size on pre tags is to use:

pre
{
    white-space: pre-wrap !important;
}

This fixes font sizes on mobile browsers, which cannot accurately determine the width of a pre element.

Source: Font size of pre tag on mobile devices gets too big – a fix

Parker
  • 7,244
  • 12
  • 70
  • 92
4


Here is the Demo

I am not quite sure why my browsers (chrome, FF, IE) doesn't agree!

Please let me know if I am missing something.

HTML

<pre>
Test
</pre>

css

pre {
    font-size: 100px;
    font-family: "Times New Roman", Times, serif;
    font-style: italic;
}

Chrome

enter image description here

Firefox

enter image description here

IE

enter image description here

4dgaurav
  • 11,360
  • 4
  • 32
  • 59
3

Sorry for digging up an old issue. After searching high and low for "why browsers (specially mobile browsers) renders <pre> tags text too small and unreadable", I found as suggested here, changing css font-size: to em helps. But the gotcha is em for <pre> effects size differently on desktop browser then on mobile brower. A clear discrepancy noticeable on android Samsung/Mozilla/Chrome increase in font-size less for the same value of em then desktop browsers. The solution to this dilemma is to use % instead of em.

The css rule pre{font-size:200%;} seems to enlarge <pre> text more consistently (compare to other texts) on mobile browser as it does on desktop browser.

Anon Y.
  • 99
  • 1
  • 7
2

I think it can have something to do with the standard fonts supported by different browsers. Try your code in different browsers but remember IE is not W3 compatible.

MaxDataSol
  • 358
  • 1
  • 2
  • 18
1

I'm not sure if it's the right way to do it, but this worked for me in Firefox:

font: normal 11px Verdana, Arial, sans-serif;
Greg M
  • 140
  • 1
  • 11