diff --git a/cmd/tools/vdoc-resources/doc.css b/cmd/tools/vdoc-resources/doc.css
index c847ce6363..80df8972e2 100644
--- a/cmd/tools/vdoc-resources/doc.css
+++ b/cmd/tools/vdoc-resources/doc.css
@@ -109,6 +109,7 @@ body {
 	scrollbar-width: thin;
 	scrollbar-color: #a0aec0 transparent;
 	scrollbar-color: var(--menu-scrollbar-color) transparent;
+	font-family: 'Work Sans', sans-serif;
 }
 *::-webkit-scrollbar {
 	width: 8px;
@@ -124,7 +125,6 @@ body {
 }
 .doc-nav li {
 	line-height: 1.8;
-	font-weight: 300;
 }
 .doc-nav .content.show {
 	display: flex;
@@ -300,6 +300,9 @@ body {
 }
 .doc-content > .doc-node > .title {
 	display: flex;
+	font-family: 'Work Sans', sans-serif;
+	font-weight: 500;
+	padding: 0.3rem;
 	align-items: center;
 	margin-bottom: 1rem;
 	border-bottom: 1px solid #f1f5f8;
@@ -316,8 +319,10 @@ body {
 	fill: var(--ref-symbol-hover-color);
 }
 .doc-content > .doc-node h1 {
-	font-size: 2.5rem;
-	font-weight: 400;
+	font-size: 2rem;
+}
+.doc-content > .doc-node h2 {
+	font-size: 1.3rem;
 }
 .doc-content > .doc-node .signature {
 	border-color: #a0aec0;
@@ -334,8 +339,7 @@ body {
 .doc-content > .doc-node > .title h4,
 .doc-content > .doc-node > .title h5,
 .doc-content > .doc-node > .title h6 {
-	font-weight: 400;
-	padding-top: 0.6rem 0;
+	font-weight: 500;
 	margin: 0;
 }
 .doc-content > .doc-node > .title h1 a,
@@ -382,6 +386,7 @@ body {
 	box-sizing: border-box;
 	-ms-overflow-style: none;
 	scrollbar-width: none;
+	font-family: 'Work Sans', sans-serif;
 }
 .doc-toc::-webkit-scrollbar {
 	display: none;
diff --git a/cmd/tools/vdoc.v b/cmd/tools/vdoc.v
index a4936a57bf..4123f1d963 100644
--- a/cmd/tools/vdoc.v
+++ b/cmd/tools/vdoc.v
@@ -49,7 +49,9 @@ const (
 		<meta http-equiv="x-ua-compatible" content="IE=edge" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<title>{{ title }} | vdoc</title>
+		<link rel="preconnect" href="https://fonts.gstatic.com">
 		<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
+		<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600&display=swap" rel="stylesheet">
 		<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
 		<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
 		<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
@@ -377,9 +379,9 @@ fn doc_node_html(dd doc.DocNode, link string, head bool, tb &table.Table) string
 	md_content := markdown.to_html(dd.comment)
 	hlighted_code := html_highlight(dd.content, tb)
 	node_class := if dd.kind == .const_group { ' const' } else { '' }
-	sym_name := if dd.parent_name.len > 0 && dd.parent_name != 'void' { dd.parent_name + '.' +
-			dd.name } else { dd.name }
-	node_id := slug(sym_name)
+	sym_name := if dd.parent_name.len > 0 && dd.parent_name != 'void' { '($dd.parent_name) $dd.name' } else { dd.name }
+	tag := if dd.parent_name.len > 0 && dd.parent_name != 'void' { '${dd.parent_name}.$dd.name' } else { dd.name }
+	node_id := slug(tag)
 	hash_link := if !head { ' <a href="#$node_id">#</a>' } else { '' }
 	dnw.writeln('<section id="$node_id" class="doc-node$node_class">')
 	if dd.name.len > 0 {