プログラミングにおいて、読みやすいコードは美しいだけでなく、バグの少ない効率的な開発につながります。そのためには、適切なフォントの選定も欠かせません。
今回は、最近公開されたばかりのプログラマー向けフォント「Moralerspace」について、その特徴や魅力を深堀りします。
Moralerspaceフォントとは?
画像:
GitHubリポジトリー
よりMoralerspaceは、モダンな欧文フォント「
Monaspace
」と、日本語フォント「
IBM Plex Sans JP
」を組み合わせた、プログラミング向けのフォントです。この組み合わせにより英数字と日本語の文字が美しく調和し、読みやすさと使いやすさを両立しています。
Moralerspaceは、同じくプログラミング用フォントの「HackGen」と同じ方が開発しています。
MonaspaceはGitHubが開発したフォントで、さまざまな技術によって読みやすさを実現しています。詳しくは、こちらの記事で解説しています。
GitHub製のコーディングフォント「Monaspace」の特徴と使い方
GitHub Nextが、「An innovative superfamily of fonts for code(コード用フォントの革新的なスーパーファミリー)」と主張する、可変フォント対応の新しいコーディングフォント「Monaspace」を発表しました。
Moralerspaceの特徴
Moralerspaceフォントは、Monaspace由来の英数字を使っているため、クリアでモダンなデザインで非常に読みやすくなっています。また、日本語文字はIBM Plex Sans JPをベースにしており、文字の懐が広く、長時間のコーディング作業でも目の疲れを軽減します。
文字幅比率は半角3:全角5で、ゆとりのある幅の半角英数字を実現しています。半角1:全角2のバージョンも配布されています。さらに、全角スペースが可視化されるため、バグの減少にも寄与します。
ライセンス
MoralerspaceフォントはSIL Open Font License v1.1に基づいて配布されています。これにより、個人使用から商用利用まで、自由に使用することが可能です。
使い方
Moralerspaceは
GitHubリポジトリーのReleasesページ
からダウンロードできます。[Assets]から好みのバージョンのZIPファイルをダウンロードし、解凍してフォントをインストールするだけです。
VS Codeで使うには、GUIから設定するか、settings.json
を編集します。たとえば、通常版のMoralerspaceのNeonを利用する場合は、GUIでフォント設定の先頭に'Moralerspace Neon',
を追加するか、settings.json
を次のように編集します。
try{(()=>{function a(e){if(!e)return;let t=e.getAttribute("tabindex")!==null,n=e.scrollWidth>e.clientWidth;n&&!t?e.setAttribute("tabindex","0"):!n&&t&&e.removeAttribute("tabindex")}var u=window.requestIdleCallback||(e=>setTimeout(e,1)),i=window.cancelIdleCallback||clearTimeout;function l(e){let t=new Set,n,r;return new ResizeObserver(c=>{c.forEach(o=>t.add(o.target)),n&&clearTimeout(n),r&&i(r),n=setTimeout(()=>{r&&i(r),r=u(()=>{t.forEach(o=>e(o)),t.clear()})},250)})}function d(e,t){e.querySelectorAll?.(".expressive-code pre > code").forEach(n=>{let r=n.parentElement;r&&t.observe(r)})}var s=l(a);d(document,s);var b=new MutationObserver(e=>e.forEach(t=>t.addedNodes.forEach(n=>{d(n,s)})));b.observe(document.body,{childList:!0,subtree:!0});document.addEventListener("astro:page-load",()=>{d(document,s)});})();}catch(e){console.error("[EC] tabindex-js-module failed:",e)}try{(()=>{function i(o){let e=document.createElement("pre");Object.assign(e.style,{opacity:"0",pointerEvents:"none",position:"absolute",overflow:"hidden",left:"0",top:"0",width:"20px",height:"20px",webkitUserSelect:"auto",userSelect:"all"}),e.ariaHidden="true",e.textContent=o,document.body.appendChild(e);let a=document.createRange();a.selectNode(e);let n=getSelection();if(!n)return!1;n.removeAllRanges(),n.addRange(a);let r=!1;try{r=document.execCommand("copy")}finally{n.removeAllRanges(),document.body.removeChild(e)}return r}async function l(o){let e=o.currentTarget,a=e.dataset,n=!1,r=a.code.replace(/\u007f/g,`
`);try{await navigator.clipboard.writeText(r),n=!0}catch{n=i(r)}if(!n||e.parentNode?.querySelector(".feedback"))return;let t=document.createElement("div");t.classList.add("feedback"),t.append(a.copied),e.before(t),t.offsetWidth,requestAnimationFrame(()=>t?.classList.add("show"));let c=()=>!t||t.classList.remove("show"),d=()=>{!t||parseFloat(getComputedStyle(t).opacity)>0||(t.remove(),t=void 0)};setTimeout(c,1500),setTimeout(d,2500),e.addEventListener("blur",c),t.addEventListener("transitioncancel",d),t.addEventListener("transitionend",d)}function s(o){o.querySelectorAll?.(".expressive-code .copy button").forEach(e=>e.addEventListener("click",l))}s(document);var u=new MutationObserver(o=>o.forEach(e=>e.addedNodes.forEach(a=>{s(a)})));u.observe(document.body,{childList:!0,subtree:!0});document.addEventListener("astro:page-load",()=>{s(document)});})();}catch(e){console.error("[EC] copy-js-module failed:",e)} "editor.fontFamily": "'Moralerspace Neon', monospace"
Moralerspace Neon
の部分は、ダウンロードしたフォントのファミリー名に置き換えてください。たとえば、Moralerspaceの半角1:全角2バージョンのArgonを使う場合は、Moralerspace Argon HW
とします。
まとめ
Moralerspaceは、MonaspaceとIBM Plex Sans JPの良いところを組み合わせた非常に読みやすいフォントです。筆者もさっそくVS CodeのフォントをMoralerspaceに設定しました。ぜひ、試してみてください。
参考