18

I would like to have a font smaller than an Arial 9px text.

I've tried to find other font name but I did not succeed to get a very small text. Is there a way to achieve this easily using css ?

EDIT : I can't go under 9px using Arial I have tried font-size, small, transform, scale, other fonts... everything as I am an experienced web developper.

4
  • What do you mean, you can't go under 9px? You can have any font-size you want as long as it is positive or zero. There must be some side effect. Without an example code showing your issue, no-one can help you.
    – yunzen
    Commented May 27, 2019 at 8:42
  • If I go into the console and change the font size it doen't work. I am trying to reproduce it, but indeed on the WC page I can put 5px it works. Commented May 27, 2019 at 8:55
  • How do you change the font-size?
    – yunzen
    Commented May 27, 2019 at 8:55
  • Like @gavgrif shows in his example li { font-size : 8px } Then I've tried important... Commented May 27, 2019 at 8:56

7 Answers 7

19

You may also REPEAT the small tag multiple times to make it as small as you like. Interestingly, I have not seen this mentioned anywhere!

<h2>My Headline <small><small><small>(Subject)</small></small></small></h2>
7

Set font-size to whatever you want - although you may find that any font less than 9px may be too small to read well. You could also do it with em's or rem's or percentages.

But you can set the font size as follows (for an example p element that you want to be 6px in size).

 p {font-size: 6px}

So note that you are not importing the smallest possible font - you are sizing the html elements to be a small font-size with CSS). Using this principle- you set the fontsize for all the elements you want to use it - eg: p, span, a, li, h etc.

But again - I must caution against this for accessibility purposes.

p {
 font-family: Arial;
 font-size: 6px;
}
<p>This is a test with Arial font at 6px and is NOT recommended</p>

2
  • 1
    My first try, I can't go under 9px using Arial, post edited Commented May 27, 2019 at 8:38
  • That's crazy, the snippet works, W3C example works, I am getting mad Commented May 27, 2019 at 8:55
4

You can try it

div p {
  font-family: 'Arial';
  -webkit-text-size-adjust: none;
  font-size: 5px
}
<div>
  <p>lorem</p>
</div>

3

Most (all?) browsers have a minimum font size, to avoid underhanded people displaying unreadable text for some reason. Some browsers let you adjust this, but you simply can't count on being able to display smaller than 9pt on anyone else's machine.

Unless you opt for very old school: create your text as a graphic.

Or: Create your own custom, tiny font - as long as it has all the features of (say) a 12pt font, it will display fine, but if the glyphs are only two dots high, that is what you will see.

2
  • I think that's due to my browser setting, I wish i could share you my html page but it's part of the content of a video game I am working on, so confidential ^^ Commented May 27, 2019 at 8:58
  • THANKS I've forgot to look at this and it was due to that, my default chrome font size was 9px. Changing that to 6px and I was able to view my page correctly. What I don't understand is why I was able to change it on W3C website (client side), but not on my side (I had to change my browser fotn setting) ??? Commented May 27, 2019 at 9:01
2

You can use HTML <small> tag. https://www.w3schools.com/tags/tag_small.asp

0
2

If adding css styles don't work then maybe it has something to do with your browser auto adjustment of the font size.

Try this to stop auto adjustment of font size:

* {
    -webkit-text-size-adjust: none; //For chrome browser
}
2
2

Few thing you must consider

1. make sure the .css file is the last one you load in your html (after Bootstrap for example).
2. use the !important attribute to your css property (font-size: 4px !important;)
3. if these 2 suggestions do not work, try adding an inline-css to your element <p style="font-size: 4px">I'm a 4 px paragraph</p>

1
  • Thanks but it was due to minimal browser font size, I know all that css/html stuff so that's why my question look dumb like me :p Commented May 27, 2019 at 9:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.