diff --git a/packages/editor-app/src/App.tsx b/packages/editor-app/src/App.tsx
index 0e5ebf9e..75375235 100644
--- a/packages/editor-app/src/App.tsx
+++ b/packages/editor-app/src/App.tsx
@@ -3,6 +3,7 @@ import { Core, Scene } from '@esengine/ecs-framework';
 import { EditorPluginManager, UIRegistry, MessageHub, SerializerRegistry, EntityStoreService, ComponentRegistry, LocaleService, ProjectService, ComponentDiscoveryService, PropertyMetadataService, LogService, SettingsRegistry, SceneManagerService } from '@esengine/editor-core';
 import { SceneInspectorPlugin } from './plugins/SceneInspectorPlugin';
 import { ProfilerPlugin } from './plugins/ProfilerPlugin';
+import { EditorAppearancePlugin } from './plugins/EditorAppearancePlugin';
 import { StartupPage } from './components/StartupPage';
 import { SceneHierarchy } from './components/SceneHierarchy';
 import { EntityInspector } from './components/EntityInspector';
@@ -178,6 +179,7 @@ function App() {
 
         await pluginMgr.installEditor(new SceneInspectorPlugin());
         await pluginMgr.installEditor(new ProfilerPlugin());
+        await pluginMgr.installEditor(new EditorAppearancePlugin());
 
         messageHub.subscribe('ui:openWindow', (data: any) => {
           if (data.windowId === 'profiler') {
diff --git a/packages/editor-app/src/plugins/EditorAppearancePlugin.tsx b/packages/editor-app/src/plugins/EditorAppearancePlugin.tsx
new file mode 100644
index 00000000..889f9ad4
--- /dev/null
+++ b/packages/editor-app/src/plugins/EditorAppearancePlugin.tsx
@@ -0,0 +1,97 @@
+import type { Core, ServiceContainer } from '@esengine/ecs-framework';
+import { createLogger } from '@esengine/ecs-framework';
+import { IEditorPlugin, EditorPluginCategory, SettingsRegistry } from '@esengine/editor-core';
+import { SettingsService } from '../services/SettingsService';
+
+const logger = createLogger('EditorAppearancePlugin');
+
+/**
+ * Editor Appearance Plugin
+ *
+ * Manages editor appearance settings like font size
+ */
+export class EditorAppearancePlugin implements IEditorPlugin {
+  readonly name = '@esengine/editor-appearance';
+  readonly version = '1.0.0';
+  readonly displayName = 'Editor Appearance';
+  readonly category = EditorPluginCategory.System;
+  readonly description = 'Configure editor appearance settings';
+  readonly icon = '🎨';
+
+  async install(_core: Core, services: ServiceContainer): Promise<void> {
+    const settingsRegistry = services.resolve(SettingsRegistry);
+
+    settingsRegistry.registerCategory({
+      id: 'appearance',
+      title: '外观',
+      description: '配置编辑器的外观设置',
+      sections: [
+        {
+          id: 'font',
+          title: '字体设置',
+          description: '配置编辑器字体样式',
+          settings: [
+            {
+              key: 'editor.fontSize',
+              label: '字体大小 (px)',
+              type: 'range',
+              defaultValue: 13,
+              description: '编辑器界面的字体大小',
+              min: 11,
+              max: 18,
+              step: 1
+            }
+          ]
+        }
+      ]
+    });
+
+    this.applyFontSettings();
+    this.setupSettingsListener();
+
+    logger.info('Installed');
+  }
+
+  async uninstall(): Promise<void> {
+    logger.info('Uninstalled');
+  }
+
+  async onEditorReady(): Promise<void> {
+    logger.info('Editor is ready');
+  }
+
+  /**
+   * Apply font settings from settings
+   */
+  private applyFontSettings(): void {
+    const settings = SettingsService.getInstance();
+    const baseFontSize = settings.get<number>('editor.fontSize', 13);
+
+    logger.info(`Applying font size: ${baseFontSize}px`);
+
+    const root = document.documentElement;
+
+    // Apply font sizes
+    root.style.setProperty('--font-size-xs', `${baseFontSize - 2}px`);
+    root.style.setProperty('--font-size-sm', `${baseFontSize - 1}px`);
+    root.style.setProperty('--font-size-base', `${baseFontSize}px`);
+    root.style.setProperty('--font-size-md', `${baseFontSize + 1}px`);
+    root.style.setProperty('--font-size-lg', `${baseFontSize + 3}px`);
+    root.style.setProperty('--font-size-xl', `${baseFontSize + 5}px`);
+  }
+
+  /**
+   * Listen for settings changes
+   */
+  private setupSettingsListener(): void {
+    window.addEventListener('settings:changed', ((event: CustomEvent) => {
+      const changedSettings = event.detail;
+      logger.info('Settings changed event received', changedSettings);
+
+      if ('editor.fontSize' in changedSettings) {
+        logger.info('Font size changed, applying...');
+        this.applyFontSettings();
+      }
+    }) as EventListener);
+  }
+}
diff --git a/packages/editor-app/src/styles/AssetBrowser.css b/packages/editor-app/src/styles/AssetBrowser.css
index efd4d6f0..d423b839 100644
--- a/packages/editor-app/src/styles/AssetBrowser.css
+++ b/packages/editor-app/src/styles/AssetBrowser.css
@@ -14,7 +14,7 @@
 
 .asset-browser-header h3 {
   margin: 0;
-  font-size: 14px;
+  font-size: var(--font-size-md);
   font-weight: 600;
   color: #cccccc;
 }
@@ -83,7 +83,7 @@
   border: 1px solid #3e3e3e;
   border-radius: 3px;
   color: #cccccc;
-  font-size: 13px;
+  font-size: var(--font-size-base);
   outline: none;
 }
 
@@ -103,7 +103,7 @@
   justify-content: center;
   height: 200px;
   color: #858585;
-  font-size: 13px;
+  font-size: var(--font-size-base);
 }
 
 .asset-list {
@@ -152,7 +152,7 @@
 }
 
 .asset-name {
-  font-size: 12px;
+  font-size: var(--font-size-sm);
   color: #cccccc;
   text-align: center;
   width: 100%;
@@ -163,7 +163,7 @@
 }
 
 .asset-type {
-  font-size: 10px;
+  font-size: var(--font-size-xs);
   color: #858585;
   text-transform: uppercase;
 }
diff --git a/packages/editor-app/src/styles/ConsolePanel.css b/packages/editor-app/src/styles/ConsolePanel.css
index c9a18d65..2a81467e 100644
--- a/packages/editor-app/src/styles/ConsolePanel.css
+++ b/packages/editor-app/src/styles/ConsolePanel.css
@@ -72,7 +72,7 @@
   border: none;
   outline: none;
   color: var(--color-text-primary);
-  font-size: 11px;
+  font-size: var(--font-size-xs);
   font-family: var(--font-family-mono);
 }
 
@@ -89,7 +89,7 @@
   border: 1px solid transparent;
   border-radius: var(--radius-sm);
   cursor: pointer;
-  font-size: 10px;
+  font-size: var(--font-size-xs);
   font-weight: 500;
   transition: all var(--transition-fast);
   opacity: 0.5;
@@ -152,7 +152,7 @@
 }
 
 .console-filter-btn span {
-  font-size: 10px;
+  font-size: var(--font-size-xs);
   font-family: var(--font-family-mono);
 }
 
