New defaults for colorbar.title.font and legend.title.font to depend on colorbar.tickfont and legend.font and increase their sizes

src/components/legend/attributes.js

@@ -189,7 +189,10 @@ module.exports = {
         font: fontAttrs({
             editType: 'legend',
             description: [
-                'Sets this legend\'s title font.'
+                'Sets this legend\'s title font.',
+                'Defaulted to `legend.font`.',
+                'When `orientation` is *h*, the size would be defaulted to be',
+                '20% greater than the font size used for legend items.'
             ].join(' '),
         }),
         side: {

src/components/legend/defaults.js

@@ -77,12 +77,13 @@ module.exports = function legendDefaults(layoutIn, layoutOut, fullData) {
     coerce('bgcolor', layoutOut.paper_bgcolor);
     coerce('bordercolor');
     coerce('borderwidth');
-    Lib.coerceFont(coerce, 'font', layoutOut.font);
+    var itemFont = Lib.coerceFont(coerce, 'font', layoutOut.font);
 
     var orientation = coerce('orientation');
+    var isHorizontal = orientation === 'h';
     var defaultX, defaultY, defaultYAnchor;
 
-    if(orientation === 'h') {
+    if(isHorizontal) {
         defaultX = 0;
 
         if(Registry.getComponentMethod('rangeslider', 'isVisible')(layoutIn.xaxis)) {
@@ -119,7 +120,11 @@ module.exports = function legendDefaults(layoutIn, layoutOut, fullData) {
 
     var titleText = coerce('title.text');
     if(titleText) {
-        coerce('title.side', orientation === 'h' ? 'left' : 'top');
-        Lib.coerceFont(coerce, 'title.font', layoutOut.font);
+        coerce('title.side', isHorizontal ? 'left' : 'top');
+        var dfltTitleFont = Lib.extendFlat({}, itemFont, {
+            size: itemFont.size * (isHorizontal ? 1.2 : 1)
+        });
+
+        Lib.coerceFont(coerce, 'title.font', dfltTitleFont);
     }
 };

src/components/legend/draw.js

@@ -508,6 +508,8 @@ function computeTextDimensions(g, gd, legendObj, aTitle) {
         return;
     }
 
+    var isVertical = helpers.isVertical(legendObj);
+
     var mathjaxGroup = g.select('g[class*=math-group]');
     var mathjaxNode = mathjaxGroup.node();
     if(!legendObj) legendObj = gd._fullLayout.legend;
@@ -539,6 +541,11 @@ function computeTextDimensions(g, gd, legendObj, aTitle) {
         // approximation to height offset to center the font
         // to avoid getBoundingClientRect
         if(aTitle === MAIN_TITLE) {
+            if(!isVertical) {
+                // add extra space between legend title and itmes
+                width += constants.titlePad * 2;
+            }
+
             svgTextUtils.positionText(textEl,
                 bw + constants.titlePad,
                 bw + lineHeight