about disclaimer

Jang's Blog

국내외 인터넷 신문 본문 타이포그래피 스타일

June 22, 2020

학교 수업 과제를 위해 인터넷 신문의 본문 타이포그래피 스타일 활용을 조사하게 되었습니다. 그 결과를 공유합니다.

개요

서울대학교 디자인학부에서 열리는 ‘현대디자인론’ 과목을 수강하면서 인터넷 저널리즘과 접근성을 개인 프로젝트 주제로 잡았습니다. 언론의 공공성 측면을 테마로 현황조사를 했는데, 고령층의 모바일 사용 습관이 짐작했던 바와 많이 달라서 재미있었는데요. 스마트폰으로 문자, 카톡은 못보내도 뉴스는 꼬박꼬박 보는 사용자가 얼마나 많은지 알면 놀라실걸요?

프로젝트 과정 중에 국내외 인터넷 언론 본문에서 사용되는 스타일 현황 조사를 만들었는데, 누가 이런걸 보겠냐마는 그래도 기껏 만들어놓은 자료니까 공유하려고 합니다. 국내 언론사 중 포털 사이트 메인에 올라가는 경향신문 등 40개소(네이버, 다음 인링크 포함)를 조사했고, 미국 9개소, 일본과 중국 각각 5개소, 4개소를 추가로 확인했습니다.

웹 폰트를 돋움으로 설정한 곳이 두 군데나 있던데 왜 그럴까요…? 돋움이 좋아서?

방법

puppeteer로 본문 문단 1개에 내용이 동일한 텍스트를 삽입한 뒤 font-size, font-family, line-height, word-spacing, line-spacing, 이렇게 5개 스타일의 computed된 값을 구하고 문단을 스크린 샷으로 남겼습니다. 문단 간격, body의 padding 값 등 전체적인 레이아웃이 고려되어 있지 않아 스크린 샷만으로 가독성 등을 평가하는 것은 어렵습니다.

사용된 인터넷 기사와 코드는 부록에 첨부합니다.

인터넷 신문 본문 타이포그래피 - 국내

타이포그래피보다도 거의 모든 언론사가 글자 크기 조절 버튼을 상단에 배치하는 등 비슷비슷한 독자적인 접근성 가이드라인을 따른 부분이 눈에 띄었습니다. 외국에서는 WSJ 등을 제외하고는 글자 크기 조절 버튼 등의 도입 사례를 거의 찾아볼 수가 없어 확인해 보니, 웹와치라는 업체에서 제시한 가이드라인에 명시된 내용이었습니다.

인터넷 신문 상단에 배치된 다양한 글자 크기 조절 버튼
인터넷 신문 상단에 배치된 다양한 글자 크기 조절 버튼

