Make text smaller with HTML/CSS

Question

I'm trying to figure out how to emulate this image using HTML and CSS. It will be something that will be displayed below the avatar on a message board.

stats

This is what I have so far: https://jsfiddle.net/J7VBV/220/

table.avatarStats {
    border-spacing: 0;
    border-collapse: collapse;
    text-align: center;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
}

<table class="avatarStats" width="200" border="0">
  <tr>
    <td bgcolor="purple">RECENT WR<br /><strong>61%</strong></td>
    <td bgcolor="teal">OVERALL<br /><strong>55%</strong></td>
  </tr>
  <tr>
      <td bgcolor="purple">RECENT WN8<br /><strong>2469</strong></td>
    <td bgcolor="teal">OVERALL<br /><strong>1737</strong></td>
  </tr>
</table>

The main problem I'm having is decreasing the size of the text above the numbers. Nothing I've tried is making the text smaller.

Also, is there a better way of bolding the numbers?

This *may* be an issue with your browser not working with JSFiddle correctly. — Tim McNamara, May 12 '15 at 04:48

Bibek Adhikari · Answer 1 · 2015-05-12T04:08:01.410

Use this

table.avatarStats {
 border-spacing: 0;
   border-collapse: collapse;
 text-align: center;
 color: white;
 font-family: Arial, Helvetica, sans-serif;
}
td small{
    font-size:7pt;
    font-weight:bold;
}
td strong{
    
    font-size:18pt; 
    font-weight:bold;
}

<table class="avatarStats" width="200" border="0">
  <tr>
      <td bgcolor="purple"><small>RECENT WR</small><br /><strong>61%</strong></td>
    <td bgcolor="teal"><small>OVERALL</small><br /><strong>55%</strong></td>
  </tr>
  <tr>
      <td bgcolor="purple"><small>RECENT WN8</small><br /><strong>2469</strong></td>
      <td bgcolor="teal"><dev font-size: 10pt;><small>OVERALL</small><br /><strong>1737</strong></td>
  </tr>
</table>

NendoTaka · Answer 2 · 2015-05-12T03:51:33.890

1

You can use CSS to make the font smaller.

font-size: 10pt;

Just replace 10pt with whatever size you want to use.

I would use a CSS class like:

.small {
   font-size: 10pt;   
}

and add

class="small"

to the text you want to be small

edited May 12 '15 at 03:51

answered May 12 '15 at 03:49

NendoTaka

1,224
8
14

I've tried that but it doesn't do anything. I've also tried font-size: 10px; and font-size: 40%; and font size="8" – Jerinos May 12 '15 at 03:50

score 1 · Answer 3 · answered May 12 '15 at 04:01

You can do like this.

table.avatarStats {
 border-spacing: 0;
   border-collapse: collapse;
 text-align: center;
 color: white;
 font-family: Arial, Helvetica, sans-serif;
}
.cap{
    font-size:8px;
    font-weight:normal;
}
td{
    font-weight:bold;
    font-size:22px
}

<table class="avatarStats" width="200" border="0">
  <tr>
    <td bgcolor="purple"><span class="cap">RECENT WR</span><br /><strong>61%</strong></td>
    <td bgcolor="teal"><span class="cap">OVERALL</span><br /><strong>55%</strong></td>
  </tr>
  <tr>
      <td bgcolor="purple"><span class="cap">RECENT WN8</span><br /><strong>2469</strong></td>
      <td bgcolor="teal"><span class="cap">OVERALL</span><br /><strong>1737</strong></td>
  </tr>
</table>

Adjust the font-size accordingly as needed

score 1 · Answer 4 · answered May 12 '15 at 04:07

1

try this https://jsfiddle.net/fd9x06jq/

table.avatarStats tr td strong{
  font-size:9pt;    
  font-weight:bold;
  color:black
}

answered May 12 '15 at 04:07

Kishan

1,182
12
26

Caio Felipe Pereira · Answer 5 · 2015-05-12T03:58:21.237

0

Although I'd advise some changes to your markup, add this to you CSS:

table tr td:last-child{
    font-size: 8pt;   
}

EDIT:

My first code was off. Now it's correct. Here's a fiddle

edited May 12 '15 at 03:58

answered May 12 '15 at 03:54

Caio Felipe Pereira

805
11
14

what kind of changes? – Jerinos May 12 '15 at 03:57
to your markup? you control your styles using properties such as bgcolor and whatnot. I'd keep all styles within the same (css) file – Caio Felipe Pereira May 12 '15 at 04:00
but anyways, if you dont want to change anything, the selector I build does what you need – Caio Felipe Pereira May 12 '15 at 04:03

score 0 · Answer 6 · edited May 23 '17 at 12:06

Updated your code here: https://jsfiddle.net/70gtky65/1/

<table class="avatarStats">
  <tr>
    <td>RECENT WR<br/><span>61%</span></td>
    <td>OVERALL<br/><span>55%</span></td>
  </tr>
  <tr>
      <td>RECENT WN8<br/><span>2469</span></td>
      <td>OVERALL<br/><span>1737</span></td>
  </tr>
</table>

<style type="text/css">
    table.avatarStats {
        border-spacing: 0px;
        text-align: center;
        color: white;
        font-family: Arial, Helvetica, sans-serif;
        width: 108px;
    }

    table.avatarStats td {
        font-size: 7px;
        width: 50px;
        padding: 2px;
    }

    table.avatarStats td span {
        font-size: 16px;
    }

    table tr td:first-child {
        background-color: #7842B3;
    }

    table tr td:last-child {
        background-color: #459ABD;
    }
</style>

You should try to avoid inline CSS and here is why

I have to use it inline for this but the colors will be changed to a php variable. — Jerinos, May 12 '15 at 04:41

Make text smaller with HTML/CSS

6 Answers6