diff --git a/client/src/components/categorical/category/index.js b/client/src/components/categorical/category/index.js
index eddb7c0e..c8a944c6 100644
--- a/client/src/components/categorical/category/index.js
+++ b/client/src/components/categorical/category/index.js
@@ -141,7 +141,7 @@ class Category extends React.Component {
               <input disabled id={checkboxID} checked type="checkbox" />
               <span className="bp3-control-indicator" />
             </label>
-            <Truncate fontSize={12} size={220}>
+            <Truncate fontSize={12} size={globals.maxControlsWidth}>
               <span
                 style={{
                   cursor: "pointer",
@@ -191,7 +191,7 @@ class Category extends React.Component {
     ) {
       return (
         <div style={{ marginBottom: 10, marginTop: 4 }}>
-          <Truncate size={150} fontSize={12}>
+          <Truncate size={150} fontSize={12} bold>
             <span style={{ fontWeight: 700 }}>{metadataField}</span>
           </Truncate>
           <Truncate size={150} fontSize={12}>
diff --git a/client/src/components/util/truncate.js b/client/src/components/util/truncate.js
index af372c7c..c61e0ee8 100644
--- a/client/src/components/util/truncate.js
+++ b/client/src/components/util/truncate.js
@@ -31,13 +31,15 @@ export default class Truncate extends Component {
     return this.fontIsLoaded ? "Roboto Condensed" : "Helvetica Neue";
   }
 
-  maybeTruncateString = (str, maxSize, fontSize) => {
+  maybeTruncateString = (str, maxSize, fontSize, bold, italic) => {
     const activeFont = Truncate.getLoadedFont();
 
     const renderedSize = pixelWidth(str, {
       font: activeFont,
       size: fontSize,
       map: widthsMap,
+      bold,
+      italic,
     });
     let truncatedString = null;
     if (renderedSize > maxSize) {
@@ -52,7 +54,7 @@ export default class Truncate extends Component {
   };
 
   render() {
-    const { children, size, fontSize } = this.props;
+    const { children, size, fontSize, bold, italic } = this.props;
     // Truncate only support a single child with a text child
 
     if (
@@ -63,7 +65,9 @@ export default class Truncate extends Component {
       const truncatedString = this.maybeTruncateString(
         originalString,
         size,
-        fontSize
+        fontSize,
+        bold,
+        italic
       );
       // Only make tooltip if string has to be truncated
       if (truncatedString) {