경향신문font-size 16px
line-height 25.6px
font-family Helvetica-light, AppleSDGothicNeo-Light, "Noto Sans", Roboto-Light, "Malgun Gothic", "맑은 고딕", Dotum, 돋움, sans-serif
letter-spacing -0.4px
국민일보font-size 16px
line-height 24px
font-family "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Noto Sans Kr", "Apple SD Gothic Neo", "Malgun Gothic", dotum, 돋움, tahoma, sans-serif
노컷뉴스font-size 18.72px
line-height 28.08px
font-family "맑은 고딕", "Malgun Gothic", 돋움, Dotum, 굴림, Gulim, Helvetica, sans-serif
letter-spacing -1px
뉴데일리font-size 17px
line-height 28.9px
font-family "맑은 고딕", AppleSDGothicNeo-Regular, "맑은 고딕", "Malgun Gothic"
뉴스타파font-size 16px
line-height 24.96px
font-family "Noto Sans KR", sans-serif
뉴시스font-size 16.065px
line-height 25.704px
font-family 돋움, Dotum, 굴림, Gulim, Helvetica, sans-serif
letter-spacing -0.25px
word-spacing 3px
데일리안font-size 22.3333px
line-height normal
font-family "Noto Sans KR regular", sans-serif
동아일보font-size 17px
line-height 26.52px
font-family HelveticaNeue-Light, AppleSDGothicNeo-Light, sans-serif
letter-spacing -0.3px
디지털타임스font-size 17px
line-height 25.5px
font-family HelveticaNeue, AppleSDGothicNeo, "Malgun Gothic", "맑은 고딕", Dotum, 돋움, sans-serif
letter-spacing -0.288px
마이데일리font-size 17px
line-height 26px
font-family "Nanum Gothic"
매일경제font-size 19px
line-height 32px
font-family "Malgun Gothic", dotum, Gulim, Helvetica, Apple-Gothic, sans-serif
letter-spacing -0.95px
머니투데이font-size 17px
line-height 27.999px
font-family Helvetica-light, AppleSDGothicNeo-Light, "Noto Sans", Roboto-Light, "Malgun Gothic", "맑은 고딕", Dotum, 돋움, sans-serif
letter-spacing -0.28px
word-spacing 2px
문화일보font-size 17px
line-height 23.8px
font-family "Malgun Gothic", "���� ����", dotum, ����, sans-serif
미디어오늘font-size 18px
line-height 27px
font-family sans-serif
letter-spacing -0.9px
블로터font-size 16px
line-height 28.8px
font-family "Nanum Barun Gothic Regular"
서울경제font-size 17px
line-height 28.05px
font-family notokr-regular, Dotum, Arial, sans-serif
서울신문font-size 18px
line-height 28.8px
font-family 돋움, dotum
세계일보font-size 18px
line-height 28px
font-family MalgunGothic, "Malgun Gothic", HelveticaNeue, AppleSDGothicNeo, sans-serif
letter-spacing 0.2px
시사인font-size 19.008px
line-height 30.888px
font-family "Noto Sans KR", "Malgun Gothic", 돋움, dotum, "Apple SD Gothic Neo", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif
letter-spacing -0.9504px
아시아경제font-size 17px
line-height 29px
font-family HelveticaNeue-Light, AppleSDGothicNeo-Light, "Noto Sans", Roboto-Light, "Malgun Gothic", "맑은 고딕", Dotum, 돋움, sans-serif
아이뉴스24font-size 18px
line-height 26px
font-family "Noto Sans CJK KR Regular", "Apple SD Gothic Neo", Sans-serif, sans-serif, serif, system-ui
연합뉴스font-size 17px
line-height 27.54px
font-family sans-serif
오마이뉴스font-size 16px
line-height 28.8px
font-family "Helvetica Neue", "Apple SD Gothic Neo", sans-serif, Helvetica-light, AppleSDGothicNeo-Light, "Malgun Gothic", "맑은 고딕", Dotum, 돋움
letter-spacing -0.64px
이데일리font-size 16px
line-height 25px
font-family Roboto, sans-serif
조선일보font-size 17px
line-height 25.5px
font-family HelveticaNeue, AppleSDGothicNeo, "Malgun Gothic", "맑은 고딕", Dotum, 돋움, sans-serif
letter-spacing -0.288px
중앙일보font-size 18px
line-height 28.008px
font-family Helvetica-light, AppleSDGothicNeo-Light, "Noto Sans", Roboto-Light, "Malgun Gothic", "맑은 고딕", Dotum, 돋움, sans-serif
letter-spacing -0.9px
코리아헤럴드font-size 20px
line-height 30px
font-family "Noto Sans KR"
letter-spacing -0.3px
파이낸셜뉴스font-size 17px
line-height 27.625px
font-family AppleSDGothicNeo-Regular, "Malgun Gothic", "맑은 고딕", dotum, 돋움, sans-serif
letter-spacing -0.68px
프레시안font-size 16px
line-height 25.6px
font-family "Noto Sans KR", "Noto Sans", "맑은 고딕", "Malgun Gothic", "open sans", Arial, sans-serif
letter-spacing -0.8px
한겨레font-size 16.32px
line-height 27.744px
font-family HelveticaNeue-Light, AppleSDGothicNeo-Light, sans-serif-light
한국경제font-size 20px
line-height 29px
font-family "Helvetica Neue", "Apple SD Gothic Neo", AppleGothic, "Droid Sans fallback", sans-serif
한국일보font-size 17px
line-height 29px
font-family "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "맑은 고딕", Helvetica, Arial, sans-serif
letter-spacing -0.5px
jtbcfont-size 18px
line-height 30.6px
font-family "Times New Roman"
letter-spacing -1px
kbsfont-size 16px
line-height 24px
font-family Helvetica-light, AppleSDGothicNeo-Medium, "Noto Sans CJK", "Noto Sans", "Malgun Gothic", "맑은 고딕", Dotum, 돋움, sans-serif
letter-spacing -0.5px
mbcfont-size 16.08px
line-height 24px
font-family "Noto Sans CJK KR", "Helvetica Neue", "Apple SD Gothic Neo", sans-serif
letter-spacing -0.804px
mbnfont-size 17px
line-height 26.52px
font-family "Malgun Gothic", dotum, Gulim, Helvetica, Apple-Gothic, sans-serif
letter-spacing -0.3px
sbsfont-size 16px
line-height 24.8px
font-family "Malgun Gothic", "맑은 고딕", dotum, 돋움, sans-serif
letter-spacing -1px
ytnfont-size 17px
line-height 26.35px
font-family "Helvetica Neue", "Apple SD Gothic Neo", 맑은고딕, "Malgun Gothic", Dotum, sans-serif
letter-spacing -1px
네이버font-size 16px
line-height normal
font-family "Times New Roman"
다음font-size 17px
line-height 27px
font-family AppleSDGothicNeo, "Malgun Gothic", "맑은 고딕", sans-serif