@@ -161,7 +161,7 @@
   overflow-y: auto;
   overflow-x: hidden;
   font-family: var(--font-family-mono);
-  font-size: 11px;
+  font-size: var(--font-size-xs);
   line-height: 1.4;
 }
 
@@ -177,7 +177,7 @@
 
 .console-empty p {
   margin: 0;
-  font-size: 12px;
+  font-size: var(--font-size-sm);
 }
 
 .log-entry {
@@ -202,7 +202,7 @@
 
 .log-entry-time {
   color: var(--color-text-tertiary);
-  font-size: 10px;
+  font-size: var(--font-size-xs);
   white-space: nowrap;
   padding-top: 2px;
   flex-shrink: 0;
@@ -211,7 +211,7 @@
 
 .log-entry-source {
   color: var(--color-text-secondary);
-  font-size: 10px;
+  font-size: var(--font-size-xs);
   white-space: nowrap;
   padding-top: 2px;
   flex-shrink: 0;
@@ -226,7 +226,7 @@
 
 .log-entry-client {
   color: #10b981;
-  font-size: 9px;
+  font-size: calc(var(--font-size-xs) - 2px);
   white-space: nowrap;
   padding: 1px 6px;
   flex-shrink: 0;
@@ -312,7 +312,7 @@
   border-radius: var(--radius-sm);
   border: 1px solid var(--color-border-default);
   font-family: var(--font-family-mono);
-  font-size: 11px;
+  font-size: var(--font-size-xs);
   line-height: 1.5;
   overflow: auto;
   white-space: pre;
@@ -377,7 +377,7 @@
   color: var(--color-text-inverse);
   border: none;
   border-radius: var(--radius-sm);
-  font-size: 11px;
+  font-size: var(--font-size-xs);
   font-weight: 500;
   cursor: pointer;
   box-shadow: var(--shadow-md);
diff --git a/packages/editor-app/src/styles/FileTree.css b/packages/editor-app/src/styles/FileTree.css
index fc2846a4..0dd837fa 100644
--- a/packages/editor-app/src/styles/FileTree.css
+++ b/packages/editor-app/src/styles/FileTree.css
@@ -30,7 +30,7 @@
   align-items: center;
   justify-content: center;
   color: #858585;
-  font-size: 12px;
+  font-size: var(--font-size-sm);
 }
 
 .tree-node {
@@ -38,7 +38,7 @@
   align-items: center;
   padding: 4px 8px;
   cursor: pointer;
-  font-size: 13px;
+  font-size: var(--font-size-base);
   white-space: nowrap;
   transition: background 0.1s ease;
 }
@@ -58,13 +58,13 @@
   align-items: center;
   justify-content: center;
   margin-right: 4px;
-  font-size: 10px;
+  font-size: var(--font-size-xs);
   color: #cccccc;
 }
 
 .tree-icon {
   margin-right: 6px;
-  font-size: 14px;
+  font-size: var(--font-size-md);
 }
 
 .tree-label {