title: Highcharts legend font sizes
body: <p>I'm using Highcharts for my web page and I can't seem to figure out how to correctly change the font size of the title and key at the bottom. I'm using the basic column with green background: <a href="http://www.highcharts.com/demo/column-basic/dark-green" rel="noreferrer">http://www.highcharts.com/demo/column-basic/dark-green</a></p>
  
  <p>Currently this is my code: </p>
  
  <pre><code>Function: 
  $(function () {
      $('#content').highcharts({
          chart: {
              type: 'column'
          },
          legend: {
              itemStyle: {
                  color: 'white',
                  fontWeight: 'bold',
                  fontSize: '20px'
              }
          },
          title: {
              text: 'Title',
              style:{
                      color: 'white',
                      fontSize: '25px'
                  }       
          },
          subtitle: {
              text: 'Subtitle'
          },
           xAxis: {
              categories: [
                  ' '
              ]
          },
          yAxis: {
              min: 0,
              title: {                    
                  text: 'MMBTUs x 10,0000',
                  style:{
                      color: 'white',
                      fontSize: '25px'
                  }
              },
              labels: {
                  style: {
                      color: 'white',
                      fontSize:'25px'
                  }
              }
          },
          tooltip: {
              headerFormat: '&lt;span style="font-size:10px"&gt;{point.key}&lt;/span&gt;&lt;table&gt;',
              pointFormat: '&lt;tr&gt;&lt;td style="color:{series.color};padding:0"&gt;{series.name}: &lt;/td&gt;' +
                  '&lt;td style="padding:0"&gt;&lt;b&gt;{point.y:.1f} mm&lt;/b&gt;&lt;/td&gt;&lt;/tr&gt;',
              footerFormat: '&lt;/table&gt;',
              shared: true,
              useHTML: true
          },
          plotOptions: {
              column: {
                  pointPadding: 0.2,
                  borderWidth: 0
              }
          },
          series: [{
              name: '2009',
              data: [4900000]
  
          }, {
              name: '2010',
              data: [4900000]
  
          }, {
              name: '2011',
              data: [5500000]
  
          }, {
              name: '2012',
              data: [5200000]
  
          }]
      });
  });
  </code></pre>
  
  <p>Html call:</p>
  
  <pre><code>&lt;div id="content" style="min-width: 300px; height: 1000px; margin: 2px; margin-bottom: 3px"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and as stated I'm using the Highcharts green theme provided by the website when you click view visual theme.</p>
  
  <p>Now my problem is when I change:</p>
  
  <pre><code>legend: {
          itemStyle: {
              color: 'white',
              fontWeight: 'bold',
              fontSize: '20px'
          }
  </code></pre>
  
  <p>depending on how big my font size is the 4 values (2009, 2010, 2011, 2012) are either not visable or the move out of the box below the chart. The box itself doesn't resize (which it does in jfiddle which doesn't include the theme). The same thing happens with:</p>
  
  <pre><code>title: {
          text: 'Title',
          style:{
                  color: 'white',
                  fontSize: '25px'
              }       
      },
  </code></pre>
  
  <p>the color changes based on my value but the font size doesn't. Any help would be appreciated. </p>