인터넷 신문 본문 타이포그래피 - 미국

굉장히 보편화된 paywall과 다양한 웹폰트가 인상적입니다. 한국처럼 폰트 파일 하나가 2MB씩 하는 나라에서는 이렇게 쉽게쉽게 웹 폰트를 쓰지는 못하죠. 아름다운 세리프 폰트로 인터넷 뉴스를 볼 수 있는 것이 부럽네요. ※정적 사이트에서 한국어 웹 폰트 최적화하기

usatodayfont-size 16.0909px
line-height 25.7455px
font-family "unify serif", Georgia, TimesNewRoman, "times new roman", Times, serif
wsjfont-size 17px
line-height 27px
font-family Exchange
nytfont-size 20px
line-height 25px
font-family nyt-cheltenham, georgia, "times new roman", times, serif
latfont-size 18px
line-height 31px
font-family Georgia, "times new roman", times, serif
nypostfont-size 18px
line-height 26px
font-family proxima-nova, sans-serif
nydailyfont-size 17px
line-height 28px
font-family "PT Serif", serif
wpfont-size 18px
line-height 31.5px
font-family georgia, "Times New Roman", serif
tribunefont-size 18px
line-height 28px
font-family Georgia, serif
azcentralfont-size 16.0909px
line-height 25.7455px
font-family "unify serif", Georgia, TimesNewRoman, "times new roman", Times, serif

인터넷 신문 본문 타이포그래피 - 일본, 중국

요미우리font-size 16px
line-height 28.8px
font-family "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", メイリオ, Meiryo, "MS Pゴシック", "MS PGothic", "MS ゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif
아사히font-size 18px
line-height 30.6px
font-family Helvetica, Arial, sans-serif
마이니치font-size 17px
line-height 25.5px
font-family -apple-system, BlinkMacSystemFont, YuGothic, 游ゴシック, "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif
letter-spacing 0.32px
니케이font-size 16px
line-height 28.8px
font-family -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", Helvetica, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif
추니치font-size 14px
line-height 29.96px
font-family "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif
참고소식font-size 18px
line-height 28px
font-family "Microsoft YaHei", SimHei, arial
인민일보font-size 18px
line-height 32.4px
font-family "Microsoft Yahei"
양쯔만보font-size 19px
line-height 30px
font-family "Times New Roman"
광주일보font-size 15.2972px
line-height 24.4756px
font-family "Helvetica Neue", Helvetica, Arial, sans-serif

