diff --git a/assets/styles/root.css b/assets/styles/root.css
index 510be33..b1b8e6c 100644
--- a/assets/styles/root.css
+++ b/assets/styles/root.css
@@ -133,6 +133,10 @@ a.hover-only:hover {
     transition: color 0.2s;
 }
 
+a rt {
+    color: var(--html-color);
+}
+
 article.two-column {
     columns: 2;
 }
@@ -273,6 +277,12 @@ h1, h2, h3, h4, h5, h6 {
     line-height: var(--body-header-line-height);
 }
 
+:is(h1, h2, h3, h4, h5, h6) rt {
+    font-family: var(--font-family-body);
+    font-weight: normal;
+    letter-spacing: 0;
+}
+
 h1.site {
     color: rgb(var(--mid-blue));
     font-size: 2.5em;
@@ -584,6 +594,20 @@ footer > .tags > .chevron:hover {
     background-color: inherit;
 }
 
+rt {
+    color: rgba(var(--black), 0.5);
+    transition: 0.3s;
+}
+ruby:hover rt {
+    color: inherit;
+    transition: 0.3s;
+}
+@media (prefers-color-scheme: dark) {
+    rt {
+        color: rgba(var(--white), 0.5);
+    }
+}
+
 table {
     border: 1px solid var(--separator-color);
     border-collapse: collapse;
diff --git a/layouts/shortcodes/ruby.html b/layouts/shortcodes/ruby.html
new file mode 100644
index 0000000..8932a94
--- /dev/null
+++ b/layouts/shortcodes/ruby.html
@@ -0,0 +1 @@
+<ruby {{ with .Get 1 }}lang="{{ . }}"{{ end }}>{{- .Inner }} <rp>(</rp><rt {{ with .Get 2 }}lang="{{ . }}"{{ end }}>{{- .Get 0 -}}</rt><rp>)</rp></ruby>{{- "" -}}