diff --git a/css/style.css b/css/style.css
index dd1b2b8..b77a68b 100644
--- a/css/style.css
+++ b/css/style.css
@@ -92,6 +92,18 @@ body {
 	font-size: 1.4em;
 }
 
+.small {
+	font-size: 0.6em;
+}
+
+.medium {
+	font-size: 0.8em;
+}
+
+.large {
+	font-size: 1.0em;
+}
+
 .win {
 	color: #ffffff !important;
    	background-color: red;
diff --git a/js/data.js b/js/data.js
index 5064223..7a1538b 100644
--- a/js/data.js
+++ b/js/data.js
@@ -4,29 +4,29 @@ var headerText = "Bingo";
 var footerText = "<a href='https://github.com/jeffehobbs/HTML5-bingo/' target='_blank'>Code available on github</a>";
 
 var JSONBingo = {"squares": [
-        {"square": "one"},
-        {"square": "two"},
-        {"square": "three"},
-        {"square": "four"},
-        {"square": "five"},
-        {"square": "six"},
-        {"square": "seven"},
-        {"square": "eight"},
-        {"square": "nine"},
-        {"square": "ten"},
-        {"square": "eleven"},
-        {"square": "twelve"},
-        {"square": "thirteen"},
-        {"square": "fourteen"},
-        {"square": "fifteen"},
-        {"square": "sixteen"},
-        {"square": "seventeen"},
-        {"square": "eighteen"},
-        {"square": "nineteen"},
-        {"square": "twenty"},
-        {"square": "twenty one"},
-        {"square": "twenty two"},
-        {"square": "twenty three"},
-        {"square": "twenty four"}    	
+        {"square": "<span class='large'>one</span>"},
+        {"square": "<span class='large'>two</span>"},
+        {"square": "<span class='large'>three</span>"},
+        {"square": "<span class='large'>four</span>"},
+        {"square": "<span class='large'>five</span>"},
+        {"square": "<span class='large'>six</span>"},
+        {"square": "<span class='large'>seven</span>"},
+        {"square": "<span class='large'>eight</span>"},
+        {"square": "<span class='large'>nine</span>"},
+        {"square": "<span class='large'>ten</span>"},
+        {"square": "<span class='large'>eleven</span>"},
+        {"square": "<span class='large'>twelve</span>"},
+        {"square": "<span class='large'>thirteen</span>"},
+        {"square": "<span class='large'>fourteen</span>"},
+        {"square": "<span class='large'>fifteen</span>"},
+        {"square": "<span class='large'>sixteen</span>"},
+        {"square": "<span class='large'>seventeen</span>"},
+        {"square": "<span class='large'>eighteen</span>"},
+        {"square": "<span class='large'>nineteen</span>"},
+        {"square": "<span class='large'>twenty</span>"},
+        {"square": "<span class='large'>twenty one</span>"},
+        {"square": "<span class='large'>twenty two</span>"},
+        {"square": "<span class='large'>twenty three</span>"},
+        {"square": "<span class='large'>twenty four</span>"}    	
     ]
 };