부록

코드

https://github.com/palindrom615/journal-styles-crawler

위 리포지터리에 공개했습니다. 한 번 쓰고 버릴 줄 알고 대충 짜서 민망하지만..

const puppeteer = require("puppeteer");
const filter = require("async/filter");
const map = require("async/map");
const fs = require("fs").promises;

const device = puppeteer.devices["Galaxy Note 3"];

const EXT = ".usa";

const prefix = new Date().toISOString() + EXT;

const takeScreenshot = async (page, articleTextNodes, journal) => {
  const pageScsh = await page.screenshot({
    path: `${prefix}/${journal}.png`,
    fullPage: true,
  });
  if (!articleTextNodes || !articleTextNodes[1]) {
    console.log(`${journal} no article TextNodes`);
    return;
  }
  const typeScsh = await articleTextNodes[1]
    .evaluateHandle((node) => {
      const p = node.parentNode;
      const pp = node.parentNode.parentNode;

      p.textContent =
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
      return p;
    })
    .then(async (handle) => {
      try {
        return await handle
          .asElement()
          .screenshot({ path: `${prefix}/${journal}-type.png` });
      } catch (e) {
        console.log(e, await handle.evaluate((node) => node.innerHTML));
      }
    });
  return;
};

const getInfo = async ([journal, url], browser) => {
  const page = await browser.newPage();
  await page.emulate(device);
  page.on("console", (msg) => {
    for (let i = 0; i < msg._args.length; ++i)
      console.log(`${journal}: ${msg._args[i]}`);
  });
  try {
    await page.goto(url, {
      waitUntil: "networkidle2",
      timeout: 0,
    });
  } catch (e) {
    console.log("19:page goto error: ", e, journal, url);
    return;
  }

  const textNodes = await page.$x(
    "//text()[not(parent::script|parent::style|parent::noscript) and string-length() > 80]"
  );

  const articleTextNodes = await filter(textNodes, async (elemHandle) => {
    return elemHandle.evaluate((elem) => {
      return (
        elem.wholeText.trim().split(" ").length > 40 &&
        getComputedStyle(elem.parentNode).getPropertyValue("display") !== "none"
      );
    });
  });

  const textStylePromises = map(articleTextNodes, async (elemHandle) => {
    return elemHandle.evaluate((elem) => {
      // find second paragraph over 30 words.
      try {
        style = getComputedStyle(elem.parentNode || elem);
      } catch (e) {
        console.log("36:getComputedStyle error: ", e, location.href);
        return;
      }
      return {
        txt: elem.wholeText,
        fontSize: style.getPropertyValue("font-size"),
        fontFamily: style.getPropertyValue("font-family"),
        lineHeight: style.getPropertyValue("line-height"),
        letterSpacing: style.getPropertyValue("letter-spacing"),
        wordSpacing: style.getPropertyValue("word-spacing"),
      };
    });
  });
  await takeScreenshot(page, articleTextNodes, journal);

  return textStylePromises;
};

(async () => {
  await fs.mkdir(prefix);

  const journals = (await fs.readFile(`./journals${EXT}`, "utf8"))
    .trim()
    .split("\n")
    .filter((str) => !str.startsWith("//"))
    .map((str) => str.split(","))
    .filter((arr) => arr.length === 2 && arr[1] !== "");

  const browser = await puppeteer.launch();

  const results = await map(journals, async (journal) =>
    getInfo(journal, browser)
  );
  const resultsJson = results.map((textStyle, journalIdx) => {
    return {
      journal: journals[journalIdx][0],
      site: journals[journalIdx][1],
      ...textStyle[1],
    };
  });
  await browser.close();

  await fs.writeFile(`${prefix}/result.json`, JSON.stringify(resultsJson));
  return;
})();

기사 목록


Loading script...