diff --git a/apps/web/public/index.html b/apps/web/public/index.html
index d89b9f095..fe48f6a90 100644
--- a/apps/web/public/index.html
+++ b/apps/web/public/index.html
@@ -138,11 +138,6 @@
         overflow: hidden;
       }
 
-      * {
-        font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
-          Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-      }
-
       @keyframes fadeUp {
         0% {
           transform: translateY(500px);
diff --git a/packages/editor/src/extensions/task-item/component.tsx b/packages/editor/src/extensions/task-item/component.tsx
index 04e316b57..4fd78c8ef 100644
--- a/packages/editor/src/extensions/task-item/component.tsx
+++ b/packages/editor/src/extensions/task-item/component.tsx
@@ -17,7 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { Flex, Text } from "@theme-ui/components";
+import { Box, Flex } from "@theme-ui/components";
 import { ReactNodeViewProps } from "../react";
 import { Icon } from "../../toolbar/components/icon";
 import { Icons } from "../../toolbar/icons";
@@ -106,7 +106,6 @@ export function TaskItemComponent(
           borderRadius: "default",
           alignSelf: "start",
           p: "1px",
-          mt: "2px",
           mr: 1,
           cursor: editor.isEditable ? "pointer" : "unset",
           ":hover": {
@@ -114,7 +113,8 @@ export function TaskItemComponent(
           },
           ":hover .icon path": {
             fill: "var(--checked) !important"
-          }
+          },
+          fontFamily: "inherit"
         }}
         onMouseDown={(e) => {
           if (globalThis["keyboardShown"]) {
@@ -129,11 +129,10 @@ export function TaskItemComponent(
           }
         }}
         color={checked ? "checked" : "icon"}
-        size={isMobile ? 16 : 14}
+        size={isMobile ? "1.66ch" : "1.46ch"}
       />
 
-      <Text
-        as="div"
+      <Box
         ref={forwardRef}
         sx={{
           "> .taskitem-content-wrapper > p": {
diff --git a/packages/editor/src/extensions/task-list/component.tsx b/packages/editor/src/extensions/task-list/component.tsx
index 05bc45174..5e1667af3 100644
--- a/packages/editor/src/extensions/task-list/component.tsx
+++ b/packages/editor/src/extensions/task-list/component.tsx
@@ -108,7 +108,8 @@ export function TaskListComponent(
               px: 2,
               zIndex: 1,
               color: "fontTertiary",
-              fontSize: "title"
+              fontSize: "inherit",
+              fontFamily: "inherit"
             }}
             placeholder="Untitled"
             onChange={(e) => {
@@ -168,15 +169,15 @@ export function TaskListComponent(
               mr: 2,
               color: "fontTertiary",
               flexShrink: 0,
-              zIndex: 1
+              zIndex: 1,
+              fontFamily: "inherit"
             }}
           >
             {stats.checked}/{stats.total}
           </Text>
         </Flex>
       )}
-      <Text
-        as={"div"}
+      <Box
         ref={forwardRef}
         dir={textDirection}
         sx={{
diff --git a/packages/editor/src/toolbar/components/icon.tsx b/packages/editor/src/toolbar/components/icon.tsx
index 61d347f2c..9306d2b77 100644
--- a/packages/editor/src/toolbar/components/icon.tsx
+++ b/packages/editor/src/toolbar/components/icon.tsx
@@ -34,7 +34,7 @@ function isSchemeColor(
 type IconProps = {
   title?: string;
   path: string;
-  size?: keyof Theme["iconSizes"] | number;
+  size?: keyof Theme["iconSizes"] | number | string;
   color?: keyof SchemeColors | string;
   stroke?: string;
   rotate?: boolean;
@@ -60,8 +60,10 @@ function MDIIconWrapper({
       title={title}
       path={path}
       size={
-        typeof size === "string"
-          ? `${theme?.iconSizes[size] || 24}px`
+        theme && typeof size === "string" && size in theme.iconSizes
+          ? `${(theme?.iconSizes as any)[size] || 24}px`
+          : typeof size === "string"
+          ? size
           : `${size}px`
       }
       style={{
diff --git a/packages/editor/src/toolbar/tools/font.tsx b/packages/editor/src/toolbar/tools/font.tsx
index 72f6fa8f2..ee39b9c7e 100644
--- a/packages/editor/src/toolbar/tools/font.tsx
+++ b/packages/editor/src/toolbar/tools/font.tsx
@@ -67,7 +67,7 @@ export function FontSize(props: ToolProps) {
           .setFontSize(`${defaultFontSize}px`)
           .run()
       }
-      value={fontSize}
+      value={fontSize || `${defaultFontSize}px`}
     />
   );
 }
diff --git a/packages/editor/styles/styles.css b/packages/editor/styles/styles.css
index c69292a2f..05e2a2264 100644
--- a/packages/editor/styles/styles.css
+++ b/packages/editor/styles/styles.css
@@ -509,7 +509,7 @@ p > *::selection {
 
 .outline-list li > p::before {
   position: absolute;
-  top: 4px;
+  top: 15%;
   cursor: pointer;
   content: "";
   background-size: 18px;